Published
Edited
May 23, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = d3.csv(url, crash => ({
// combine the date and time strings into one Date object
dateTime: d3.timeParse('%m/%d/%Y %H:%M')(crash.date + ' ' + crash.time),
borough: crash.borough,
zip: crash.zip,
injured: +crash.injured, // + converts the string to an int
killed: +crash.killed,
cause: crash.cause
}))
Insert cell
Insert cell
d3.mean(data, d => d.injured + d.killed)
Insert cell
Insert cell
d3.rollup(
data,
g => g.length,
d => d.dateTime.getDate()
)
Insert cell
Insert cell
Insert cell
{
// filter out collisions that do not have a zip code
const collisionsWithZip = data.filter(d => d.zip !== "");
// get a map from zip code to number of collisions
const numCollisionsByZip = d3.rollup(collisionsWithZip,
crashesForZip => crashesForZip.length,
d => d.zip);
// turn the map into an array of objects that have two keys: zip and numCollisions
const zipCollisionCounts = Array.from(numCollisionsByZip,
([zip, numCollisions]) => ({zip, numCollisions}));
// sort the objects and take the top 5
return zipCollisionCounts.sort((a, b) => d3.descending(a.numCollisions, b.numCollisions)).slice(0, 5);
}
Insert cell
Insert cell
collisionsWithZip = data.filter(d => d.zip !== "")
Insert cell
Insert cell
numCollisionsByZip = d3.rollup(collisionsWithZip,
crashesForZip => crashesForZip.length,
d => d.zip)
Insert cell
Insert cell
zipCollisionCounts = Array.from(numCollisionsByZip, ([zip, numCollisions]) => ({zip, numCollisions}))
Insert cell
Insert cell
Array.from(numCollisionsByZip)
Insert cell
Insert cell
zipCollisionCounts.slice()
.sort((a, b) => d3.descending(a.numCollisions, b.numCollisions))
.slice(0, 5)
Insert cell
Insert cell
{
// filter out collisions that do not have a zip code
const collisionsWithZip = data.filter(d => d.zip !== "");
// get a map from zip code to number of collisions
const numInjuredAndKilledByZip = d3.rollup(collisionsWithZip,
crashesForZip => d3.sum(crashesForZip, crash => crash.injured + crash.killed),
d => d.zip);
// turn the map into an array of objects that have two keys: zip and numInjuredAndKilled
const zipInjuredKilledCount = Array.from(numInjuredAndKilledByZip,
([zip, numInjuredAndKilled]) => ({zip, numInjuredAndKilled}));
// sort the objects and take the top 5
return zipInjuredKilledCount.sort((a, b) => d3.descending(a.numInjuredAndKilled, b.numInjuredAndKilled))
.slice(0, 5);
}
Insert cell
Insert cell
Insert cell
{
// filter out collisions that do not have a zip code or a borough
const collisionsWithZipAndBorough = data.filter(d => d.zip !== "" && d.borough !== "");

// get a map from borough to a map from zip code to number of collisions
const numCollisionsByBoroughZip = d3.rollup(collisionsWithZipAndBorough,
crashesForZip => crashesForZip.length,
d => d.borough, d => d.zip);

// turn the map into an array of objects, where each object has two fields: borough and zips
return Array.from(numCollisionsByBoroughZip, ([borough, zips]) => {
// zips is a map from zip code to number of collisions.
// turn this into an array of objects, where each object has two fields: zip and number of collisions
const zipCollisions = Array.from(zips, ([zip, numCollisions]) => ({zip, numCollisions}));

return {
borough: borough,
// sort by number of collisions and take the top 3
zips: zipCollisions.sort((a, b) => d3.descending(a.numCollisions, b.numCollisions)).slice(0, 3)
}
});
}
Insert cell
Insert cell
collisionsWithZipAndBorough = data.filter(d => d.zip !== "" && d.borough !== "")
Insert cell
Insert cell
numCollisionsByBoroughZip = d3.rollup(collisionsWithZipAndBorough,
crashesForZip => crashesForZip.length,
d => d.borough, d => d.zip)
Insert cell
Insert cell
Array.from(numCollisionsByBoroughZip, ([borough, zips]) => {
const zipCollisions = Array.from(zips, ([zip, numCollisions]) => ({zip, numCollisions}));

return {
borough: borough,
zips: zipCollisions.sort((a, b) => d3.descending(a.numCollisions, b.numCollisions)).slice(0, 3)
}
})
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more