Plot.plot({
y: {
tickFormat: "s"
},
marks: [
Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry"}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.cell(weather.slice(-365), {
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: "temp_max"
})
]
})
Plot.plot({
marks: [
Plot.areaY(aapl, {x: "Date", y: "Close"}),
Plot.ruleY([0])
]
})
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
energy = FileAttachment("us_energy.csv").csv({typed: true})
energy
Type Table, then Shift-Enter. Ctrl-space for more options.
// Marks take two arguments: data and options
// Channels are mark options that can be used to encode data
// Scales convert an abstract value such as time or temperature to a visual value such as x or y position or color
// Scales are defined by their domain (input values) and range (the visual values that the scale generates as output)
// z channel separtes the lines by type
// stroke channel
Plot.plot({
marks: [
Plot.line(energy, {x: "year", y: "quadrillion_btu", z:"type"})
]
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(energy, {x: "year", y: "quadrillion_btu", stroke: "type", tip:true}),
Plot.dot(energy, {x: "year", y: "quadrillion_btu", stroke: "white", fill:"type"})
]
})
Plot.plot({
marks: [
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
fill: "species",
r: "flipper_length_mm" // chose what to use on the r channel
})
],
// configuration of the r channel
// domain -> input, range -> output
r: {
domain: d3.extent(penguins, (d) => d.flipper_length_mm),
range: [1, 10]
},
color: {
domain: ["Adelie", "Chinstrap", "Gentoo"],
range: ["purple", "teal", "orange"],
legend: true
}
})
import { showMe } from "@observablehq/show-me"
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.
