Skip to content

Instantly share code, notes, and snippets.

@vigorousnorth vigorousnorth/adaptive.js
Last active Aug 29, 2015

Embed
What would you like to do?
Adaptive D3 map and legend.

Adaptive D3 map with legend

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.

// 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
<!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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<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
You can’t perform that action at this time.