Public
Edited
Oct 20, 2023
precinct_json = FileAttachment("Police Precincts.geojson").json()
uri = 'https://data.cityofnewyork.us/resource/8h9b-rp9u.json?$where=ARREST_DATE>"2022-01-01"&$limit=50000';
// there are too many records for observable, so we are limiting to just 2022
historicalData = fetch(uri).then(res => res.json())
// both the current dataset and the historical dataset use the legacy soda API, which limits queries to 50k. So in the case we can upload it, it's just easier than making a bunch of calls
currentData = ( await FileAttachment("NYPD_Arrest_Data__Year_to_Date__20231017.csv").csv()).map( arrest => {
// parse out data for easy filtering
const splitDate = arrest.ARREST_DATE.split("/");
arrest.ARREST_MONTH = splitDate[0]
arrest.ARREST_DAY = splitDate[1]
arrest.ARREST_YEAR = splitDate[2];
return arrest;
})
data = {
const allData = currentData.concat(historicalData);
return allData
}
listOfMonths = {
const formattedMonths = [];
const uniqueDates = new Set( data.map( d => d.ARREST_DATE ));
uniqueDates.forEach(dd => {
const date = new Date('2023', dd);
const monthName = date.toLocaleString('en-US', { month: 'long' });
formattedMonths.push(
{
name: `${monthName} 2023`,
value: dd
}
)
})
return formattedMonths;
}
crimeTypes = {
const crimeList = [];
for (const i in data) {
if ( crimeList.indexOf(data[i].KEY_CD) < 0) {
crimeList.push(
{
value: data[i].KY_CD,
desc: data[i].OFNS_DESC
}
)
}
}
return crimeList;
}
//filteredData = data.filter(d => d.ARREST_MONTH === selectedMonth.value )
filteredData = data.filter(d => d.PD_CD === '339' )
listOfOffenseLevels = {
const formattedLevels = [];
for( const i in data ) {
formattedLevels.push(
{
name: data[i].PD_DESC,
value: data[i].PD_CD
}
)
}
return formattedLevels;
}
aggregatedDataByPrecinct = d3.rollup(
filteredData,
(arrests) => arrests.length,
(d) => d.ARREST_PRECINCT
);
aggregatedDataByPD = d3.rollup(
aggregatedDataByPrecinct,
)
precinct_arrests = Array.from(aggregatedDataByPrecinct, ([precinct, count]) => ({
precinct,
count,
}));
maxArrests = d3.max( precinct_arrests, (d) => d.count )
color = d3.scaleSequential()
.domain([0, maxArrests])
.interpolator(d3.interpolateReds)
margin = ({ top: 10, right: 0, bottom: 0, left: 10 });
width = 640 - margin.left - margin.right;
height = 640 - margin.top - margin.bottom;
projection = d3.geoAlbers()
.fitSize( [width, height], precinct_json)
path = d3.geoPath().projection(projection)
viewof selectedMonth = Select(listOfMonths, { label: 'Month', format: d => d.name })
viewof selectedOffenseLevel = Select(listOfOffenseLevels, { label: 'Offense', format: d => d.name })
{
const svg = d3.create('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// add legend
g.append('g')
.attr('transform', `translate(0,${-margin.top})`)
.append(() => legend({color, title: 'title', tickFormat: '.2~s'}))
g.selectAll('path')
.data(precinct_json.features)
.join('path')
.attr('d', path)
.attr('fill', d => color(aggregatedDataByPrecinct.get(d.properties.precinct)))
.attr('stroke', 'white')
return svg.node();
}
aggregatedDataByPrecinct('107')
import {legend} from "@d3/color-legend"
import {Radio, Select} from '@observablehq/inputs'
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.
