Digital Humanist. Manhattan-based.
Published
Edited
Dec 22, 2020
state = cityst.split(", ")[1]
city = cityst.split(", ")[0]
function get_fips(k) {
if (master_map.get(k) === undefined) {return null}
return master_map.get(k).fips
}
sldl.objects['-'].geometries[0].properties
import { select } from '@jashkenas/inputs'
cities = new Set(redlines.objects.fullDownload.geometries.map(d => `${d.properties.city}, ${d.properties.state}`))
md`
The four redlining colors closely correspond to four of the standard bootstrap button colors. (red: danger, yellow: warning, blue: primary, green: success). Since web users will have internalized the meaning of those colors already, I just use the bootstrap equivalents instead of trying to glean them from the maps.
`
HOLC_bootstrap = ({"A": "#28a745", "B": "#17a2b8", "C": "#ffc107", "D": "#dc3545"})
import { toposimplify } from '@lemonnish/minify-topojson-in-the-browser'
{
const copy = JSON.parse(JSON.stringify(joint_topojson))
// const simp = toposimplify(copy)
const quant = topojson.quantize(copy, 1e3)
const sldl_arcs = new Set(quant.objects.sldl.geometries.map(d => d.arcs).flat(3).map(d => Math.abs(d)))
const redline_arcs = new Set(quant.objects.redlines.geometries.map(d => d.arcs).flat(3).map(d => Math.abs(d)))
return [...redline_arcs].filter(d => sldl_arcs.has(d))
}
joint_topojson.objects.sldl.geometries[0].properties
{
const proj = d3.geoAlbersUsa()
let sldl = topojson.mesh(joint_topojson, joint_topojson.objects.sldl)
let sldls = topojson.feature(joint_topojson, joint_topojson.objects.sldl)
let redlines = topojson.feature(joint_topojson, joint_topojson.objects.redlines)
proj.fitExtent([[0, 0], [width, width*.66]], redlines)
const ctx = canvas.getContext("2d")
ctx.clearRect(0, 0, width, width)
const path = d3.geoPath().projection(proj).context(ctx)
ctx.globalAlpha = .5
ctx.lineWidth = 5
ctx.strokeStyle = "grey"
ctx.beginPath()
path(sldl)
ctx.stroke()
for (let feature of redlines.features) {
ctx.beginPath()
ctx.fillStyle = HOLC_bootstrap[feature.properties.holc_grade]
path(feature)
ctx.fill()
//ctx.stroke()
}
ctx.fillStyle = "rgba(0, 0, 0, .6)"
ctx.font = 'bold 32px sans-serif'
for (let feature of sldls.features) {
const centroid = proj(d3.geoCentroid(feature))
ctx.fillText(+feature.properties.SLDLST, centroid[0], centroid[1])
}
}
topojson = require("topojson")
[...(d3.rollup(redlines.objects.fullDownload.geometries.filter(d => get_fips(d.properties.state) == get_fips(state) && d.properties.city == city), d => topojson.merge(redlines, d), k => k.properties.holc_grade)).values()]
redlines.objects.fullDownload.geometries[0].properties
joint_topojson = {
const state_redlines =
redlines.objects.fullDownload.geometries.filter(d => get_fips(d.properties.state) == get_fips(state) && d.properties.city == city)
// const redlines_json = {"type": "FeatureCollection", "features": state_redlines.map(d => topojson.feature(redlines, d))}
const redlines_json = geojson_redlines_for_city(city, state)
const state_sldl =
sldl.objects['-'].geometries.filter(d =>d.properties && get_fips(d.properties.STATEFP) == get_fips(state))
const sldl_json = {"type": "FeatureCollection", "features": state_sldl.map(d =>
topojson.feature(sldl, d))}
return topojson.topology({sldl: sldl_json, redlines: redlines_json})
}
geojson_redlines_for_city("Boston", "MA")
function geojson_redlines_for_city(city, state) {
const redlines_geometries =
d3.rollup(redlines.objects.fullDownload.geometries.filter(d => get_fips(d.properties.state) == get_fips(state) && d.properties.city == city),
d => {return {"type": "feature",
"properties": d[0].properties,
geometry: topojson.merge(redlines, d)}}, k => k.properties.holc_grade)
return {"type": "FeatureCollection", "features": [...redlines_geometries.values()] }
}
d3 = require("d3@v6", "d3-collection")
sldl.objects['-'].geometries[0].properties
redlines = {
const redlines = await FileAttachment("redlines.topojson").json()
// I've lived in several of these cities, and they are not different from
// each other. Haverhill and Brockton is debatable, but IDC.
const boston = new Set([
"Arlington","Belmont","Boston","Braintree","Brookline","Cambridge", "Chelsea","Dedham","Everett","Lexington","Malden","Medford","Melrose",
"Milton","Needham","Newton","Quincy","Revere",
"Saugus","Somerville","Waltham","Watertown","Winchester","Winthrop"])
for (let row of redlines.objects.fullDownload.geometries) {
if (row.properties.state == "MA" & boston.has(row.properties.city)) {
row.properties.city = "Boston"
}
}
return redlines
}
sldl = FileAttachment("quant@1.topojson").json()
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.
