Commit 722b4b22 authored by ETretyakov's avatar ETretyakov
Browse files

Fixed colors, fixed ArcsView KeyUp event

parent 5bbd523b
......@@ -4538,16 +4538,141 @@
"type": "^1.0.1"
}
},
"d3": {
"version": "5.14.2",
"resolved": "https://registry.npmjs.org/d3/-/d3-5.14.2.tgz",
"integrity": "sha512-Ccipa9XrYW5N0QkP6u0Qb8kU6WekIXBiDenmZm1zLvuq/9pBBhRCJLCICEOsH5Og4B0Xw02bhqGkK5VN/oPH0w==",
"requires": {
"d3-array": "1",
"d3-axis": "1",
"d3-brush": "1",
"d3-chord": "1",
"d3-collection": "1",
"d3-color": "1",
"d3-contour": "1",
"d3-dispatch": "1",
"d3-drag": "1",
"d3-dsv": "1",
"d3-ease": "1",
"d3-fetch": "1",
"d3-force": "1",
"d3-format": "1",
"d3-geo": "1",
"d3-hierarchy": "1",
"d3-interpolate": "1",
"d3-path": "1",
"d3-polygon": "1",
"d3-quadtree": "1",
"d3-random": "1",
"d3-scale": "2",
"d3-scale-chromatic": "1",
"d3-selection": "1",
"d3-shape": "1",
"d3-time": "1",
"d3-time-format": "2",
"d3-timer": "1",
"d3-transition": "1",
"d3-voronoi": "1",
"d3-zoom": "1"
},
"dependencies": {
"d3-array": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
"integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
},
"d3-scale": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
"integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
"requires": {
"d3-array": "^1.2.0",
"d3-collection": "1",
"d3-format": "1",
"d3-interpolate": "1",
"d3-time": "1",
"d3-time-format": "2"
}
}
}
},
"d3-array": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.4.0.tgz",
"integrity": "sha512-KQ41bAF2BMakf/HdKT865ALd4cgND6VcIztVQZUTt0+BH3RWy6ZYnHghVXf6NFjt2ritLr8H1T8LreAAlfiNcw=="
},
"d3-axis": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
"integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
},
"d3-brush": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.5.tgz",
"integrity": "sha512-rEaJ5gHlgLxXugWjIkolTA0OyMvw8UWU1imYXy1v642XyyswmI1ybKOv05Ft+ewq+TFmdliD3VuK0pRp1VT/5A==",
"requires": {
"d3-dispatch": "1",
"d3-drag": "1",
"d3-interpolate": "1",
"d3-selection": "1",
"d3-transition": "1"
}
},
"d3-chord": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz",
"integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==",
"requires": {
"d3-array": "1",
"d3-path": "1"
},
"dependencies": {
"d3-array": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
"integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
}
}
},
"d3-collection": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
"integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
},
"d3-color": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz",
"integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg=="
},
"d3-contour": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
"integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
"requires": {
"d3-array": "^1.1.1"
},
"dependencies": {
"d3-array": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
"integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
}
}
},
"d3-dispatch": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
"integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
},
"d3-drag": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
"integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
"requires": {
"d3-dispatch": "1",
"d3-selection": "1"
}
},
"d3-dsv": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
......@@ -4558,16 +4683,60 @@
"rw": "1"
}
},
"d3-ease": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.6.tgz",
"integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ=="
},
"d3-fetch": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.1.2.tgz",
"integrity": "sha512-S2loaQCV/ZeyTyIF2oP8D1K9Z4QizUzW7cWeAOAS4U88qOt3Ucf6GsmgthuYSdyB2HyEm4CeGvkQxWsmInsIVA==",
"requires": {
"d3-dsv": "1"
}
},
"d3-force": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
"integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==",
"requires": {
"d3-collection": "1",
"d3-dispatch": "1",
"d3-quadtree": "1",
"d3-timer": "1"
}
},
"d3-format": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.2.tgz",
"integrity": "sha512-gco1Ih54PgMsyIXgttLxEhNy/mXxq8+rLnCb5shQk+P5TsiySrwWU5gpB4zen626J4LIwBxHvDChyA8qDm57ww=="
},
"d3-geo": {
"version": "1.11.9",
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.11.9.tgz",
"integrity": "sha512-9edcH6J3s/Aa3KJITWqFJbyB/8q3mMlA9Fi7z6yy+FAYMnRaxmC7jBhUnsINxVWD14GmqX3DK8uk7nV6/Ekt4A==",
"requires": {
"d3-array": "1"
},
"dependencies": {
"d3-array": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
"integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
}
}
},
"d3-hexbin": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/d3-hexbin/-/d3-hexbin-0.2.2.tgz",
"integrity": "sha1-nFg32s/UcasFM3qeke8Qv8T5iDE="
},
"d3-hierarchy": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
"integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
},
"d3-interpolate": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
......@@ -4576,6 +4745,26 @@
"d3-color": "1"
}
},
"d3-path": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
"integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
},
"d3-polygon": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
"integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ=="
},
"d3-quadtree": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
"integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
},
"d3-random": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
"integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ=="
},
"d3-scale": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.1.tgz",
......@@ -4588,6 +4777,28 @@
"d3-time-format": "2"
}
},
"d3-scale-chromatic": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
"integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==",
"requires": {
"d3-color": "1",
"d3-interpolate": "1"
}
},
"d3-selection": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.1.tgz",
"integrity": "sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA=="
},
"d3-shape": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
"integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
"requires": {
"d3-path": "1"
}
},
"d3-time": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
......@@ -4601,6 +4812,41 @@
"d3-time": "1"
}
},
"d3-timer": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
"integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
},
"d3-transition": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
"integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
"requires": {
"d3-color": "1",
"d3-dispatch": "1",
"d3-ease": "1",
"d3-interpolate": "1",
"d3-selection": "^1.1.0",
"d3-timer": "1"
}
},
"d3-voronoi": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
"integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
},
"d3-zoom": {
"version": "1.8.3",
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
"integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
"requires": {
"d3-dispatch": "1",
"d3-drag": "1",
"d3-interpolate": "1",
"d3-selection": "1",
"d3-transition": "1"
}
},
"damerau-levenshtein": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz",
......
......@@ -10,6 +10,7 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.3",
"@testing-library/user-event": "^7.1.2",
"d3": "^5.14.2",
"d3-scale": "^3.2.1",
"deck.gl": "^7.3.8",
"react": "^16.12.0",
......
......@@ -7,7 +7,9 @@ import ArcsViewer from './viewers/arcs'
import {FlyToInterpolator} from 'deck.gl';
import DeckGL from '@deck.gl/react';
import {ArcLayer, ScatterplotLayer, ColumnLayer} from '@deck.gl/layers';
import {scaleQuantile} from 'd3-scale';
import {scaleQuantize} from 'd3-scale';
// import {scaleQuantile, scaleQuantize} from 'd3-scale';
import {extent, interpolateSpectral, color} from 'd3'
import './App.css'
const MAPBOX_TOKEN = 'pk.eyJ1IjoiZXRyZXR5YWtvdiIsImEiOiJjazJ3NGN5czgwYjByM25wanNmNmg1ZTl6In0.7t0bhGldnBbWJYLh3hy7FA';
......@@ -78,29 +80,36 @@ export default class App extends Component {
cFlows[key] = flows[key]
});
let maxValue = null;
const arcs = Object.keys(cFlows).map(toId => {
const f = data[toId];
if (flows[toId] > maxValue) {
maxValue = flows[toId]
}
return {
source: centroid,
target: f.properties.centroid,
targetName: f.properties.name,
value: flows[toId]
value: flows[toId],
itemIndex: toId
};
});
const scale = scaleQuantile()
.domain(arcs.map(a => Math.abs(a.value)))
.range(colorRange.map((c, i) => {
return i
}));
const colorRangeSize = new Set(arcs.map(a => a.value)).size;
const scale = scaleQuantize() // scaleQuantile
.domain(extent(arcs.map(a => a.value)))
.range([...Array(colorRangeSize).keys()]);
arcs.forEach(a => {
// Mad fix
let quantile = scale(Math.abs(a.value));
if (quantile <= 0) {
quantile = 1
}
a.quantile = quantile;
const quantile = scale(a.value)/colorRangeSize || 0.1;
const c = color(interpolateSpectral(1 - quantile));
a.width = quantile * 5;
a.color = [c.r, c.g, c.b];
});
this.setState({arcs: arcs})
......@@ -149,8 +158,8 @@ export default class App extends Component {
this.recalculateCountries(this.props.data, affiliation);
};
arcsViewCallback = (object) => {
this.flyToAffiliation(object.target);
arcsViewCallback = (itemIndex) => {
this.flyToAffiliation(this.props.data[itemIndex].geometry.coordinates);
};
countriesCallback = (country) => {
......@@ -227,11 +236,22 @@ export default class App extends Component {
renderLayers(dataFromProps = this.props.data) {
const scale = scaleQuantile()
.domain(dataFromProps.map(a => Math.abs(a.properties.publications_total)))
.range(colorRange.map((c, i) => {
return i
}));
// const scale = scaleQuantize()
// .domain(dataFromProps.map(a => Math.abs(a.properties.publications_total)))
// .range(colorRange.map((c, i) => {
// return i
// }));
const colorRangeSize = new Set(dataFromProps.map(a => a.properties.publications_total)).size;
const scale = scaleQuantize() // scaleQuantile
.domain(dataFromProps.map(a => a.properties.publications_total))
.range([...Array(colorRangeSize).keys()]);
function getColor(quantile) {
const c = color(interpolateSpectral(1 - quantile));
return [c.r, c.g, c.b]
}
let layers = [];
......@@ -249,10 +269,12 @@ export default class App extends Component {
stroked: true,
filled: false,
lineWidthMinPixels: 5,
getFillColor: d => colorRange[scale(d.properties.publications_total)],
getLineWidth: d => scale(d.properties.publications_total) * 100,
getLineColor: d => colorRange[scale(d.properties.publications_total)],
getRadius: d => scale(d.properties.publications_total) * 1000,
getFillColor: d => getColor(scale(d.properties.publications_total)/colorRangeSize || 0.1),
// getFillColor: d => colorRange[scale(d.properties.publications_total)],
getLineWidth: d => scale(d.properties.publications_total),
getLineColor: d => getColor(scale(d.properties.publications_total)/colorRangeSize || 0.1),
// getLineColor: d => colorRange[scale(d.properties.publications_total)],
getRadius: d => scale(d.properties.publications_total) * 10,
transitions: {
getRadius: {
type: 'spring',
......@@ -270,9 +292,9 @@ export default class App extends Component {
// getHeight: d => 1/d.quantile,
getSourcePosition: d => d.source,
getTargetPosition: d => d.target,
getSourceColor: d => colorRange[d.quantile],
getTargetColor: d => colorRange[d.quantile],
getWidth: d => d.quantile
getSourceColor: d => d.color,
getTargetColor: d => d.color,
getWidth: d => d.width
})
)
} else {
......@@ -286,7 +308,8 @@ export default class App extends Component {
extruded: true,
getPosition: d => d.properties.centroid,
getElevation: d => d.properties.publications_total,
getFillColor: d => colorRange[scale(d.properties.publications_total)],
getFillColor: d => getColor(scale(d.properties.publications_total)/colorRangeSize || 0.1),
// getFillColor: d => colorRange[scale(d.properties.publications_total)],
onClick: this.clickColumn,
onHover: this.hoverColumn,
pickable: true,
......
......@@ -221,8 +221,7 @@ class ArcsViewer extends Component {
handleKeyUp(event) {
if (event.keyCode === 13) {
let clickedItem = this.itemsList.current.childNodes[this.state.targetedItem];
const arc = this.state.shownItems[Number(clickedItem.dataset.listindex)];
this.sendData(arc);
this.sendData(Number(clickedItem.dataset.itemindex));
}
}
......@@ -250,8 +249,7 @@ class ArcsViewer extends Component {
onClickViewItem(event) {
const clickedItem = event.currentTarget;
const arc = this.state.shownItems[Number(clickedItem.dataset.listindex)];
this.sendData(arc);
this.sendData(Number(clickedItem.dataset.itemindex));
}
onMouseEnterFilterItem(event) {
......@@ -273,6 +271,7 @@ class ArcsViewer extends Component {
<li
key={"viewer-item" + index}
data-listindex={index}
data-itemindex={item["itemIndex"]}
onMouseEnter={this.onMouseEnterFilterItem}
onClick={this.onClickViewItem}
>
......
......@@ -145,6 +145,8 @@ class Converter:
affiliation_name = r["value"]
country_code = ""
location = []
# if affiliation_name == "Sternberg Astron. Inst.":
# print(r["record"])
if affiliation_name == "CERN":
location = [6.051404, 46.234169, 0]
country_code = "CH"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment