artist & programmer
Published
Edited
May 23, 2022
7 stars
<svg>
<circle cx="40" cy="70" r="20"></circle>
<circle cx="80" cy="70" r="10"></circle>
<circle cx="130" cy="70" r="30"></circle>
</svg>
<svg aria-label="Circles" aria-description="three black circles arranged in a horizontal line, each a different size">
<circle cx="40" cy="70" r="20"></circle>
<circle cx="80" cy="70" r="10"></circle>
<circle cx="130" cy="70" r="30"></circle>
</svg>
Plot.rectY(data, {y: d => d.tempmax,x: d => d.datetime, interval: d3.utcDay }).plot({
ariaLabel: "Temperature Chart",
ariaDescription: "Bar chart of daily high temperatures for Denver during April 2022, with temperatures mostly in the 40s to 60s",
})
Plot.plot({
ariaLabel: "Weather Chart",
ariaDescription: "Bar chart of daily high temperatures for Denver during April 2022, showing temperatures mostly in the 40s to 60s and all but three days with partially cloudy conditions",
color: {
legend: true,
type: 'categorical',
scheme: 'set2'
},
x: {
label: "April 2022",
labelAnchor: "center"
},
y: {
label: "Max Temperature (F)"
},
marks: [
Plot.rectY(data, {
x: d => new Date(d.datetime),
interval: d3.utcDay,
y: "tempmax",
fill: "conditions",
})
]
})
Plot.plot({
ariaLabel: "Weather Chart",
ariaDescription: "Bar chart of daily high temperatures for Denver during April 2022, showing temperatures mostly in the 40s to 60s and all but three days with partially cloudy conditions",
color: {
legend: true,
type: 'categorical',
scheme: 'set2'
},
x: {
label: "April 2022",
labelAnchor: "center"
},
y: {
label: "Max Temperature (F)"
},
marks: [
Plot.rectY(data, {
x: d => new Date(d.datetime),
interval: d3.utcDay,
y: "tempmax",
fill: "conditions",
title: d => `${new Date(d.datetime).toLocaleString("en-US", dateOptions)}: ${d.tempmax} degrees and ${d.conditions.toLowerCase()} conditions.`
})
]
})
Inputs.table(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.
