Skip to content

Instantly share code, notes, and snippets.

@adamwd392

adamwd392/index.html

Last active December 3, 2015 02:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adamwd392/5b53edec6834d5a09167 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adamwd392/5b53edec6834d5a09167 to your computer and use it in GitHub Desktop.
Download ZIP
Final Project
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/pbogden/";
var gist = "1ba3d5e5ba44cceb37e5";
d3.json(base + gist + "/raw/counties.json", function(error, counties){
if (error) throw error;
features = topojson.feature(counties, counties.objects.tl_2015_us_county).features;
md = features.filter(function(d) { return d.properties.STATEFP == "24";});
svg.selectAll("path")
.data(md)
.enter()
.append("path")
.attr("d", path)
.on("mouseover", function(d) { var p = d.properties; info.html(p.NAMELSAD) });
});
function zoomMap() {
svg.attr("transform", "translate(" + zoom.translate() +")scale(" + zoom.scale() + ")");
}
/*function updateMap(dataSet) {
gist = "4acab6619282f5401844";
var scale = d3.scale.linear()
.range([0, 30000]);
d3.json(base + gist + "/raw/data.json", function(error, trafficData){
if (error) throw error;
trafficDataProperties = trafficData.features.properties;
svg.selectAll("path").transition()
.duration(2000)
.style("fill", function(d) {
return scale(trafficDataProperties.dataSet);
});
});
}*/
/*d3.select('#opts')
.on('change', function() {
var dataSet = d3.select(this).property('value');
dataSet.toString();
updateMap(dataSet);
});*/
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment