├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
├── index.html
└── manifest.json
├── src
├── Main.js
├── city-settings.json
├── controls.js
├── graph-layer
│ ├── constants.js
│ ├── edge-attributes-transform.js
│ ├── edge-layer.js
│ ├── graph-layer.js
│ ├── node-attributes-transform.js
│ ├── shortest-path-transform.js
│ └── utils.js
├── index.css
├── index.js
├── load-data.js
├── map.js
└── old
│ ├── binary-heap.js
│ └── compute-graph.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | build/
2 | dist/
3 | node_modules/
4 | coverage/
5 | test/
6 | data/
7 | TODO
8 |
9 | */**/yarn.lock
10 | yarn-error.log
11 | package-lock.json
12 |
13 | .vscode/
14 | .project
15 | .idea
16 | .DS_Store
17 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Isochronic Map (GPU Version)
2 |
3 | [Demo](http://pessimistress.github.io/isochronic-map/)
4 |
5 | ## Run app locally
6 |
7 | ```bash
8 | yarn
9 | yarn start
10 | ```
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vis-hackathon",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "baseui": "^7.4.1",
7 | "deck.gl": "^7.2.0-alpha.4",
8 | "react": "^16.8.6",
9 | "react-dom": "^16.8.6",
10 | "react-scripts": "3.0.1",
11 | "styletron-engine-atomic": "^1.3.0",
12 | "styletron-react": "^5.1.3"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject"
19 | },
20 | "eslintConfig": {
21 | "extends": "react-app"
22 | },
23 | "browserslist": {
24 | "production": [
25 | ">0.2%",
26 | "not dead",
27 | "not op_mini all"
28 | ],
29 | "development": [
30 | "last 1 chrome version",
31 | "last 1 firefox version",
32 | "last 1 safari version"
33 | ]
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pessimistress/isochronic-map-gpu/98a009a3423664331edb1dd748c07887c58fb67d/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
22 | React App
23 |
24 |
25 |
26 |
27 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/Main.js:
--------------------------------------------------------------------------------
1 | import React, {useState, useEffect} from "react";
2 | import {Client as Styletron} from 'styletron-engine-atomic';
3 | import {Provider as StyletronProvider} from 'styletron-react';
4 | import {LightTheme, BaseProvider} from 'baseui';
5 | import {Spinner} from 'baseui/spinner';
6 | import citySettings from "./city-settings.json";
7 | import Controls from "./controls";
8 | import Map from "./map";
9 | import loadData from './load-data';
10 |
11 | const engine = new Styletron();
12 |
13 | const initialState = {
14 | graph: {},
15 | city: "san-francisco",
16 | ...citySettings["san-francisco"],
17 | hour: 0,
18 | mapType: 1,
19 | loaded: false
20 | };
21 |
22 | function App() {
23 | const [data, setData] = useState(initialState);
24 | const loadCity = async city => {
25 | try {
26 | const graph = await loadData(city);
27 | setData(state => ({...state, graph, loaded: true}));
28 | } catch (e) {
29 | console.error(e);
30 | }
31 | };
32 | useEffect(() => {
33 | if (!data.loaded) {
34 | loadCity(data.city);
35 | }
36 | });
37 | const setCity = city => {
38 | setData(state => ({
39 | ...state,
40 | city,
41 | ...citySettings[city],
42 | loaded: false
43 | }));
44 | };
45 | const setHour = hour => {
46 | setData(state => ({...state, hour}));
47 | };
48 | const setMapType = mapType => {
49 | setData(state => ({...state, mapType}));
50 | };
51 | const setSourceIndex = sourceIndex => {
52 | setData(state => ({...state, sourceIndex}));
53 | };
54 | const setViewState = viewState => {
55 | setData(state => ({...state, viewState}));
56 | };
57 |
58 | return (
59 |
60 |
61 |
62 |
70 |
71 | {data.loaded ? (
72 |
81 | ) : (
82 |
83 | )}
84 |
7 | {
12 | setViewState(viewState)
13 | }}
14 | style={{
15 | left: '280px',
16 | width: 'calc(100vw - 280px)'
17 | }}
18 | layers={[
19 | new GraphLayer({
20 | data: graph,
21 | sourceIndex,
22 | onClick: ({index}) => {
23 | setSourceIndex(index);
24 | },
25 | getNodePosition: d => [d.lon, d.lat],
26 | getNodeIndex: (d, {index}) => index,
27 | getEdgeSource: d => d.start,
28 | getEdgeTarget: d => d.end,
29 | getEdgeValue: d => [
30 | d.times_by_hour[hour] || 1e6,
31 | d.distance,
32 | 1
33 | ],
34 |
35 | mode,
36 |
37 | transition: true,
38 |
39 | updateTriggers: {
40 | getEdgeValue: hour
41 | }
42 | })
43 | ]}
44 | />
45 |
46 | );
47 |
48 | export default Map;
49 |
--------------------------------------------------------------------------------
/src/old/binary-heap.js:
--------------------------------------------------------------------------------
1 | class BinaryHeap {
2 | constructor(scoreFunction = n => n) {
3 | this.content = [];
4 | this.scoreFunction = scoreFunction;
5 | }
6 |
7 | bubbleUp = N => {
8 | // Fetch the element that has to be moved.
9 | const element = this.content[N];
10 | const score = this.scoreFunction(element);
11 | let n = N;
12 | // When at 0, an element can not go up any further.
13 | while (n > 0) {
14 | // Compute the parent element's index, and fetch it.
15 | const parentN = Math.floor((n + 1) / 2) - 1;
16 | const parent = this.content[parentN];
17 | // If the parent has a lesser score, things are in order and we
18 | // are done.
19 | if (score < this.scoreFunction(parent)) {
20 | // Otherwise, swap the parent with the current element and
21 | // continue.
22 | this.content[parentN] = element;
23 | this.content[n] = parent;
24 | n = parentN;
25 | } else {
26 | // exit the loop;
27 | n = 0;
28 | }
29 | }
30 | }
31 |
32 | sinkDown = N =>{
33 | // Look up the target element and its score.
34 | const length = this.content.length;
35 | const element = this.content[N];
36 | const elemScore = this.scoreFunction(element);
37 | let swap = element;
38 | let n = N;
39 | while(swap) {
40 | // Compute the indices of the child elements.
41 | const child2N = (n + 1) * 2;
42 | const child1N = child2N - 1;
43 | // This is used to store the new position of the element,
44 | // if any.
45 | swap = null;
46 | // If the first child exists (is inside the array)...
47 | let child1Score;
48 | if (child1N < length) {
49 | // Look it up and compute its score.
50 | const child1 = this.content[child1N],
51 | child1Score = this.scoreFunction(child1);
52 | // If the score is less than our element's, we need to swap.
53 | if (child1Score < elemScore)
54 | swap = child1N;
55 | }
56 | // Do the same checks for the other child.
57 | if (child2N < length) {
58 | const child2 = this.content[child2N],
59 | child2Score = this.scoreFunction(child2);
60 | if (child2Score < (swap === null ? elemScore : child1Score))
61 | swap = child2N;
62 | }
63 |
64 | // if there is a swappable element
65 | if (swap) {
66 | // swap and continue.
67 | this.content[n] = this.content[swap];
68 | this.content[swap] = element;
69 | n = swap;
70 | }
71 | // else we'll exit the loop.
72 | }
73 | };
74 | size = () => this.content.length;
75 | push = element => {
76 | this.content.push(element);
77 | this.bubbleUp(this.content.length - 1);
78 | };
79 | pop = () => {
80 | // Store the first element so we can return it later.
81 | const result = this.content[0];
82 | // Get the element at the end of the array.
83 | const end = this.content.pop();
84 | // If there are any elements left, put the end element at the
85 | // start, and let it sink down.
86 | if (this.content.length > 0) {
87 | this.content[0] = end;
88 | this.sinkDown(0);
89 | }
90 | return result;
91 | };
92 | remove = value => {
93 | const length = this.content.length;
94 | const i = this.content.indexOf(value);
95 | const end = this.content.pop();
96 | if (i !== length - 1) {
97 | this.content[i] = end;
98 | this.bubbleUp(i);
99 | this.sinkDown(i);
100 | }
101 | }
102 | }
103 |
104 | export default BinaryHeap;
105 |
--------------------------------------------------------------------------------
/src/old/compute-graph.js:
--------------------------------------------------------------------------------
1 | import BinaryHeap from "./binary-heap";
2 |
3 | const R = 6371e3; // metres
4 | const k = 0.44704 * 30;
5 |
6 | export function computeGraph({hour, startNode, edges, nodes}) {
7 | const nodeHash = nodes.reduce((prev, curr, idx) => {
8 | const {id, lat, lon} = curr;
9 | prev[id] = {
10 | idx,
11 | lat: Number(lat),
12 | lon: Number(lon),
13 | timeToReach: Infinity,
14 | neighbors: []
15 | };
16 | return prev;
17 | }, {});
18 |
19 | const segmentLookup = Object.values(edges).reduce((prev, curr) => {
20 | const {start_junction_id, end_junction_id, hours} = curr;
21 | if (hours[hour]) {
22 | if (!prev[start_junction_id]) {
23 | addAngle(start_junction_id, nodeHash, startNode);
24 | prev[start_junction_id] = {};
25 | }
26 | addAngle(end_junction_id, nodeHash, startNode);
27 | nodeHash[start_junction_id].neighbors.push(end_junction_id);
28 | prev[start_junction_id][end_junction_id] = {...hours[hour]};
29 | }
30 | return prev;
31 | }, {});
32 |
33 | const Queue = new BinaryHeap(node => nodeHash[node].timeToReach);
34 |
35 | nodes.forEach(n => {
36 | nodeHash[n.id].timeToReach = n.id === startNode ? 0 : Infinity;
37 | Queue.push(n.id);
38 | });
39 |
40 | while (Queue.size()) {
41 | const current = Queue.pop();
42 | const timeCurrent = nodeHash[current].timeToReach;
43 | if (timeCurrent !== Infinity) {
44 | nodeHash[current].neighbors.forEach(neighbor => {
45 | const segment = segmentLookup[current][neighbor];
46 | const timeSegment = segment.time;
47 | const tentativeTimeToReach = timeCurrent + timeSegment;
48 | if (tentativeTimeToReach < nodeHash[neighbor].timeToReach) {
49 | Queue.remove(neighbor);
50 | nodeHash[neighbor].timeToReach = tentativeTimeToReach;
51 | Queue.push(neighbor);
52 | }
53 | });
54 | }
55 | }
56 |
57 | nodes.forEach(n => {
58 | const node = nodeHash[n.id];
59 | if (node.timeToReach < Infinity) {
60 | node.position = destination(
61 | nodeHash[startNode],
62 | node.bearing,
63 | k * node.timeToReach
64 | )
65 | }
66 | });
67 | return {nodes, segmentLookup};
68 | }
69 |
70 | function toRadians(deg) {
71 | return (deg * Math.PI) / 180;
72 | }
73 | function toDegrees(rad) {
74 | return (rad * 180) / Math.PI;
75 | }
76 | function addAngle(nodeId, hash, startNode) {
77 | const bearing = getBearing(hash[startNode], hash[nodeId]);
78 | hash[nodeId].bearing = bearing;
79 | }
80 |
81 | function getBearing(a, b) {
82 | const λ1 = toRadians(a.lon);
83 | const λ2 = toRadians(b.lon);
84 | const φ1 = toRadians(a.lat);
85 | const φ2 = toRadians(b.lat);
86 | const y = Math.sin(λ2 - λ1) * Math.cos(φ2);
87 | const x =
88 | Math.cos(φ1) * Math.sin(φ2) -
89 | Math.sin(φ1) * Math.cos(φ2) * Math.cos(λ2 - λ1);
90 | return Math.atan2(y, x);
91 | }
92 |
93 | function destination(source, bearing, distance) {
94 | const lat = toRadians(source.lat);
95 | const lon = toRadians(source.lon);
96 |
97 | const destLat = Math.asin(
98 | Math.sin(lat) * Math.cos(distance / R) +
99 | Math.cos(lat) * Math.sin(distance / R) * Math.cos(bearing)
100 | );
101 | const destLon =
102 | lon +
103 | Math.atan2(
104 | Math.sin(bearing) * Math.sin(distance / R) * Math.cos(lat),
105 | Math.cos(distance / R) - Math.sin(lat) * Math.sin(destLat)
106 | );
107 | return {lat: toDegrees(destLat), lon: toDegrees(destLon)};
108 | }
109 |
--------------------------------------------------------------------------------