Skip to content

Instantly share code, notes, and snippets.

@milafrerichs

milafrerichs/index.html

Created August 8, 2017 17:44
Show Gist options
  • Save milafrerichs/450ee4c40c157f9b220b32d1227a7125 to your computer and use it in GitHub Desktop.
Save milafrerichs/450ee4c40c157f9b220b32d1227a7125 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Ward 18 buildings year built // source http://jsbin.com/qanahil
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ward 18 buildings year built">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
path
fill: #ccc
</style>
</head>
<body>
<div id="map" style="width: 600px; height: 600px;">
<svg width="600" height="600">
<g class="background"></g>
<g class="overlay"></g>
</svg>
</div>
<script id="jsbin-javascript">
var projection = d3.geoAlbers();
var geoGenerator = d3.geoPath()
.projection(projection);
var map = d3.select('#map g.background');
var overlay = d3.select('#map g.overlay');
var q = d3.queue();
q.defer(d3.json,'https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/boston.geojson');
q.defer(d3.json,'https://gist.githubusercontent.com/milafrerichs/65d46d3815be79faed5a2b7f4976ad51/raw/41c6c6cd7bf37e8539bab1d843b73b80de4e852c/ward_18.geojson')
.awaitAll(function(error, results) {
boston = results[0];
buildings = results[1];
projection
.fitExtent([[20, 20], [600, 600]], buildings)
u = map.selectAll('path')
.data(boston.features);
u.enter()
.append('path')
.attr('d', geoGenerator)
.attr('fill', '#fff')
.attr('stroke', '#fff')
;
extent = d3.extent(buildings.features, function(d) { return d.properties.YR_BUILT;});
//scale = d3.scaleLinear().domain(extent).range(['red', 'yellow'])//tcol.interpolate(d3.interpolateHcl);
//scale = d3.scaleOrdinal().domain(extent).range(['#feedde','#fdd0a2','#fdae6b','#fd8d3c','#e6550d','#a63603'])
scale = d3.scaleOrdinal().domain(extent).range(['#eff3ff','#c6dbef','#9ecae1','#6baed6','#3182bd','#08519c'])
overlay.selectAll('path').data(buildings.features)
.enter()
.append("path")
.attr('d', geoGenerator)
.style("fill", function(d) {
return scale(d.properties.YR_BUILT)
})
.style("opacity", 0.75);
})
</script>
<script id="jsbin-source-css" type="text/css">path
fill: #ccc</script>
<script id="jsbin-source-javascript" type="text/javascript">var projection = d3.geoAlbers();
var geoGenerator = d3.geoPath()
.projection(projection);
var map = d3.select('#map g.background');
var overlay = d3.select('#map g.overlay');
var q = d3.queue();
q.defer(d3.json,'https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/boston.geojson');
q.defer(d3.json,'https://gist.githubusercontent.com/milafrerichs/65d46d3815be79faed5a2b7f4976ad51/raw/41c6c6cd7bf37e8539bab1d843b73b80de4e852c/ward_18.geojson')
.awaitAll(function(error, results) {
boston = results[0];
buildings = results[1];
projection
.fitExtent([[20, 20], [600, 600]], buildings)
u = map.selectAll('path')
.data(boston.features);
u.enter()
.append('path')
.attr('d', geoGenerator)
.attr('fill', '#fff')
.attr('stroke', '#fff')
;
extent = d3.extent(buildings.features, function(d) { return d.properties.YR_BUILT;});
//scale = d3.scaleLinear().domain(extent).range(['red', 'yellow'])//tcol.interpolate(d3.interpolateHcl);
//scale = d3.scaleOrdinal().domain(extent).range(['#feedde','#fdd0a2','#fdae6b','#fd8d3c','#e6550d','#a63603'])
scale = d3.scaleOrdinal().domain(extent).range(['#eff3ff','#c6dbef','#9ecae1','#6baed6','#3182bd','#08519c'])
overlay.selectAll('path').data(buildings.features)
.enter()
.append("path")
.attr('d', geoGenerator)
.style("fill", function(d) {
return scale(d.properties.YR_BUILT)
})
.style("opacity", 0.75);
})</script></body>
</html>
Raw
jsbin.qanahil.js
var projection = d3.geoAlbers();
var geoGenerator = d3.geoPath()
.projection(projection);
var map = d3.select('#map g.background');
var overlay = d3.select('#map g.overlay');
var q = d3.queue();
q.defer(d3.json,'https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/boston.geojson');
q.defer(d3.json,'https://gist.githubusercontent.com/milafrerichs/65d46d3815be79faed5a2b7f4976ad51/raw/41c6c6cd7bf37e8539bab1d843b73b80de4e852c/ward_18.geojson')
.awaitAll(function(error, results) {
boston = results[0];
buildings = results[1];
projection
.fitExtent([[20, 20], [600, 600]], buildings)
u = map.selectAll('path')
.data(boston.features);
u.enter()
.append('path')
.attr('d', geoGenerator)
.attr('fill', '#fff')
.attr('stroke', '#fff')
;
extent = d3.extent(buildings.features, function(d) { return d.properties.YR_BUILT;});
//scale = d3.scaleLinear().domain(extent).range(['red', 'yellow'])//tcol.interpolate(d3.interpolateHcl);
//scale = d3.scaleOrdinal().domain(extent).range(['#feedde','#fdd0a2','#fdae6b','#fd8d3c','#e6550d','#a63603'])
scale = d3.scaleOrdinal().domain(extent).range(['#eff3ff','#c6dbef','#9ecae1','#6baed6','#3182bd','#08519c'])
overlay.selectAll('path').data(buildings.features)
.enter()
.append("path")
.attr('d', geoGenerator)
.style("fill", function(d) {
return scale(d.properties.YR_BUILT)
})
.style("opacity", 0.75);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment