Public
Edited
Apr 14, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
simpsons.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
simpsons = FileAttachment("simpsons.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
height: 640, // this is just the height of the plot, if the plot is squished play around with this value.
width: 750,
padding: 0.05, // This is the text padding around the individual plot squares

grid: true,
x: {
axis: "top", // puts the x axis label at the top rather than traditional bottom
label: "Season"
},
y: {
label: "Episode"
},
color: {
type: "linear", // linear scale, follows an order of sequence
scheme: "PiYG" // nice looking colours
},
marks: [
Plot.cell(simpsons, {
x: "season", // x-axis info
y: "number_in_season", // y-axis info
fill: "imdb_rating", // cell fill info
}),
Plot.text(simpsons, {
x: "season",
y: "number_in_season",
text: d => d.imdb_rating?.toFixed(1),
title: "title"
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
EPL Data - Final@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
epl = FileAttachment("EPL Data - Final@1.csv").csv({typed: true})
Insert cell
Plot.plot({
height: 650,
width: 1250,
grid: false,
marginLeft: 160,
x: {
axis: "top",
label: "Season",
labelOffset: 30,
},
y: {
label: "Team",
},
color: {
type: "linear",
scheme: "PiYG"
},
marks: [
Plot.cell(epl, {
x: "Season",
y: "Team",
fill: "Pts",
}),
Plot.text(epl, {
x: "Season",
y: "Team",
text: d => d.Pts,
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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