createChart = function(svg) {
const projection = d3.geoAlbers()
const geoGenerator = d3.geoPath()
.projection(projection);
const colors = d3.scaleLinear()
.domain(d3.extent(data, (d) => parseInt(d.colissions)))
.range(d3.schemeGnBu[3]);
projection.fitExtent([[10, 10], [width, height]], sandiego_police_beats);
const byPoliceBeat = function(d) {
const entries = data.filter(function(e) { return parseInt(e.police_beat) === d.properties.beat; });
return entries[0]
}
svg.append('g').selectAll('path')
.data(sandiego_police_beats.features)
.enter()
.append('path')
.attr('d', geoGenerator)
.attr('fill', function(d) {
const entry = byPoliceBeat(d);
if(entry) { return colors(entry.colissions)}
return '#eee';
})
.attr('stroke','#fff')
}
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.
