data = [
{year: 2000, aapl: 1, msft: 49.38, ibm: 115.81},
{year: 2010, aapl: 6.86, msft: 28.96, ibm: 116.90},
{year: 2020, aapl: 77.57, msft: 167.10, ibm: 130.56}
]
Plot.plot({
marks: [
Plot.lineY(data, {x: "year", y: "aapl", stroke: "red"}),
Plot.lineY(data, {x: "year", y: "msft", stroke: "green"}),
Plot.lineY(data, {x: "year", y: "ibm", stroke: "blue"}),
]
})
Plot.legend({color: {domain: ["aapl", "msft", "ibm"], range: ["red", "green", "blue"]}})
tidy = data.flatMap(({year, ...stocks}) => Object.entries(stocks).map(([stock, value]) => ({year, stock, value})))
Plot.plot({
color: {legend: true},
marks: [
Plot.lineY(tidy, {x: "year", y: "value", stroke: "stock"})
]
})
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.
