The most basic map using d3js v4.0. Just to learn a little about using the new version...
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .states { | |
| fill: #ccc; | |
| stroke: #fff; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3-array.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-geo.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-selection.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-collection.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-dispatch.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-request.v1.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var projection = d3.geoAlbersUsa(); | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("us.json", function(error, us) { | |
| svg.append("path") | |
| .attr("class", "states") | |
| .datum(topojson.feature(us, us.objects.states)) | |
| .attr("d", path); | |
| }); | |
| </script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment