This D3 US map shows an animated route that helps visualize an item being shipped between two locations. This implementation borrows from http://bl.ocks.org/duopixel/4063326, http://www.tnoda.com/blog/2014-04-02, https://gist.github.com/michellechandra/0b2ce4923dc9b5809922 and https://bl.ocks.org/mbostock/4090848
Last active
April 13, 2023 14:10
-
-
Save venkat/e7b6e498ba87a2a6b7423ca7525773d6 to your computer and use it in GitHub Desktop.
US map shipping animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 | |
| height: 600 | |
| border: no |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <style> | |
| .states :hover { | |
| fill: red; | |
| } | |
| .state-borders { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 0.5px; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| pointer-events: none; | |
| } | |
| </style> | |
| <svg width="960" height="600"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v2.min.js"></script> | |
| <script> | |
| //Width and height of map | |
| var width = 960; | |
| var height = 500; | |
| var svg = d3.select("svg"); | |
| var projection = d3.geoAlbersUsa() | |
| .translate([width/2, height/2]) // translate to center of screen | |
| .scale([1000]); // scale things down so see entire US | |
| var path = d3.geoPath(projection); | |
| // points | |
| var origin = [-122.336422, 47.610902]; | |
| var destination = [-73.986740, 40.662688]; | |
| var us = d3.json("us-states.json", function(error, us) { | |
| if (error) throw error; | |
| svg.append("g") | |
| .attr("class", "states") | |
| .selectAll("path") | |
| .data(topojson.feature(us, us.objects.states).features) | |
| .enter().append("path") | |
| .attr("d", path); | |
| svg.append("path") | |
| .attr("class", "state-borders") | |
| .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))); | |
| // add circles to svg | |
| svg.selectAll("circle") | |
| .data([origin,destination]).enter() | |
| .append("circle") | |
| .attr("cx", function (d) { console.log(projection(d)); return projection(d)[0]; }) | |
| .attr("cy", function (d) { return projection(d)[1]; }) | |
| .attr("r", "8px") | |
| .attr("fill", "red"); | |
| var route = svg.append("path") | |
| .datum({type: "LineString", coordinates: [origin, destination]}) | |
| .attr("class", "route") | |
| .attr("d", path) | |
| .attr("stroke", "#d3d3d3") | |
| .attr("fill", "none"); | |
| var totalLength = route.node().getTotalLength(); | |
| route | |
| .attr("stroke-dasharray", totalLength + "," + totalLength) | |
| .attr("stroke-dashoffset", totalLength) | |
| .transition() | |
| .duration(2000) | |
| .ease(d3.easeCubic) | |
| .attr("stroke-dashoffset", totalLength*2) | |
| .transition() | |
| .duration(2000) | |
| .attr("stroke-dashoffset", totalLength*3); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment