Skip to content

Commit

Permalink
closes #236, #238, #239, #241, #242
Browse files Browse the repository at this point in the history
  • Loading branch information
@lillijo
lillijo committed Apr 30, 2020
1 parent 667338c commit 7245194
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 55 deletions.
3 changes: 1 addition & 2 deletions src/components/ClusterMap/cluster-contours-map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@ const scaleContours = (
const constructContours = (topography, contoursSize) =>
d3Contours()
.size([contoursSize, contoursSize])
.thresholds(10)
.smooth([false])(topography);
.smooth([true])(topography);

const computeColorMap = topography =>
d3ScaleLinear()
Expand Down
4 changes: 2 additions & 2 deletions src/components/ClusterMap/uncertainty-explanation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ const UncertaintyExplanation = props => {
</p>
<svg width="190px" height="20">
<linearGradient id="grad1" x1="20%" y1="0%" x2="120%" y2="0%">
<stop offset="0%" stopColor="#000" />
<stop offset="100%" stopColor="#888" />
<stop offset="0%" stopColor="#0a0a0a" />
<stop offset="100%" stopColor="#999" />
</linearGradient>
<rect width="190" height="20" fill="url(#grad1)" stroke="none" />
</svg>
Expand Down
163 changes: 121 additions & 42 deletions src/components/GeoMap/geo-map-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { ReactComponent as SouthAmerica } from "../../assets/GeoMap/continents/s
import { ReactComponent as Asia } from "../../assets/GeoMap/continents/asia.svg";
import { ReactComponent as Australia } from "../../assets/GeoMap/continents/australia.svg";

import HoverPopover from "../HoverPopover/HoverPopover";

const continentSVGs = continent => {
switch (continent) {
case "Nordamerika": {
Expand Down Expand Up @@ -48,6 +50,40 @@ const mapLatToHeight = (height, continent, lat) =>
export default class GeoMapView extends React.Component {
constructor(props) {
super();
this.state = {
hovered: false,
mouseLocation: [0, 0]
};
this.renderHover = this.renderHover.bind(this);
}

renderHover(hovered, mouseLocation) {
return (
hovered && (
<HoverPopover
width={"15em"}
height="20px"
locationX={mouseLocation[0]}
locationY={mouseLocation[1]}
>
<p
style={{
position: "absolute",
backgroundColor: "#1c1d1f",
margin: "0",
fontSize: "10px",
color: "#afca0b",
fontWeight: "500",
letterSpacing: "1px",
overflow: "hidden",
padding: "5px 10px"
}}
>
<label>{hovered}</label>
</p>
</HoverPopover>
)
);
}

render() {
Expand All @@ -63,7 +99,11 @@ export default class GeoMapView extends React.Component {
return <div />;
}

const arcHeight = height * 0.46;
const usedContinents = continents.filter(c => c.institutionCount > 0)
.length;
const contWidth = width / usedContinents;
const factor = (width * 6) / usedContinents;
const arcHeight = height * 0.47;
return (
<div
className={style.geoMapWrapper}
Expand All @@ -80,29 +120,47 @@ export default class GeoMapView extends React.Component {
data-intro=" <b>Forschungsprojekte </b> werden als <b>Bögen</b> zwischen Kontinenten visualisiert. Hierdurch tritt die internationale Kooperation, die in vielen Projekten stattfindet, in den Vordergrund. Durch Klicken auf einen Bogen, erhält man eine Liste dieser."
>
<svg width={width} height={arcHeight}>
{Object.values(continentConnections).map((con, i) => (
<path
d={`M${con.start * width} ${arcHeight} A ${(Math.abs(
con.end - con.start
) *
width) /
2} ${(Math.abs(con.end - con.start) * width) /
2} 0 0 1 ${con.end * width} ${arcHeight} M ${con.start *
width} ${arcHeight} A ${(Math.abs(con.end - con.start) *
width) /
2} ${(Math.abs(con.end - con.start) * width) /
2} 0 0 0 ${con.end * width} ${arcHeight}`}
stroke="white"
strokeWidth={Math.max(3, con.weight * 0.5)}
fill="none"
opacity={0.4}
className={style.arcHover}
key={JSON.stringify([con.start, con.end])}
onClick={() => {
this.props.showInstDetails(con.name);
}}
/>
))}
{Object.values(continentConnections)
.filter(con => con.weight > 0)
.map((con, i) => (
<path
d={`M${con.end * factor},${arcHeight} C${con.end *
factor},${arcHeight -
Math.abs(con.end - con.start) * 0.55 * factor} ${con.start *
factor},${arcHeight -
Math.abs(con.end - con.start) * 0.55 * factor} ${con.start *
factor},${arcHeight}`}
stroke="white"
strokeWidth={Math.max(3, con.weight * 0.5)}
fill="none"
opacity={0.4}
className={style.arcHover}
key={JSON.stringify([con.start, con.end])}
onClick={() => {
this.props.showInstDetails(con.name);
}}
onMouseOver={evt => {
this.setState({
hovered:
con.weight +
" Kooperationen mit Institutionen in " +
con.name.split("|")[0] +
" und " +
con.name.split("|")[1],
mouseLocation: [
evt.nativeEvent.clientX,
evt.nativeEvent.clientY
]
});
}}
onMouseLeave={() => {
this.setState({
hovered: false,
mouseLocation: [0, 0]
});
}}
/>
))}
</svg>
</div>
<div
Expand All @@ -118,12 +176,12 @@ export default class GeoMapView extends React.Component {
).filter(ins => ins.continent === c.name);
return (
<div className={style.continentWrapper} key={c.name}>
<svg viewBox={"0 0 500 120"}>
<svg viewBox={"0 0 500 120"} width={contWidth}>
<text
fill="#aaa"
x="50%"
y="100"
fontSize="400%"
fontSize="300%"
key={c.name}
textAnchor="middle"
>
Expand Down Expand Up @@ -173,23 +231,44 @@ export default class GeoMapView extends React.Component {
data-step="4"
data-intro="Forschungsprojekte haben neben internationalen Kooperationspartnern auch Regionen, auf welche der Forschungsfokus gelegt wird. Die Anzahl dieser kann man hier aufgeteilt auf die Kontinente sehen. Klicken Sie auf einen Kreis, um zu erfahren um welche Forschungsprojekte es sich handelt."
>
{continents.map((c, i) => {
return (
<svg width="16.66%" height="150" key={i + "region"}>
<circle
cx="50%"
cy="50%"
className={style.countCircle}
r={Math.min(38, c.forschungsregionCount)}
fill="#aaa"
onClick={() => {
this.props.showInstDetails(c.name + "|f");
}}
/>
</svg>
);
})}
{continents
.filter(c => c.institutionCount > 0)
.map((c, i) => {
return (
<svg width={contWidth} height="150" key={i + "region"}>
<circle
cx="50%"
cy="50%"
className={style.countCircle}
r={Math.min(40, c.forschungsregionCount * 1.2)}
fill="#aaa"
onClick={() => {
this.props.showInstDetails(c.name + "|f");
}}
onMouseOver={evt => {
this.setState({
hovered:
c.forschungsregionCount +
" Forschungsregionen in " +
c.name,
mouseLocation: [
evt.nativeEvent.clientX,
evt.nativeEvent.clientY
]
});
}}
onMouseLeave={() => {
this.setState({
hovered: false,
mouseLocation: [0, 0]
});
}}
/>
</svg>
);
})}
</div>
{this.renderHover(this.state.hovered, this.state.mouseLocation)}
</div>
);
}
Expand Down
4 changes: 0 additions & 4 deletions src/components/GeoMap/geo-map-view.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@
flex-wrap: nowrap;
}

.continentWrapper {
width: 16.666%;
}

.plotTitle {
color: #717071;
font-size: 110%;
Expand Down
4 changes: 2 additions & 2 deletions src/components/InstDetailsPanel/inst-details-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ const mapStateToProps = state => {
.filter(inst => inst.continent === continent2)
.map(inst => inst.id);
return {
title: "Kooperation zwischen " + continent1 + " und " + continent2,
title: "Kooperation mit " + continent1 + " und " + continent2,
description:
"Forschungsprojekte mit Kooperationen zwischen diesen Kontinenten:",
"Forschungsprojekte mit Kooperationen auf diesen Kontinenten:",
projects: projects.filter(
p =>
p.Kooperationspartner.length > 1 &&
Expand Down
4 changes: 1 addition & 3 deletions src/components/TimeLine/time-line.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,7 @@ const processData = (data, missingData) => {

if (!data || data === [] || !missingData) return [];

let keys = [...new Set(data.map(b => b.forschungsbereich))].concat(
"Unveröffentlicht"
);
let keys = [1, 2, 3, 4, 5, "Unveröffentlicht"];
let map = [],
years = [];
data = data.concat(missingData);
Expand Down

0 comments on commit 7245194

Please sign in to comment.