Public
Edited
Aug 30, 2024
Insert cell
Insert cell
Plot.plot({
padding: 0,
grid: true,
x: { axis: "top", label: "Season" },
y: { label: "Episode" },
color: { type: "linear", scheme: "BrBG", legend: true },
marks: [
Plot.cell(power_rangers, {
x: "season_num",
y: "episode_num",
fill: "imdb_rating_episode",
inset: 0.5,
title: "episode_title"
}),
Plot.text(power_rangers, {
x: "season_num",
y: "episode_num",
text: (d) => d.imdb_rating_episode?.toFixed(1),
fill: "black"
})
],
width: 900
})
Insert cell
Plot.plot({
padding: 0,
grid: true,
x: { axis: "top", label: "Season" },
y: { label: "Episode" },
color: { type: "linear", range: ["#023c86", "#daaa1a"] },
marks: [
Plot.cell(power_rangers, {
x: "season_num",
y: "episode_num",
fill: "imdb_rating_episode",
inset: 0.5,
title: "episode_title"
})
],
width: 900
})
Insert cell
power_rangers.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
import { Plot } from "@mkfreeman/plot-tooltip"
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