Published
Edited
Sep 21, 2018
Importers
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
mapProps = ({
layout: {
translateY: 50,
},
//TODO -- add stateFilterFunction: (loc) => (),
countyFillFunction: (loc) => ('none'), // override to create county fill colors
stateFillFunction: (loc) => ('none'), // override to create state fill colors
countyMouseOverFunction: (loc) => { }, // override to handle mouseovers
countyMouseOutFunction: (loc) => { }, // override to handle mouseovers
countyMouseMoveFunction: (loc) => { }, // override to handle mouseovers
countyOnClickFunction: (loc) => { // override to handle click events
//console.log(loc.properties.location_name);
},
//colorScale: @d3.scaleLinear, quantile, etc, // color scale for the legend
//data: @array, // flat array of your data
//legendTitle: @string, // title for the legend
//legendWidthScale: @d3.scaleLinear, d3.scaleSqrt, d3.scaleLog, etc
//legendTickFormat: @d3.format('.1f') etc.
stateFIPSToInclude: [], // empty array is default == include all states
})
Insert cell
Insert cell
// Download and parse this once. Use usTopology to filter etc to avoid reparsing the raw json again
base_usTopology = d3.json('https://gist.githubusercontent.com/Ryshackleton/b3c0f0fa229c5d32462c9897becdb5f1/raw/56b86a43f10af5382aaf1c2e30e5a338681a699c/usa-topo-fips.json')
Insert cell
Insert cell
Insert cell
usTopology = {
// TODO: port this to map, use proper filter based on STATEFIPS
if (mapProps.stateFIPSToInclude.length == 0) {
return base_usTopology;
}
const usTopology = {
type: 'Topology',
arcs: base_usTopology.arcs,
transform: base_usTopology.transform,
objects: {
counties: {
type: 'GeometryCollection',
geometries: base_usTopology.objects.counties.geometries
},
states: {
type: 'GeometryCollection',
geometries: base_usTopology.objects.states.geometries.filter(d => {
return mapProps.stateFIPSToInclude.includes(d.properties.FIPS);
}).map(d => d)
}
}
};
return usTopology;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more