Data Visualization Developer at The Associated Press
Public
Edited
Jul 9, 2024
trackRecordsFinal = trackRecords.map(d => {
const eventData = trackRecords.filter(x => x.event === d.event)
const lowestTimeInEvent = d3.min(eventData, d => d.time)
const eventSplit = d.event.split(" ")
const gender = eventSplit[eventSplit.length - 1]
const cleanEventName = eventSplit.slice(0, eventSplit.length - 1).join(" ")
const date = new Date((d.year + 1).toString())
return {...d, event: cleanEventName, gender: gender === 'Men' ? "Male" : "Female", relativeTime: +((d.time - lowestTimeInEvent) / lowestTimeInEvent).toFixed(5), date: `${date.getMonth()}/${date.getDate()}/${date.getFullYear()}` }
})
trackRecords = {
let allRecords = []
yearTimes.forEach(([event, times]) => {
let minTime = Infinity;
const eventRecords = []
// sort years from past to present first in a non-mutating way
times.toSorted((a,b) => a[0] - b[0]).forEach(([year, time]) => {
// if the time was less than the min time, a record was set
if (time < minTime) {
eventRecords.push({event, year, time})
// update the min time to the current record
minTime = time
}
})
allRecords.push(eventRecords)
})
return allRecords.flat(2).sort((a,b) => b.year - a.year)
}
d3.rollups(trackRecords, d => d.length, d => d.event).sort((a,b) => b[1] - a[1])
swim = d3.rollups(rawSwimData.map(d => ({...d, distance: +d.event.split(" ")[0],
style: d.event.split(" ")[1], time: parseTimeString(d.time)})), d => {
return d[d3.minIndex(d, (v) => v.time )]
}, d => d.event, d => d.gender, d => d.olympics_year).map(([event, values]) => {
return values.map(([gender, years]) => {
return years.map(([year, data]) => {
return {event, gender, year, ...data}
})
})
}).flat(4)
swimWithPct = swim.map(d => {
const eventData = swim.filter(x => x.event === d.event && x.gender === d.gender )
const lowestTimeInEvent = d3.min(eventData, d => d.time)
return {...d, relativeTime: +((d.time - lowestTimeInEvent) / lowestTimeInEvent).toFixed(5) }
})
olympic_lifts.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
liftsByYear = {
const filter = lifts.sort((a,b) => a.date - b.date).filter(d => d.event !== "Press" && d.gender === 'Male')
const liftsData = d3.rollups(filter, d => d3.max(d, v => v.record) ,
d => new Date(d.date).getFullYear() , d => d.event, d => d.reclass_weight )
return liftsData.map(([year, data]) => {
return data.map(([event, d]) => {
return d.map(d => ({year, event, weight_class: d[0], weight: d[1] }))
})
}).flat(3)
}
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(liftsByYear, {x: 'year', y: "weight", stroke: "event", fx: "event", fy: "weight_class"} )
]
})
lifts.filter(d => d.gender === 'Male' && d.reclass_weight === '80-89' && d.event === 'Total')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.