Cofounder/CTO @ SceneThink; DataViz @ Northeastern; Ph.D. in Computer Science @ UVA 2011
map = {
const height = 0.8 * width;
const svg = d3.select(DOM.svg(width, height));
let projection = d3.geoAlbers();
const path = d3.geoPath().projection( projection )
const graticule = d3.geoGraticule()
function fillColor(parcel) {
// Reported LotSquareFeet turns out not to be very accurate. Lots of missing data
// Instead, calculate based on the parcel geometry
// const sqft = parcel.properties.LotSquareFeet
const sqft = turf.area(parcel)*9.322 // eyeballed conversion from LotSquareFeet to this
return d3.interpolateViridis( (parcel.properties.Assessment/sqft) / 120.0 )
}
projection
.scale(1)
.translate([0, 0]);
const b = path.bounds(parcels);
const s = 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
const t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection
.scale(s)
.translate(t)
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
svg.append("g")
.selectAll("path")
.data(parcels.features)
.enter().append("path")
.attr("d", path)
.style('fill', fillColor)
.style('stroke', '#0001')
return svg.node();
}
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.
