Public
Edited
May 3, 2023
Insert cell
Insert cell
data = `type,num_charts,sum_pageviews_14d,max_pageviews_14d,max_pageviews_slug
MapChart,1553,540064,37013,gdp-per-capita-maddison-2020
LineChart,747,392280,34618,population
ScatterPlot,440,103147,6595,gdp-vs-happiness
StackedArea,257,92182,8324,world-population-by-region-with-projections
StackedDiscreteBar,42,23800,6958,food-emissions-supply-chain
DiscreteBar,112,17880,2136,death-rates-from-energy-production-per-twh
StackedBar,38,7804,804,earthquake-deaths
Marimekko,19,2697,1242,co2-per-capita-marimekko
SlopeChart,17,2527,507,change-in-male-height-slope
TimeScatter,1,25,25,performance-artificial-intelligence-systems-atari`
Insert cell
data_parsed = d3.csvParse(data)
Insert cell
Plot.plot({
x: {
tickFormat: "s",
grid: true
},
y: {
axis: null,
domain: data_parsed.map(d => d.type)
},
marks: [
Plot.frame(),
Plot.barX(data_parsed, {
x: "num_charts",
// y: "sum_pageviews_14d",
fill: "type",
fx: "",
fy: "type",
}),
Plot.barX(data_parsed, {
x: "sum_pageviews_14d",
// y: "sum_pageviews_14d",
fill: "type",
fx: "",
fy: "type",
}),
Plot.ruleY([0])
]
})
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