Skip to content

Instantly share code, notes, and snippets.

@adamwd392

adamwd392/index.html

Last active December 16, 2015 23:28
Show Gist options
  • Save adamwd392/42311aeb0522aead42de to your computer and use it in GitHub Desktop.
Save adamwd392/42311aeb0522aead42de to your computer and use it in GitHub Desktop.
Download ZIP
Final Project v3
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;
}
#opts {
position: absolute;
top: 20px;
left: 20px;
}
#info {
position: absolute;
top: 20px;
right: 20px;
}
.legendLinear {
font: 9px sans-serif;
}
h3{
position: absolute;
font-size: 35px;
top: 40px;
}
</style>
<body>
<h3>Percentage of total traffic by county</h3>
<select id = "opts" onchange="loadData(this.value)">
<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 svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var info = d3.select("body").append("div")
.attr("id", "info");
var color = d3.scale.linear()
var base = "https://gist.githubusercontent.com/adamwd392/";
var gist = "87a399f9c6f847826b02";
var countyTrafficTotals = {"Allegany" : 0, "Anne Arundel": 0, "Baltimore": 0, "Baltimore City": 0, "Calvert": 0, "Caroline": 0, "Carroll": 0, "Cecil": 0, "Charles": 0, "Dorchester": 0, "Frederick": 0, "Garrett": 0, "Harford": 0, "Howard": 0, "Kent": 0, "Montgomery": 0, "Prince Georges": 0, "Queen Annes": 0, "St Marys": 0, "Somerset": 0, "Talbot": 0, "Washington": 0, "Wicomico": 0, "Worcester": 0 };
var percentCats = [
{color:'#DB7500',min:-1000,max:-60},
{color:'#FF931B',min:-60,max:-45},
{color:'#FFB058',min:-45,max:-30},
{color:'#FFC98D',min:-30,max:-15},
{color:'#FFDFB9',min:-15,max:0},
{color:'#AFD2EB',min:0,max:15},
{color:'#7FB7E3',min:15,max:30},
{color:'#4497D9',min:30,max:45},
{color:'#0072CE',min:45,max:60},
{color:'#004DBA',min:60,max:1000}
];
d3.json(base + gist + "/raw/cd4b15c6fd89e1273a6216c17ebe64d027cc5702/counties.json", function(error, countiesJson){
var center = d3.geo.centroid(countiesJson)
var scale = 150;
var offset = [width/2, height/2];
var projection = d3.geo.mercator().scale(scale).center(center)
.translate(offset);
// create the path
var path = d3.geo.path().projection(projection);
// using the path determine the bounds of the current map and use
// these to determine better values for the scale and translation
var bounds = path.bounds(countiesJson);
var hscale = scale*width / (bounds[1][0] - bounds[0][0]);
var vscale = scale*height / (bounds[1][1] - bounds[0][1]);
var scale = (hscale < vscale) ? hscale : vscale;
var offset = [width - (bounds[0][0] + bounds[1][0])/2,
height - (bounds[0][1] + bounds[1][1])/2];
center[0]=-77.3,center[1]=38.8;
// new projection
projection = d3.geo.mercator().center(center)
.scale(scale).translate(offset);
path = path.projection(projection);
svg.selectAll("path")
.data(countiesJson.geometries)
.enter()
.append("path")
.attr("d", path)
.style("stroke-width", "2")
.style("stroke", "black")
.on("mouseover", function(d) { var p = d.countyName; info.html(p + "<br>" + "Percentage of total traffic " + countyTrafficTotals[p].toFixed(2)+"%") });
});
function loadData(selectedValue) {
base = "https://gist.githubusercontent.com/pbogden/";
gist = "4acab6619282f5401844"
for (var key in countyTrafficTotals){
if(countyTrafficTotals.hasOwnProperty(key)){
countyTrafficTotals[key]=0;
}
}
d3.json(base + gist + "/raw/7fe253cd14602484104e0ee76e44cf712f82d206/data.json", function(error, trafficData){
currTotal=0;
// Iterates through traffic data file and adds up traffic counts for selection
for(var i = 0; i < trafficData.features.length; i++){
currCt=trafficData.features[i];
countyTrafficTotals[currCt.properties["COUNTY_DES"]]+=currCt.properties[selectedValue];
currTotal+=currCt.properties[selectedValue];
}
// Iterates through computed sums and converts to percentage out of 100%
for(var key in countyTrafficTotals){
if(countyTrafficTotals.hasOwnProperty(key)){
countyTrafficTotals[key]=(countyTrafficTotals[key]/currTotal)*100;
}
}
var min=0,max=0,x;
for (x in countyTrafficTotals){
if( countyTrafficTotals[x] < min) min = countyTrafficTotals[x];
if( countyTrafficTotals[x] > max) max = countyTrafficTotals[x];
}
color
.domain([min,(min+max)/2,max])
.range(["green","yellow","red"]);
svg.selectAll("path").transition()
.duration(2000)
.style("fill", function(d) {
return color(countyTrafficTotals[d.countyName])
});
});
}
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