Skip to content

Instantly share code, notes, and snippets.

@adamwd392

adamwd392/index.html

Last active December 9, 2015 17:48
Show Gist options
  • Save adamwd392/250eda46ed524d5776f7 to your computer and use it in GitHub Desktop.
Save adamwd392/250eda46ed524d5776f7 to your computer and use it in GitHub Desktop.
Download ZIP
final2
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>hmda</title>
<style>
body {
font: 20px sans-serif;
}
path {
fill: none;
stroke: #000;
stroke-width: 0.5;
shape-rendering: crispEdges;
}
#info {
position: absolute;
top: 20px;
right: 20px;
}
.legendLinear {
font: 9px sans-serif;
}
</style>
<body>
<select id = "opts">
<option value="AADT_2004" selected="selected">AADT-2004</option>
<option value="AADT_2005">AADT-2005</option>
<option value="AADT_2006">AADT-2006</option>
<option value="AADT_2007">AADT-2007</option>
<option value="AADT_2008">AADT-2008</option>
<option value="AADT_2009">AADT-2009</option>
<option value="AADT_2010">AADT-2010</option>
<option value="AADT_2011">AADT-2011</option>
<option value="AADT_2012">AADT-2012</option>
<option value="AADT_2013">AADT-2013</option>
<option value="AADT_2014">AADT-2014</option>
<option value="AAWDT_2004">AAWDT-2004</option>
<option value="AAWDT_2005">AAWDT-2005</option>
<option value="AAWDT_2006">AAWDT-2006</option>
<option value="AAWDT_2007">AAWDT-2007</option>
<option value="AAWDT_2008">AAWDT-2008</option>
<option value="AAWDT_2009">AAWDT-2009</option>
<option value="AAWDT_2010">AAWDT-2010</option>
<option value="AAWDT_2011">AAWDT-2011</option>
<option value="AAWDT_2012">AAWDT-2012</option>
<option value="AAWDT_2013">AAWDT-2013</option>
<option value="AAWDT_2014">AAWDT-2014</option>
</select>
<div id="info"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.4.0/d3-legend.min.js"></script>
<script>
var width = 960, height = 800;
var zoom = d3.behavior.zoom()
.scale(1)
.scaleExtent([1, 10])
.on("zoom", zoomMap)
var path = d3.geo.path()
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom)
.append("g");
var info = d3.select("body").append("div")
.attr("id", "info");
var base = "https://gist.githubusercontent.com/adamwd392/";
var gist = "87a399f9c6f847826b02";
d3.json(base + gist + "/raw/5d3b27d1acb1c03a3f831673bdac0388306d3d11/counties.json", function(error, counties){
if (error) throw error;
svg.selectAll("path")
.data(counties.geometries)
.enter()
.append("path")
.attr("d", path);
});
function zoomMap() {
svg.attr("transform", "translate(" + zoom.translate() +")scale(" + zoom.scale() + ")");
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment