Plot.dotX(d3.range(100), {
fill: "currentColor",
tip: true,
channels: { myColor: { value: Math.random, scale: "color" } }
}).plot({ height: 80 })
Plot.dot(cars, {
x: "economy (mpg)",
y: "weight (lb)",
fill: Math.random,
stroke: Math.random,
z: null,
tip: true,
channels: {
custom1: { value: Math.random, scale: "color" },
custom2: { value: Math.random, scale: "color" }
}
}).plot({ height: 132 })
Plot.dot(
cars,
Plot.map(
{
fill: Plot.normalize("deviation")
},
{
x: "economy (mpg)",
y: "weight (lb)",
fill: "power (hp)",
z: null,
tip: true,
channels: Object.fromEntries(
aspects.map((key) => {
const V = Plot.valueof(cars, key);
const M = d3.mean(V);
const D = d3.deviation(V);
return [key, { value: V.map((d) => (d - M) / D), scale: "color" }];
})
)
}
)
).plot({
color: {
domain: [-2, 2],
scheme: "RdYlBu",
label: null // 🌶 needed if we want several lines in the tip
}
})
import { data } from "@d3/parallel-coordinates"
aspects = data.columns.slice(1)
data
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.
