This is the code for Chapter 7, Figure 7 from D3.js in Action which ties together several key d3.geo concepts such as drawing bounding boxes with d3.geo.bounds(), rendering points from CSV data, and extended projections from d3.geo.projection (not included in core D3).
Last active
March 18, 2016 03:30
-
-
Save emeeks/ba13dee1fb046a3bfd48 to your computer and use it in GitHub Desktop.
Ch. 7, Fig. 7 - D3.js in Action
This file contains 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
| label | population | country | x | y | |
|---|---|---|---|---|---|
| San Francisco | 750000 | USA | 37 | -122 | |
| Fresno | 500000 | USA | 36 | -119 | |
| Lahore | 12500000 | Pakistan | 31 | 74 | |
| Karachi | 13000000 | Pakistan | 24 | 67 | |
| Rome | 2500000 | Italy | 41 | 12 | |
| Naples | 1000000 | Italy | 40 | 14 | |
| Rio | 12300000 | Brazil | -22 | -43 | |
| Sao Paolo | 12300000 | Brazil | -23 | -46 |
This file contains 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
| <html> | |
| <head> | |
| <title>D3 in Action Chapter 7 - Example 2</title> | |
| <meta charset="utf-8" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="https://d3js.org/d3.geo.projection.v0.min.js" type="text/JavaScript"></script> | |
| <script src="https://d3js.org/queue.v1.min.js" type="text/JavaScript"></script> | |
| <script src="https://d3js.org/colorbrewer.v1.min.js" type="text/JavaScript"></script> | |
| </head> | |
| <style> | |
| svg { | |
| height: 500px; | |
| width: 500px; | |
| border: 1px solid gray; | |
| } | |
| .countries { | |
| fill: red; | |
| fill-opacity: .5; | |
| stroke: black; | |
| stroke-width: 1px; | |
| } | |
| </style> | |
| <body> | |
| <div id="viz"> | |
| <svg> | |
| </svg> | |
| </div> | |
| <div id="controls" /> | |
| </body> | |
| <footer> | |
| <script> | |
| queue() | |
| .defer(d3.json, "world.geojson") | |
| .defer(d3.csv, "cities.csv") | |
| .await(function(error, file1, file2) { createMap(file1, file2); }); | |
| function createMap(countries, cities) { | |
| width = 500; | |
| height = 500; | |
| projection = d3.geo.mollweide() | |
| .scale(120) | |
| .translate([width / 2, height / 2]) | |
| .center([20,0]) | |
| geoPath = d3.geo.path().projection(projection); | |
| featureSize = d3.extent(countries.features, function(d) {return geoPath.area(d)}); | |
| countryColor = d3.scale.quantize().domain(featureSize).range(colorbrewer.Reds[7]); | |
| d3.select("svg").selectAll("path").data(countries.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", geoPath) | |
| .style("fill", function(d) {return countryColor(geoPath.area(d))}) | |
| .style("stroke-width", 1) | |
| .style("stroke", "black") | |
| .style("opacity", .5) | |
| .on("mouseover", centerBounds) | |
| .on("mouseout", clearCenterBounds) | |
| d3.select("svg").selectAll("circle").data(cities) | |
| .enter() | |
| .append("circle") | |
| .style("fill", "black") | |
| .style("stroke", "white") | |
| .style("stroke-width", 1) | |
| .attr("r", 3) | |
| .attr("cx", function(d) {return projection([d.y,d.x])[0]}) | |
| .attr("cy", function(d) {return projection([d.y,d.x])[1]}) | |
| function centerBounds(d,i) { | |
| thisBounds = geoPath.bounds(d); | |
| thisCenter = geoPath.centroid(d); | |
| d3.select("svg") | |
| .append("rect") | |
| .attr("class", "bbox") | |
| .attr("x", thisBounds[0][0]) | |
| .attr("y", thisBounds[0][1]) | |
| .attr("width", thisBounds[1][0] - thisBounds[0][0]) | |
| .attr("height", thisBounds[1][1] - thisBounds[0][1]) | |
| .style("fill", "none") | |
| .style("stroke-dasharray", "5 5") | |
| .style("stroke", "black") | |
| .style("stroke-width", 2) | |
| .style("pointer-events", "none") | |
| d3.select("svg") | |
| .append("circle") | |
| .attr("class", "centroid") | |
| .attr("r", 5) | |
| .attr("cx", thisCenter[0]).attr("cy", thisCenter[1]) | |
| .style("pointer-events", "none") | |
| } | |
| function clearCenterBounds() { | |
| d3.selectAll("circle.centroid").remove(); | |
| d3.selectAll("rect.bbox").remove(); | |
| } | |
| } | |
| </script> | |
| </footer> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment