Public
Edited
May 3, 2023
Fork of New
Insert cell
Insert cell
data = ([{year: 2000, value: 50}, {year: 2010, value: 60}, {year: 2020, value: 80}])
Insert cell
Plot.plot({
color: {
domain: ['before 2008', 'after 2008'],
range: ['red', 'black'],
legend: true
},
marks: [
Plot.dot(data, { x: 'year', y: 'value', fill: d => d.year < 2008 ? 'red' : 'black' }),
Plot.line(data, {x: 'year', y: 'value', strokeOpacity: 0.2}),
Plot.link([[{year: 2000, value: 50}, {year: 2010, value: 60}]], {
x1: (d) => d[0].year,
y1: (d) => d[0].value,
x2: (d) => d[1].year,
y2: (d) => d[1].value,
markerEnd: "arrow"
}),
]
})
Insert cell

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.
Learn more