The avatar for @rahulbot
Rahul Bhargava
Public
Edited
Dec 5
Fork of Making a County Map
2
Insert cell
Insert cell
Insert cell
selectedCountry = 'ZMB';
Insert cell
// we use the color-legend from https://observablehq.com/@d3/color-legend to render our scale
legend({color: populationColor, width: width - 20, tickFormat: ",d", ticks: 7})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
us = d3.json("https://unpkg.com/us-atlas@3/counties-10m.json")
Insert cell
Insert cell
countyShapes = topojson.feature(us, us.objects.counties)//.features
Insert cell
Insert cell
county-populaton-data-tidy@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
populationData = countyPopulatonDataTidy.filter(r => r.team == selectedCountry).map(r => ({
'fips': r.county.toString(),
'pop': r.pop}))
Insert cell
populationByCounty = {
let lookup = new Map();
populationData.forEach(r => {
lookup.set((r.fips.length == 4) ? '0'+r.fips : r.fips, r.pop);
});
return lookup;
}
Insert cell
// The smallest and biggest populations give us the "domain" for our color scale
populationExtent = d3.extent(populationData, d=> +d.pop)
Insert cell
// We use a log color scale
populationColor = d3.scaleSequentialSqrt(populationExtent, d3.interpolateBlues)
Insert cell
// This is how we format the numbers to use commas.
populationFormat = d3.format(",d")
Insert cell
Insert cell
statesByFips = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
Insert cell
// The borders of the states are merged so we can render a single line where they would otherwise overlap
statesMesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
Insert cell
Insert cell
projection = d3.geoAlbersUsa()
.fitSize([width, height], countyShapes)
// The default projection parameters used by most other county map examples instead of fitSize:
// .scale(1300)
// .translate([975/2, 610/2])
Insert cell
path = d3.geoPath(projection)
Insert cell
// width = ... by default the width is set by Observable, and will update if this is embedded
height = width * 0.6256410256410256 // the aspect ratio used in the projection, same as 610/975
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more