Published
Edited
Jul 7, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = FileAttachment("seattle-weather.csv").csv({typed: true})
Insert cell
Insert cell
Inputs.table(data)
Insert cell
Insert cell
Insert cell
Plot // Plot is available in Observable by default
Insert cell
Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
marks: [
Plot.line(data, {x: "date", y: "temp_max", stroke: "red"}),
Plot.line(data, {x: "date", y: "temp_min", stroke: "blue"}),
// replace … by the field names.
]
})

Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
grid: true,
width: width,
marks: [
Plot.line(data, Plot.windowY({x: "date", y: "temp_max", stroke: "red", k:28})),
Plot.line(data, Plot.windowY({x: "date", y: "temp_min", stroke: "blue", k:28})),
Plot.line(data, {x: "date", y: "temp_max", stroke: "pink"}),
Plot.line(data, {x: "date", y: "temp_min", stroke: "grey"}),
]
})

Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
marks: [
Plot.areaY(data, {x: "date", y1: "temp_max", y2: "temp_min", fill: "red"}) // replace … by the field names.
]
})

Insert cell
Insert cell
Insert cell
// type your code here

Plot.plot({
marks: [
Plot.lineY(data, {x: "date", y: (d) => (d["temp_max"] + d["temp_min"]) / 2 }) // replace … by the field names
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
grid: true,
width: width,
marks: [
Plot.rectY(data, Plot.binX({ y: "sum" }, {
x: "date",
y: "precipitation",
stroke: "#111",
thresholds: d3.timeMonth,
insetLeft: 2,
insetRight: 2
})),
]
})
Insert cell
Insert cell
Insert cell
// type your code here


Insert cell
Insert cell
Insert cell
// type your code here


Insert cell
Insert cell
Insert cell
// type your code here


Insert cell
Insert cell
Insert cell
// type your question here


Insert cell
// type your code here


Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {Q, A, styles, viewof showAll} with { data } from "@observablehq/plot-exploration-penguins";
Insert cell
styles
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