Commit 7a14bc18c2613eec116e95b5ded85d95cf0074a5
1 parent
561e9392
Exists in
master
chore: refactor world plot
Showing
1 changed file
with
93 additions
and
0 deletions
Show diff stats
| @@ -0,0 +1,93 @@ | @@ -0,0 +1,93 @@ | ||
| 1 | +/** | ||
| 2 | + * Draws a SVG in the DOM element identified by `containerSelector`. | ||
| 3 | + * | ||
| 4 | + * Issues | ||
| 5 | + * ------ | ||
| 6 | + * | ||
| 7 | + * - No Zoom (spent 4h on this already) | ||
| 8 | + * - No animations (wait 'til it's polished) | ||
| 9 | + * | ||
| 10 | + * @param containerSelector string | ||
| 11 | + * CSS selector, like "#d3viz" | ||
| 12 | + * @param worldDataUrl | ||
| 13 | + * A JSON file with reusable world data. | ||
| 14 | + * @see /static/public/data/world-earth.geojson | ||
| 15 | + * @param travelsDataUrl | ||
| 16 | + * A CSV file with rows of | ||
| 17 | + * - origin_lon | ||
| 18 | + * - origin_lat | ||
| 19 | + * - destination_lon | ||
| 20 | + * - destination_lat | ||
| 21 | + */ | ||
| 22 | +function draw_travel_legs_worldmap(containerSelector, worldDataUrl, travelsDataUrl) { | ||
| 23 | + | ||
| 24 | + document.addEventListener('DOMContentLoaded', () => { | ||
| 25 | + const margin = {top: 0, right: 0, bottom: 0, left: 0}; | ||
| 26 | + // var width = $(containerSelector).parent().width(); | ||
| 27 | + // var height = width - margin.top - margin.bottom; | ||
| 28 | + // let width = width - margin.left - margin.right; | ||
| 29 | + //{#var height = Math.max(300, 600) - margin.top - margin.bottom;#} | ||
| 30 | + //{#var width = Math.max(880, $(containerSelector).parent().width());#} | ||
| 31 | + | ||
| 32 | + const size_ratio = 0.85; | ||
| 33 | + let width = 629.0 * size_ratio; | ||
| 34 | + let height = 604.0 * size_ratio; | ||
| 35 | + //{#width = 500.0;#} | ||
| 36 | + //{#height = 400.0;#} | ||
| 37 | + | ||
| 38 | + let offset_x = 0.0; | ||
| 39 | + let offset_y = 0.0; | ||
| 40 | + | ||
| 41 | + const svg = d3.select(containerSelector) | ||
| 42 | + .append("svg") | ||
| 43 | + .attr("width", width + margin.left + margin.right) | ||
| 44 | + .attr("height", height + margin.top + margin.bottom); | ||
| 45 | + | ||
| 46 | + const projection = d3.geoMercator() | ||
| 47 | + .scale(85) | ||
| 48 | + .translate([width / 2.0 + offset_x, height / 2.0 + offset_y]); | ||
| 49 | + | ||
| 50 | + const geopath = d3.geoPath().projection(projection); | ||
| 51 | + | ||
| 52 | + function draw_from_data(worldData, legsData) { | ||
| 53 | + const link = []; | ||
| 54 | + legsData.forEach(function (row) { | ||
| 55 | + source = [+row.origin_lon, +row.origin_lat]; | ||
| 56 | + target = [+row.destination_lon, +row.destination_lat]; | ||
| 57 | + topush = {type: "LineString", coordinates: [source, target]}; | ||
| 58 | + link.push(topush); | ||
| 59 | + }); | ||
| 60 | + | ||
| 61 | + svg.append("g") | ||
| 62 | + .selectAll("path") | ||
| 63 | + .data(worldData.features) | ||
| 64 | + .enter() | ||
| 65 | + .append("path") | ||
| 66 | + .attr("fill", "#b8b8b8") | ||
| 67 | + .attr("d", geopath) | ||
| 68 | + .style("stroke", "#fff") | ||
| 69 | + .style("stroke-width", 0); | ||
| 70 | + | ||
| 71 | + svg.selectAll("myPath") | ||
| 72 | + .data(link) | ||
| 73 | + .enter() | ||
| 74 | + .append("path") | ||
| 75 | + .attr("d", geopath) | ||
| 76 | + // .attr("d", function (d) { | ||
| 77 | + // return geopath(d); | ||
| 78 | + // }) | ||
| 79 | + .style("fill", "none") | ||
| 80 | + .style("stroke", "#69b3a2") | ||
| 81 | + .style("stroke-width", 2); | ||
| 82 | + | ||
| 83 | + } | ||
| 84 | + | ||
| 85 | + const worldDataPromise = d3.json(worldDataUrl); | ||
| 86 | + const travelsDataPromise = d3.csv(travelsDataUrl); | ||
| 87 | + Promise.all([worldDataPromise, travelsDataPromise]).then((values) => { | ||
| 88 | + draw_from_data(values[0], values[1]); | ||
| 89 | + }); | ||
| 90 | + | ||
| 91 | + }); | ||
| 92 | + | ||
| 93 | +} | ||
| 0 | \ No newline at end of file | 94 | \ No newline at end of file |