The end-to-end solution for building and hosting better data apps, dashboards, and reports.
// Update this array with information about phases in your life!
life = [
{ phase: "Los Angeles", start: "1983-12-23", color: "#9900FF" },
{ phase: "Phoenix", start: "1990-08-02", color: "tomato" },
{ phase: "Santa Fe", start: "1992-06-16", color: "royalblue" },
{ phase: "Bozeman", start: "2001-09-17", color: "gray" },
{ phase: "Portland", start: "2005-09-15", color: "#330099" },
{ phase: "Boise", start: "2007-02-11", color: "orange" },
{ phase: "Goleta", start: "2015-11-10", color: "yellowgreen" },
{ phase: "Chart End Date:", start: "2023-02-20", color: "NA" } // Keep row (chart will extend to this date)
]
// Add unique id to each row:
lifeDates = life.map((d, i) => ({
id: i,
phase: d.phase,
start: d.start,
color: d.color
}))
parser = d3.utcParse("%Y-%m-%d")
lifeFlat = {
return lifeDates.flatMap((record, i) => {
if(i === lifeDates.length) {
return {...record, month: record.start}
} else {
const newArray = d3.utcMonths(lifeDates.map(month => d3.utcMonth(parser(month.start)))[i],
lifeDates.map(month => d3.utcMonth(parser(month.start)))[i+1])
return newArray.map(month => ({...record, month}))
}
})
}
// Find midpoint of each phase:
midPhase = d3.rollup(lifeFlat, v => new Date((d3.max(v, d => d.month).getTime() + d3.min(v, d => d.month).getTime()) / 2), d => d.id)
midDatesArray = lifeDates.map((d,i) => ({
place: d.phase,
midDates: Array.from(midPhase.values())[i],
color: d.color
})).slice(0, -1)
monthDefault = Array.from({length: 12}, (e, i) => {
return new Date(null, i + 1, null).toLocaleDateString("default", {month: "short"});
}) // Thought: can I pass this array as a domain instead, & will it show up in default language for a user? (from: https://gist.github.com/seripap/9eb809268eb8026abd9f?permalink_comment_id=3274769#gistcomment-3274769)
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.
