|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<title>hmda</title> |
|
<style> |
|
|
|
body { |
|
font: 20px sans-serif; |
|
} |
|
|
|
path { |
|
fill: none; |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
#info { |
|
position: absolute; |
|
top: 20px; |
|
left: 20px; |
|
} |
|
|
|
</style> |
|
<body> |
|
<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> |
|
|
|
var width = 960, height = 500; |
|
|
|
var states = { 01: "AL", 02: "AK", 04: "AZ", 05: "AR", 06: "CA", 08: "CO", |
|
09: "CT", 10: "DE", 11: "DC", 12: "FL", 13: "GA", 15: "HI", |
|
16: "ID", 17: "IL", 18: "IN", 19: "IA", 20: "KS", 21: "KY", |
|
22: "LA", 23: "ME", 24: "MD", 25: "MA", 26: "MI", 27: "MN", |
|
28: "MS", 29: "MO", 30: "MT", 31: "NE", 32: "NV", 33: "NH", |
|
34: "NJ", 35: "NM", 36: "NY", 37: "NC", 38: "ND", 39: "OH", |
|
40: "OK", 41: "OR", 42: "PA", 44: "RI", 45: "SC", 46: "SD", |
|
47: "TN", 48: "TX", 49: "UT", 50: "VT", 51: "VA", 53: "WA", |
|
54: "WV", 55: "WI", 56: "WY" }; |
|
|
|
var path = d3.geo.path(); |
|
|
|
var info = d3.select("body").append("div") |
|
.attr("id", "info"); |
|
|
|
var color = d3.scale.linear() |
|
.range(["steelblue", "crimson"]); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
d3.json("https://gist.githubusercontent.com/pbogden/1ba3d5e5ba44cceb37e5/raw/counties.json", function(error, counties) { |
|
if (error) throw error; |
|
|
|
features = topojson.feature(counties, counties.objects.tl_2015_us_county).features; |
|
|
|
svg.selectAll("path") |
|
.data(features) |
|
.enter() |
|
.append("path") |
|
.attr("d", path) |
|
.on("mouseover", function(d) { var p = d.properties; info.html(states[+ p.STATEFP] + "<br>" + p.NAMELSAD) }); |
|
|
|
d3.csv("data.csv", function(error, csv) { |
|
if (error) throw error; |
|
|
|
csv.forEach(function(d, i) { if (i > 3) return; console.log("i, csv[i]", i, d); }); |
|
|
|
color.domain(d3.extent(csv, function(d) { return d.loans; })); |
|
|
|
svg.selectAll("path") |
|
.style("fill", function(d) { |
|
var state = states[+ d.properties.STATEFP]; |
|
var county = d.properties.NAMELSAD; |
|
var row = csv.filter(function(d) { return d.county == county && d.state == state; }); |
|
|
|
return (row.length == 0) ? null : color(row[0].loans); |
|
}); |
|
}); |
|
}); |
|
|
|
</script> |
