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.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
]
})
Plot.plot({
x: {
type: "log"
},
marks: [
Plot.arrow(citywages, {
x1: "POP_1980",
y1: "R90_10_1980",
x2: "POP_2015",
y2: "R90_10_2015",
bend: true
})
]
})
energy = FileAttachment("us_energy.csv").csv({typed: true})
energy
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.line(energy, {x: "year", y: "quadrillion_btu", z: "type"})
]
})
Plot.plot({
marks: [
Plot.line(energy, {x: "year", y: "quadrillion_btu", z: "type", stroke: "type"}),
Plot.dot(energy, {x: "year", y: "quadrillion_btu",
fill: "type",
stroke: "white",
tip: true,
r: 4}),
Plot.frame()
],
x: { tickFormat: "Y", type: "linear", label: "Year"},
y: { domain: [0, 45], label: "Quadrillion BTU"},
color: {scheme: "Accent", legend: true},
grid: true
})
Plot.plot({
marks: [
Plot.dot(penguins, {x: "flipper_length_mm", y: "body_mass_g",
fill: "species",
stroke: "white",
tip: true,
r: "flipper_length_mm"})
],
r:{domain: d3.extent(penguins, d => d.flipper_length_mm),range:[1,10]},
color: {legend: true, domain:["Adelie","Chinstrap","Gentoo"],range: ["purple","teal","orange"]}
})
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.
