The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Jan 25, 2023
8 forks
55 stars
10
Plot for Matplotlib Users
Overview
ScatterplotsHistograms
Also listed in…
Examples for Data Analysts
Observable Plot
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
simpleStatistics = require("simple-statistics@7")
Insert cell
simpleStatistics.ckmeans([1, 1, 2, 3, 5, 6, 7], 2)
Insert cell
Insert cell
Insert cell
ramp(t => `hsl(${t * 360}, 100%, 50%)`)
Insert cell
Insert cell
Plot.plot({
marginRight: 85,
facet: {
data: events,
y: "brand",
marginRight: 85
},
nice: true,
marks: [
Plot.frame(),
Plot.dot(events, {x: "date", y: "price_in_usd", fill: "black", r: 1})
]
})
Insert cell
Insert cell
{
const dimensions = ["date", "value", "count"];
return html`<div style="display:flex; flex-wrap: wrap;">
${dimensions
.map((y) =>
dimensions.map((x) =>
Plot.plot({
marginLeft: 50,
marginTop: 40,
width: width / 3 - 2,
height: width / 3 - 2,
marks: [
Plot.frame(),
x === y
? Plot.rectY(data, Plot.binX({ y: "count" }, { x, y, fill: "#666", insetTop: 10 }))
: Plot.dot(data, { x, y, fill: "steelblue" })
],
nice: true
})
)
)
.flat()}`;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
x: {
domain: [-4, 4]
},
marks: [
Plot.tickX({length: 500}, {x: d3.randomNormal(), strokeOpacity: 0.2}),
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.legend({opacity: {domain: [0, 10]}})
Insert cell
Insert cell
Insert cell
Insert cell
aapl = FileAttachment("AAPL@1.csv").csv({typed: true})
Insert cell
Insert cell
Plot.plot({
height: 240,
x: {line: true},
y: {zero: true, grid: true},
marks: [
Plot.line(aapl, { x: "date", y: "close", filter: (d) => d.date <= date0 })
]
})
Insert cell
Insert cell
Insert cell
weather = FileAttachment("seattle-weather.csv").csv({typed: true})
Insert cell
Plot.plot({
nice: true,
grid: true,
height: 280,
color: { legend: true, scheme: "category10" },
y: { label: "↑ temp. (°C)" },
marks: [
Plot.line(
weather,
Plot.windowY({
k: 7,
x: "date",
y: "temp_min",
z: null,
stroke: "weather",
strokeWidth: 3
})
),
Plot.line(
weather,
Plot.windowY({
k: 7,
x: "date",
y: "temp_max",
z: null,
stroke: "weather",
strokeWidth: 3
})
)
],
caption: "Weather in Seattle, low and high temperature smoothed over a week."
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Aggregate the data
data = aq.from(events)
.derive({date: aq.escape(d => d3.utcDay(d.date))})
.groupby("date", "brand")
.rollup({value: d => aq.op.sum(d.price_in_usd), count: aq.op.count()})
.orderby("date", "brand")
.objects()
Insert cell
Insert cell
import {Scrubber} from "@mbostock/scrubber"
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