The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Plot.plot({
marks: [
Plot.ruleY([1 / 26], {stroke: "orange"}),
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY([1 / 26], {fill: "orange", fillOpacity: 0.4}),
// Plot.ruleY([1 / 26], {stroke: "orange"}),
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
// Plot.ruleY([0]),
Plot.lineY(power_vs_temperature,
Plot.windowY({x: "date", y: "temperature", k: k, reduce: "mean", stroke: "city"}))
],
color: {
domain: ["Seattle", "Los Angeles"],
legend: true
},
marginLeft: 50
})
Plot.plot({
marks: [
Plot.dot(power_vs_temperature, {x: "temperature", y: "power", fill: "city"})
],
color: {
domain: ["Seattle", "Los Angeles"],
legend: true
},
marginLeft: 50
})
Plot.plot({
facet: {
data: olympians,
y: "sport",
marginLeft: 50
},
marks: [
Plot.frame({stroke: "#aaa", strokeWidth: 0.5}),
Plot.dot(olympians, {x: "weight", y: "sex", fill: "sex", r: 1})
],
height: 400,
marginTop: 0,
marginLeft: 100,
x: {inset: 10, grid: true, label: "weight (kg) →"},
y: {axis: null, inset: 2},
color: {legend: true}
})
import {bls} from "@observablehq/plot-line"
import {power_vs_temperature} from "@observablehq/guide-electricity"
import {Plot} from "@mkfreeman/plot-tooltip"
import {stateage} from "@observablehq/plot-bar"
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.
