Designer, writer, and developer exploring how to tell more engaging stories with interactive, data-driven experiences.
Public
Edited
Jul 21, 2023
marine_csv_sample
X
Time of Observation
Y
Air Temperature
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.lineY(marine_csv_sample, {
x: "Time of Observation",
y: "Air Temperature",
tip: true
})
]
})
Plot.plot({
x: {
label: "Date"
},
y: {
label: "Temperature",
grid: true
},
marks: [
Plot.ruleY([0]),
Plot.line(marine_csv_sample, {
x: "Time of Observation",
y: "Air Temperature",
stroke: "#4e79a7",
tip: true
}),
Plot.line(marine_csv_sample, {
x: "Time of Observation",
y: "Dew Point Temperature",
stroke: "#e15759",
tip: true
})
]
})
Plot.line(
marine_csv_sample.map((d) => [d["Time of Observation"], d["Air Temperature"]])
).plot()
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(marine_csv_sample, {
x: "Time of Observation",
y: "Sea Level Pressure"
})
]
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(marine_csv_sample, {
x: "Time of Observation",
y: "Air Temperature"
})
]
})
Marine_CSV_sample.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
normals_dly_20062020_sample
X
DLY-PRCP-PCTALL-GE050HI
Y
—
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Normals_DLY_2006-2020_sample.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
