Public
Edited
May 18, 2023
// edit property
composers.map(d => d.Name + ", (" + d.Birth + "-" + d.Death + ")");
// add new property
composers_years = composers.map(d => ({...d, Years: d.Death.getFullYear() - d.Birth.getFullYear()}))
composers.filter(d => d.Birth < 1700)
composers.filter(d => d.Name == "Claude Debussy" || d.Name == "Richard Strauss")
composers.filter(d => d.Period == "Romantic" && d.Death > new Date("1950-01-01"))
composers.map(d => ({...d, Years: d.Death.getFullYear() - d.Birth.getFullYear()}))
.filter(d => d.Period == "20th Century")
.sort((a, b) => a.Years - b.Years)
.map(d => ({Name: d.Name, Years: d.Years}));
// group data by key
periods = d3.group(composers, d => d.Period)
// get values in an array of objects
periods.get("Baroque")
// return map
d3.rollup(composers_years,
// reducer function
v => d3.mean(v, d => d.Years),
// grouping key
b => b.Period)
// return array of arrays
d3.flatRollup(composers_years,
v => d3.mean(v, d => d.Years),
b => b.Period)
Plot.plot({
style: {fontSize: "14px", fontFamily: "'Open Sans', sans-serif"},
marginLeft: 200,
x: {grid: true, label: null, tickSize: 0, ticks: 10},
y: {domain: composers_long.filter(d => d.Status === "Birth").sort((a, b) => a.Year - b.Year).map(d => d.Name),
label: null, tickSize: 0},
marks: [
Plot.ruleY(composers_long, Plot.groupY({x1: "min", x2: "max"}, {x: "Year", y: "Name", stroke: "#dddddd", strokeWidth: 2.5})),
Plot.dot(composers_long, {x: "Year", y: "Name", r: 5, fill: "Period"})
]
})
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.
