Map scale and dimensions are expressed as functions of the bounding div's width, so that maps will be legible on mobile or desktop devices.
Last active
August 29, 2015 14:07
-
-
Save vigorousnorth/c8b2b5ea695f7bb69be8 to your computer and use it in GitHub Desktop.
Adaptive D3 map and legend.
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
| // Andr Aroo Cumb Frank Hancock Kenne Knox Linc Oxford Penob Pisca Sagada Somerse Waldo Washing York | |
| var data = [99.6, 87.2, 97.8, 70.7, 80.7, 99.1, 98.0, 99.4, 94.5, 88.7, 46.1, 91.9, 79.8, 86.7, 88.5, 98.8 ]; | |
| function pair(array) { | |
| return array.slice(1).map(function(b, i) { | |
| return [array[i], b]; | |
| }); | |
| } | |
| $(document).ready(function() { | |
| //Define svg width and height in terms of dimensions of the containing element | |
| var width = parseInt($("#boundingbox").width()), | |
| height = width*1.2; | |
| var fill = d3.scale.linear() | |
| .domain([0, 100]) | |
| .range(["white", "darkblue"]); | |
| var x1 = d3.scale.linear() | |
| .domain([0, 100]) | |
| // legend width is expressed in terms of the bounding box width | |
| .range([0,width/2.5]); | |
| var legendAxis = d3.svg.axis() | |
| .ticks(5) | |
| .scale(x1) | |
| .orient("bottom") | |
| .tickSize(22) | |
| .tickFormat(d3.format(".0f%")); | |
| // Scale is expressed in terms of svg width variable | |
| var scale = width * 12; | |
| var projection = d3.geo.conicConformal() | |
| .parallels([38 + 02 / 60, 39 + 12 / 60]) | |
| .rotate([70, 0]) | |
| .scale(scale) | |
| .translate([0, 0]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("#boundingbox").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| d3.json("mainecounties_topo.json", function(error, topo) { | |
| var state = topojson.feature(topo, topo.objects.states), | |
| statebounds = path.bounds(state), | |
| counties = topojson.feature(topo, topo.objects.counties); | |
| projection | |
| .translate([width * .55 - (statebounds[0][0] + statebounds[1][0]) * .55, height / 2 - (statebounds[0][1] + statebounds[1][1]) / 2]); | |
| var g = svg.append("g") | |
| .attr("class", "counties") | |
| .selectAll("path"); | |
| var counties = g.data(topojson.feature(topo, topo.objects.counties).features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr("class","county"); | |
| counties | |
| .style("fill", function(d,i) { return fill(data[i]); }) | |
| .attr("county", function(d) { | |
| return d.properties.name; | |
| }) | |
| // Build the legend | |
| var legend = svg.append('g') | |
| .attr("transform", "translate(" + width * .5 + "," + (height * .85) + ")") | |
| .attr('class','key'); | |
| legend.selectAll("rect") | |
| .data(pair(x1.ticks(20))) | |
| .enter().append("rect") | |
| .attr("height", 20) | |
| .attr("x", function(d) { return x1(d[0]); }) | |
| .attr("width", function(d) { return x1(d[1]) - x1(d[0]); }) | |
| .style("fill", function(d) { return fill(d[0]); }); | |
| legend.call(legendAxis).append("text") | |
| .attr("class", "caption") | |
| .attr("y", -10) | |
| .text("Percentage"); | |
| }); // end of d3.json function | |
| }); // end of document ready function |
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> | |
| <meta charset="utf-8"> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script src="adaptive.js"></script> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <body> | |
| Resize and refresh your browser to see map and legend scale in proportion to window size. | |
| <div id='boundingbox'> | |
| </div> | |
| </body> | |
| </html> |
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
| <style type="text/css"> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| #boundingbox {width: 60%; max-width: 800px; margin-left: auto; margin-right: auto; position: relative; border: 1px solid black} | |
| .county { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 0.75px; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| .key { | |
| font: 8px; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .key path { | |
| display: none; | |
| } | |
| .key line { | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment