The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Plot.plot({
grid: true,
padding: 0.05,
x: { label: "Episode", axis: "top" },
y: { label: "Season" },
color: { type: "linear", scheme: "PiYG", unknown: "#ddd", legend: true },
height: 640,
marks: [
Plot.cell(data, {
x: "number_in_season",
y: "season",
fill: "imdb_rating"
}),
Plot.text(
data,
colorContrast({
// luminance: 60,
x: "number_in_season",
y: "season",
fill: "imdb_rating",
text: (d) => (d.imdb_rating == null ? "-" : d.imdb_rating.toFixed(1)),
title: "title"
})
)
]
})
colorContrast = ({ luminance = 60, ...options }) =>
Plot.initializer(options, (data, facets, channels, scales) => {
const contrast = (color) =>
d3.hcl(color).l > luminance ? "black" : "white";
return {
channels: {
fill: {
...channels.fill,
scale: undefined,
value:
channels.fill == null // when options.fill is a constant color such as "red"
|| scales.color == null // when the scale isn't yet available (e.g. hexbin below)
? Array.from(data).fill(contrast(options.fill))
: Array.from(channels.fill.value, (value) => contrast(scales.color(value)))
}
}
};
})
data = simpsons.data
Plot.plot({
height: 310,
marginBottom: 30,
marks: [
Plot.dot(
cars,
Plot.dodgeY({
x: "economy (mpg)",
fill: "displacement (cc)",
r: 5,
padding: 1
})
),
Plot.dot(
cars,
colorContrast(
Plot.dodgeY({
x: "economy (mpg)",
fill: "displacement (cc)",
r: 2,
padding: 7,
dy: 3
})
)
)
]
})
Plot.plot({
height: 300,
inset: 10,
marks: [
Plot.hexagon(
cars,
Plot.hexbin(
{ fill: "count" },
{
x: "economy (mpg)",
y: "displacement (cc)"
}
)
),
Plot.text(
cars,
colorContrast(
Plot.hexbin(
{ text: "count", fill: "count" },
{
x: "economy (mpg)",
y: "displacement (cc)"
}
)
)
)
],
color: { domain: [1, 13], scheme: "reds" }
})
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.
