Public
Edited
Jan 14, 2024
Importers
viewof amount = Inputs.range([0, 200], {label: "Amount", step: 1})
world.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof tipPercent = Inputs.radio([10, 12, 15, 18, 20, 25],
{label: "Tip Percentage", value: 20})
tip = amount * (tipPercent / 100)
A ${tipPercent}% tip on $${amount.toFixed(2)} is $${tip.toFixed(2)}, for a total of $${(amount+tip).toFixed(2)}
groupData-2022@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
global = (d3.sum(groupdata20221, d=>d.Population*d.PerCapPower)/1000).toFixed(2)
groupdata20221
X
Region
Y
PerCapPower
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
mychart2 = Plot.plot({
y: {label: "Per Capita Power (watts)"},
x: {label: "Population (million)"},
marks: [
Plot.rectY(groupdata20221, Plot.stackX(
{x: "Population", y2: "PerCapPower", fill: "Region",
title: (d) => `${d.Region} ${d.str}`
})),
Plot.text(groupdata20221,{
Plot.stackX({x: "Population"}),
y: "PerCapPower",
textAnchor: "middle",
dy: -5,
text:(d) => `${d.PerCapPower.toFixed(2)}`
}),
Plot.text([[4000,800]], {textAnchor: "start",
text: d=>[`Total current global power 2022: ${global} GW\n
IEA NetZero by 2050 target: ${global *2.6} GW`]})
]
})
mychart2 = Plot.plot({
y: {label: "Per Capita Power (watts)"},
x: {label: "Population (million)"},
marks: [
Plot.rectY(groupdata20221, Plot.stackX(
{x: "Population", y2: "PerCapPower", fill: "Region",
title: (d) => `${d.Region} ${d.str}`
})),
Plot.text(groupdata20221,{
Plot.stackX({x: "Population"}),
y: "PerCapPower",
textAnchor: "middle",
dy: -5,
text:(d) => `${d.PerCapPower.toFixed(2)}`
}),
Plot.text([[4000,800]], {textAnchor: "start",
text: d=>[`Total current global power 2022: ${global} GW\n
IEA NetZero by 2050 target: ${global *2.6} GW`]})
]
})
groupCountries-2022.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
groupData-2022.csv
X
Region
Y
PerCapPower
Color
xmin
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
color: { legend: true },
marks: [
Plot.barY(
groupdata20221,
{ x: "Region", y: "PerCapPower", fill: "xmin", tip: true ,title: "str"}
),
Plot.ruleY([0]),
Plot.text(groupdata20221,{x: "Region", y: "PerCapPower",text: (d)=>`${d.PerCapPower.toFixed(2)}`})
]
})
Plot.plot({
marks: [
Plot.rectY(groupdata20221, {x: "Population", y: "PerCapPower", sort: {x: "y", reverse: false}}),
Plot.ruleY([0])
]
})
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.
