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: "Boston", start: "1983-12-23", color: "#9900FF" },
{phase: "United Kingdom", start: '1995-06-02', color: "tomato"},
{phase: "Italy", start: '1995-08-02', color: "turquoise"},
{phase: "Spain", start: '1995-09-12', color: "steelblue"},
{phase: "San Francisco", start: '1996-10-15', color: "orchid"},
{phase: "UCLA", start: '1997-08-10', color: "purple"},
{phase: "Smith College", start: '1998-08-10', color: "gold"},
{phase: "Harvard Business School", start: '2001-07-01', color: "tomato"},
{phase: "Boston Women in Comedy Festival", start: '2003-07-10', color: "turquoise"},
{phase: "Los Angeles", start: '2011-07-10', color: "gold"},
{phase: "Maine", start: '2021-10-17', color: "orchid"},
{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.
