Maps, Data, Viz, UX, Design
Published
Edited
Aug 28, 2018
1 fork
1 star
{
var div = DOM.element('div');
div.appendChild(map)
// select the main svg group from the imported map object
const g = d3.select(div).select("svg").select("g")
// insert an svg group for the census tracts, just before the county boundaries
const tractsGroup = g.insert("g", "#county-boundaries").attr("id", "tracts")
// draw census tracts polygons
tractsGroup.selectAll("path")
.data(tracts.features)
.enter().append("path")
.attr("id", "tracts")
.attr("d", path)
.attr("fill", d => d.properties.quintile !== null ? color[d.properties.quintile] : greys[1])
.append("title")
.text(d => `${d.properties.quintile}`)
// draw census tract boundaries
tractsGroup.append("path")
.attr("id", "tract-boundaries")
.datum(topojson.mesh(tractsTopoJSON, tractsTopoJSON.objects[topojsonObj], boundaryFilter))
.attr("fill", "none")
.attr("stroke-width", 0.25)
.attr("stroke", greys[0])
.attr("stroke-linejoin", "round")
.attr("d", path);
return div;
}
import {map, projection, path, greys, boundaryFilter} with { width } from "@clhenrick/sf-bay-area-basemap"
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.
