Basemap Import Test Trying out adding a data overlay to a basemap imported from a separate notebook.
{ 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; }
data
topojsonObj = Object.keys(tractsTopoJSON.objects)[0]
tractsTopoJSON = d3.json("https://gist.githubusercontent.com/clhenrick/d8724eeee3350ce80cd9f94095ed7735/raw/987a4c874fac7e64af6817da26fa3ff3f1fbba0b/tracts_2010_4326_wac.json")
tracts = topojson.feature(tractsTopoJSON, tractsTopoJSON.objects[topojsonObj])
palette
color = d3.schemeYlGnBu[5]
greyScale = greys
dependencies
import {map, projection, path, greys, boundaryFilter} with { width } from "@clhenrick/sf-bay-area-basemap"
d3 = require("d3")
topojson = require("topojson")