Public
Edited
Feb 18, 2023
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { inputCvd, functionCvd } from "@ijlyttle/cvd-widget"
Insert cell
Insert cell
Insert cell
carsFiltered = cars.filter((x) => [4, 8].includes(x.cylinders))
Insert cell
colorsDifficult = ["#3dcd58", "#e47f00"]
Insert cell
colorsBetter = ["#1a69a5", "#bf6a39"]
Insert cell
function demoplot({
colorRange = colorsDifficult,
symbolSpec = "circle",
ariaDescription = "This plot needs a description."
} = {}) {
return Plot.plot({
ariaLabel:
"Scatterplot showing models of cars; x-axis: power (hp), y-axis: economy (mpg), grouped by number of cylinders.",
ariaDescription,
caption:
"Models of cars: fuel economy vs. engine power, grouped by number of cylinders",
marks: [
Plot.dot(carsFiltered, {
x: "power (hp)",
y: "economy (mpg)",
fill: "cylinders",
symbol: symbolSpec,
r: 5,
opacity: 0.7
})
],
color: {
type: "ordinal",
range: colorRange,
legend: symbolSpec != "cylinders"
},
symbol: {
legend: symbolSpec == "cylinders"
}
});
}
Insert cell
colorsDeuteran = function (colors, simulateDeuteran) {
return colors.map(functionCvd(simulateDeuteran ? "deuteran" : "none", 1));
}
Insert cell
Insert cell
Insert cell
Insert cell
md`${describeEncodings({ blueOrange: true, useSymbols: true })}`
Insert cell
Insert cell
Insert cell
Insert cell
md`${describeCvd({ cvd: { condition: "deuteran", severity: 0.95 } })}`
Insert cell
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