The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
May 22, 2023
1 star
Insert cell
Insert cell
Insert cell
Plot
.barX(timeseries, {x: "population", y: "year", fill: "steelblue"})
.plot({y: {label: null, tickFormat: ""}})
Insert cell
Plot
.barX(timeseries, {x: "population", y: "year", fill: "year"})
.plot({y: {label: null, tickFormat: ""}})
Insert cell
Plot
.barX(timeseries, {x: "population", y: "year", fill: (d) => d.year})
.plot({y: {label: null, tickFormat: ""}})
Insert cell
Plot
.barX(timeseries, {x: "population", y: "year", fill: (d) => d.year & 1 ? "red" : "currentColor"})
.plot({y: {label: null, tickFormat: ""}})
Insert cell
Plot
.barX(timeseries, {x: "population", y: "year", fill: (d) => d.year & 1 ? "odd" : "even"})
.plot({y: {label: null, tickFormat: ""}, color: {legend: true}})
Insert cell
timeseries = [
{year: 2014, population: 7295.290765},
{year: 2015, population: 7379.797139},
{year: 2016, population: 7464.022049},
{year: 2017, population: 7547.858925},
{year: 2019, population: 7713.468100},
{year: 2020, population: 7794.798739}
]
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