Woman, computer scientist, introvert, daughter of an immigrant, and Associate Professor at the University of San Francisco.
SFPD Incidents by District (Wrangling)SFPD Incidents by District (Template)
SFPD Incidents by District (Visualization)
grouped = d3.groups(incidents, d => d.district)
rolledup = d3.rollups(incidents, values => d3.sum(values, d => d.count), d => d.district)
districts = sorted.map(d => d[0])
{
const bars = d3.select(barChart)
.select("g#bars")
.selectAll("rect")
.data(sorted);
const lines = d3.select(lineChart)
.select("g#lines")
.selectAll("path")
.data(grouped);
const debug = html`<p>${bars.size()} bars selected</p>`;
bars.on("mouseover", function(d) {
d3.select(this)
.transition()
.style("fill", "lightseagreen");
lines.filter(e => e[0] == d[0])
.raise()
.transition()
.style("stroke", "lightseagreen")
.style("stroke-width", "3px");
d3.select(debug).text(`Bar: ${d[0]}`);
});
bars.on("mouseout", function(d) {
d3.select(this)
.transition()
.style("fill", "lightgray");
lines.filter(e => e[0] == d[0])
.raise()
.transition()
.style("stroke", "lightgray")
.style("stroke-width", "1px");
});
return debug;
}
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.
