data = [
{ year: "2012", value: 10 },
{ year: "2013", value: 11 },
{ year: "2016", value: 14 },
{ year: "2017", value: 15 },
{ year: "2018", value: 16 },
{ year: "2019", value: 17 },
{ year: "2020", value: 18 },
{ year: "2021", value: 19 }
]
Plot.plot({
marks: [
Plot.barY(data, {x: "year", y: "value"})
]
})
dataTyped = data.map(({year, value}) => ({year: new Date(year, 0, 1), value}))
Plot.plot({
marks: [
Plot.barY(dataTyped, {x: "year", y: "value"})
]
})
Plot.plot({
x: {
domain: d3.timeYear.range(...d3.extent(dataTyped, (d) => d.year)),
tickFormat: "%Y"
},
marks: [Plot.barY(dataTyped, { x: "year", y: "value" })]
})
Plot.plot({
marks: [
Plot.rectY(dataTyped, {x: "year", y: "value", interval: d3.timeYear})
]
})
monthlyData = d3.timeMonth
.range(new Date(2012, 0, 1), new Date(2021, 0, 1))
.map((date, i) => ({ date, value: Math.random() }))
Plot.plot({
marks: [
Plot.rectY(monthlyData, {x: "date", y: "value", interval: d3.timeYear})
]
})
Plot.plot({
marks: [
Plot.rectY(
monthlyData,
Plot.binX({ y: "sum" }, { x: "date", y: "value", thresholds: 30 })
)
]
})
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.
