Skip to content

Instantly share code, notes, and snippets.

@zhik
Created October 8, 2019 01:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zhik/5e9d2c28113d29cfcd27e31ad122c576 to your computer and use it in GitHub Desktop.
Save zhik/5e9d2c28113d29cfcd27e31ad122c576 to your computer and use it in GitHub Desktop.
citysdk geojson with d3.js
<html>
<head>
</head>
<body>
<svg id="map"></svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>
<script src="https://uscensusbureau.github.io/citysdk/assets/citysdk.js"></script>
<script>
function censusPromise(args) {
return new Promise((resolve, reject) => {
census(args, (err, json) => {
if (!err) {
resolve(json);
} else {
reject(err);
}
});
});
}
const margin = 5,
width = 800 - margin,
height = 600 - margin;
const map = d3.select('svg')
.attr('width', width)
.attr('height', height);
const projection = d3.geoAlbersUsa().scale(width).translate([width / 2, height / 2])
const path = d3.geoPath(projection);
censusPromise({
vintage: 2017,
geoHierarchy: {
county: "*"
},
sourcePath: ["acs", "acs5"],
values: ["B17001_001E", "B17001_002E"],
geoResolution: '20m'
}).then(data => {
//generate color
const extent = d3.extent(data.features.map(d => d.properties['B17001_002E'] / d.properties[
'B17001_001E']));
const colorScale = d3.scaleQuantile()
.domain(extent)
.range(d3.schemeBlues[7]);
map.append("g")
.selectAll('path')
.data(data.features)
.enter().append('path')
.attr('d', path)
.attr("fill", d => {
return colorScale(d.properties['B17001_002E'] / d.properties['B17001_001E']);
})
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment