Public
Edited
Mar 26, 2021
chicago = await d3.csv("https://cfpb-hmda-public.s3.amazonaws.com/prod/data-browser/filtered-queries/6f86e656b29ff73628caaf710e0fd7e0.csv")
hmdatracts = new Map(Array.from(d3.group(chicago, x => x.census_tract)).map(([id,values]) => [id,{
minority_pct: parseFloat(values[0].tract_minority_population_percent) / 100,
population: parseFloat(values[0].tract_population),
accepted: values.filter(x => x.action_taken == '1').length,
denied: values.filter(x => x.action_taken == '3').length,
}]).map(([id, values]) => [id,{
...values,
denied_pct: values.denied / (values.accepted + values.denied),
}]))
geoIL = {
const il = await d3.json("https://raw.githubusercontent.com/loganpowell/census-geojson/master/GeoJSON/500k/2019/17/tract.json");
il.features = il.features.filter(f => hmdatracts.has(f.properties.GEOID));
return il;
}
minority = {
const width = 800, height = 800;
const svg = d3.select(DOM.svg(width, height))
const projection = d3.geoMercator()
.fitExtent([[0,0],[width, height]], geoIL)
const extent = d3.extent(hmdatracts, ([k,v]) => v.minority_pct);
const color = d3.scaleQuantize(extent, d3.schemeBlues[9]);
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color, width: 260, tickFormat: ".0%"}));
let path = d3.geoPath()
.projection(projection);
svg.append('g').selectAll('path')
.data(geoIL.features)
.join('path')
.attr('d', path)
.attr("fill", d =>
color(hmdatracts.get(d.properties.GEOID) ?
hmdatracts.get(d.properties.GEOID).minority_pct : 0))
.style('stroke', 'rgba(0,0,0,.3)')
console.log(color(0.5), color.domain());
return svg.node()
}
denied = {
const width = 800, height = 800;
const svg = d3.select(DOM.svg(width, height))
const projection = d3.geoMercator()
.fitExtent([[0,0],[width, height]], geoIL)
const extent = d3.extent(hmdatracts, ([k,v]) => v.denied_pct);
const color = d3.scaleQuantize(extent, d3.schemeBlues[9]);
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color, width: 260, tickFormat: ".0%"}));
let path = d3.geoPath()
.projection(projection);
svg.append('g').selectAll('path')
.data(geoIL.features)
.join('path')
.attr('d', path)
.attr("fill", d =>
color(hmdatracts.get(d.properties.GEOID) ?
hmdatracts.get(d.properties.GEOID).denied_pct : 0))
.style('stroke', 'rgba(0,0,0,.3)')
console.log(color(0.5), color.domain());
return svg.node()
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
