Public
Edited
Nov 22, 2024
1 star
Insert cell
Insert cell
Plot.plot({
x: {label: null, padding: 0.2},
y: {grid: true, label: "Temperature (°C)"},
color: {scheme: "burd", domain: ["winter mean low", "annual mean low", "annual mean high", "summer mean high"], legend: true},
marks: [
Plot.barY(climate, {x: "place", y1: "winterMeanLow", y2: "annualMeanLow", fill: () => "winter mean low"}),
Plot.barY(climate, {x: "place", y1: "annualMeanLow", y2: "annualMean", fill: () => "annual mean low"}),
Plot.barY(climate, {x: "place", y1: "annualMean", y2: "annualMeanHigh", fill: () => "annual mean high"}),
Plot.barY(climate, {x: "place", y1: "annualMeanHigh", y2: "summerMeanHigh", fill: () => "summer mean high"}),
Plot.tickY(climate, {x: "place", y: "annualMean", inset: -4})
]
})
Insert cell
climate = [
{place: "Ontario", winterMeanLow: -9, annualMeanLow: 3, annualMean: 8, annualMeanHigh: 13, summerMeanHigh: 27},
{place: "England", winterMeanLow: 3, annualMeanLow: 8, annualMean: 12, annualMeanHigh: 16, summerMeanHigh: 24},
{place: "Kentucky", winterMeanLow: -3, annualMeanLow: 8, annualMean: 14, annualMeanHigh: 20, summerMeanHigh: 30}
]
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