|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
input, |
|
svg { |
|
position: absolute; |
|
} |
|
|
|
input { |
|
background: transparent; |
|
border: none; |
|
margin: 10px 384px; |
|
width: 180px; |
|
font-size: 18px; |
|
padding: 6px; |
|
text-align: center; |
|
} |
|
|
|
rect { |
|
transition: fill 2s linear; |
|
fill: #ccc; |
|
shape-rendering: optimizeSpeed; |
|
stroke: none; |
|
} |
|
|
|
.leaf rect { |
|
fill: #f00; |
|
} |
|
|
|
.all rect { |
|
fill: #000; |
|
} |
|
|
|
</style> |
|
<input autofocus maxlength=5 placeholder="type a zipcode"> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script> |
|
|
|
var width = 960, |
|
height = 500; |
|
|
|
var projection = d3.geo.albersUsa() |
|
.scale(1000) |
|
.translate([width / 2, height / 2]); |
|
|
|
var usa = d3.select("body").insert("svg", "input") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.append('g'); |
|
|
|
var words = [ 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine' ]; |
|
|
|
function digitToWord(d,i){ |
|
return words[i]+'-'+words[+d] |
|
} |
|
|
|
d3.tsv("zipcodes.tsv", function(error, zipcodes) { |
|
|
|
// Compute projected locations of each zipcode. |
|
zipcodes.forEach(function(d) { |
|
var p = projection([+d.lon, +d.lat]); |
|
d.x = Math.round(p[0]), d.y = Math.round(p[1]); |
|
d.words = d.zip.split('').map(digitToWord); |
|
}); |
|
|
|
var nest = d3.nest() |
|
.key(function(d){ return d.words[0]; }) |
|
.key(function(d){ return d.words[1]; }) |
|
.key(function(d){ return d.words[2]; }) |
|
.key(function(d){ return d.words[3]; }) |
|
.key(function(d){ return d.words[4]; }) |
|
|
|
zipcodes = nest.entries(zipcodes) |
|
|
|
var zero = usa.selectAll('g') |
|
.data(zipcodes, function(d){ return d.key; }) |
|
.enter().append('g').attr('id',function(d){ return d.key; }); |
|
|
|
var one = zero.selectAll('g') |
|
.data(function(d) { return d.values }, function(d){ return d.key; }) |
|
.enter().append('g').attr('id',function(d){ return d.key; }); |
|
|
|
var two = one.selectAll('g') |
|
.data(function(d) { return d.values }, function(d){ return d.key; }) |
|
.enter().append('g').attr('id',function(d){ return d.key; }); |
|
|
|
var three = two.selectAll('g') |
|
.data(function(d) { return d.values }, function(d){ return d.key; }) |
|
.enter().append('g').attr('id',function(d){ return d.key; }); |
|
|
|
var four = three.selectAll('g') |
|
.data(function(d) { return d.values }, function(d){ return d.key; }) |
|
.enter().append('rect') |
|
.attr('id',function(d){ return d.values[0].words.join(' ') }) |
|
.attr('x',function(d){ return d.values[0].x; }) |
|
.attr('y',function(d){ return d.values[0].y; }) |
|
.attr('width',1) |
|
.attr('height',1); |
|
|
|
var input = d3.select("input") |
|
.on("cut", function() { setTimeout(change, 10); }) |
|
.on("paste", function() { setTimeout(change, 10); }) |
|
.on("change", change) |
|
.on("keyup", change); |
|
|
|
function change() { |
|
var zip = input.property("value"); |
|
var words = zip.split('').map(digitToWord); |
|
usa.classed('all',words.length == 0); |
|
d3.select('.leaf').classed('leaf',false); |
|
d3.select(words.map(function(d){ |
|
return '#'+d; |
|
}).join(' ')).classed('leaf',true); |
|
} |
|
|
|
change(); |
|
|
|
}); |
|
|
|
</script> |