The avatar for @nyuvis
EBVL
Enrico Bertini's Visualization Lab
Public
Practice Exercises
Edited
Jan 24
Fork of Data Transformation Practice
•
6 forks
2 stars
Practice Exercises
JavaScript Basics PracticeJavaScript Basics Practice - SolutionsData Transformation Practice
Data Transformation Practice - Solutions
SVG and D3 Basics PracticeSVG and D3 Basics Practice - SolutionsBar Chart PracticeBar Chart Practice - SolutionsLine and Area Charts PracticeLine and Area Charts Practice - SolutionsMaps PracticeMaps Practice - SolutionsMaps Practice II - SolutionsMaps Practice IISmall Multiples PracticeSmall Multiples Practice - SolutionsColor and Clarity PracticeColor and Clarity Practice - SolutionsAnimated Maps PracticeAnimated Maps Practice - SolutionsNetworks PracticeNetworks Practice - SolutionsInteraction PracticeInteraction Practice - SolutionsGraph Design Practice
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
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
data.filter(d => d.zip === '').length
Insert cell
Insert cell
new Set(data.map(d => d.zip)).size
Insert cell
d3.group(data, d => d.zip).size
Insert cell
Insert cell
d3.max(data, d => d.injured)
Insert cell
Insert cell
d3.groupSort(
data,
group => group.length,
collision => collision.borough
)
.filter(borough => borough !== '')
.reverse()
Insert cell
Insert cell
zip11201 = data.filter(collision => collision.zip === '11201')
Insert cell
Insert cell
zip11201.map(collision => collision.cause)
Insert cell
Insert cell
data.toSorted((a, b) => d3.descending(a.injured, b.injured))
.slice(0, 5)
Insert cell
Insert cell
Insert cell
Insert cell
collisionsWithZip = data.filter(d => d.zip !== "")
Insert cell
Insert cell
numCollisionsByZip = d3.rollups(
collisionsWithZip,
group => group.length,
collision => collision.zip
)
Insert cell
Insert cell
top5ZipsWithCounts = numCollisionsByZip.slice()
.sort((a, b) => d3.descending(a[1], b[1]))
.slice(0, 5)
Insert cell
Insert cell
d3.groupSort(
collisionsWithZip,
group => -group.length,
collision => collision.zip
).slice(0, 5)
Insert cell
Insert cell
numInjuredAndKilledByZip = d3.rollups(
collisionsWithZip,
group => d3.sum(group, collision => collision.injured + collision.killed),
collision => collision.zip
)
.sort((a, b) => d3.descending(a[1], b[1]))
.slice(0, 5)
Insert cell
Insert cell
Insert cell
Insert cell
collisionsWithZipAndBorough = data.filter(d => d.zip !== "" && d.borough !== "")
Insert cell
Insert cell
numCollisionsByBoroughZip = d3.rollups(
collisionsWithZipAndBorough,
group => group.length,
// first group by borough
collision => collision.borough,
// then group by zip code
collision => collision.zip
)
Insert cell
Insert cell
numCollisionsByBoroughZip.map(([borough, zips]) => {
const top3Zips = zips.slice()
.sort((a, b) => d3.descending(a[1], b[1]))
.slice(0, 3)
.map(([zip, count]) => ({ zip, count }))
return { borough, top3Zips };
})
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