EJ Fox & Ian Johnson
streaming data, code, acid, design
Public
Edited
Mar 21, 2023
plot = Plot.plot({
width,
height: 500,
marginLeft: 100,
marginRight: 50,
x: { domain: [0, 1], grid: true, ticks: 10, tickFormat: "%" },
marks: [
Plot.barX(filteredCountries, {
x: (d) => 1 - (1 - scenario) * d.percent,
y: "countryName",
stroke: "lightgray"
}),
Plot.barX(filteredCountries, {
x: "percent",
y: "countryName",
sort: { y: "x", reverse: true, limit: 50 },
stroke: "gray"
}),
Plot.barX(filteredCountries, {
x: (d) => d.percent * scenario,
y: "countryName",
fill: "black",
sort: { y: "x", reverse: true, limit: 50 }
}),
// Plot.text(filteredCountries, {
// text: (d) => d3.format("0.2%")(d.percent * scenario),
// // x: "percent",
// x: (d) => d.percent * scenario,
// y: "countryName",
// dx: 20
// }),
Plot.text(filteredCountries, {
text: (d) => pformat(1 - (1 - scenario) * d.percent),
// x: "percent",
x: (d) => 1 - (1 - scenario) * d.percent,
y: "countryName",
dx: 25
}),
Plot.ruleX([0])
]
})
plot.scale("x")
plot.scale("y")
pformat = d3.format("0.1%")
00_all_data_ukraine.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
filterNumber = 0.0
filteredCountries = data.filter((d) => d.percent > filterNumber)
function applyScenarioScalar(inputPercent) {
return inputPercent * scenario;
}
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.
