Published
Edited
Jul 23, 2019
md`# Theme Park Data`
getData = async (endpoint) => {
const minDate = new Date("2018-10-01 00:00:00")
const maxDate = new Date("2018-10-05 00:00:00")
const allData = await d3.csv(endpoint).then((data) => {
return data.map((datapoint) => {
const parseTime = d3.timeParse("%m/%d/%Y")
const date = new Date(datapoint.datetime)
const hour = date.getHours()
const minute = date.getMinutes()
let wait = +datapoint["SPOSTMIN"]
wait = wait >= 0 ? wait : 0
const ref = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
return {
date,
ref,
hour,
minute,
wait
}
}).sort((a, b) => a.date - b.date)
.filter((d) => (d.date> minDate && d.date < maxDate) )
})
const rollup = d3Array.rollup(allData, v => v, d => d.ref, d => d.hour)
const rollupArray = Array.from(rollup)
const rolledUpTimes = rollupArray.map(dateArray => {
const localDate = dateArray[0]
const valuesMap = dateArray[1]
const times = {}
for (let key of valuesMap.keys()) {
const valueArray = valuesMap.get(key)
let wait = 0
const count = valueArray.length
valueArray.forEach(timeObject => {
wait += timeObject.wait
})
times[key] = Math.round(wait/count)
}
return {date: localDate, times}
})
return rolledUpTimes
}
themeParkData = {
const base = "https://raw.githubusercontent.com/ahoak/data-visualization-workshop/master/data/themePark/"
const endpoints = [
"7_dwarfs_train",
"alien_saucers",
"dinosaur",
"expedition_everest",
"flight_of_passage",
"kilimanjaro_safaris",
"navi_river",
"pirates_of_caribbean",
"rock_n_rollercoaster",
"slinky_dog",
"soarin",
"spaceship_earth",
"splash_mountain",
"toy_story_mania"
]
const entities = await d3.csv(base + "entities.csv")
const prom = await endpoints.map(async(slug) => {
const endpoint = base + slug+'.csv'
const entity = entities.find(d => d.filename === slug)
const data = await getData(endpoint)
return {...entity, data}
})
const results = await Promise.all(prom)
var blob = new Blob([JSON.stringify(results, null, 2)], {type : 'application/json'})
const blobUrl = URL.createObjectURL(blob)
console.log(blobUrl)
return blobUrl
}
d3 = require("d3@5")
d3Array = require("d3-array@^2.2")
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.
