The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Jun 14, 2023
Paused
1 fork
Importers
6 stars
viewof selection = Plot.plot({
marks: [
Plot.dot(penguins, { x: "culmen_length_mm", y: "culmen_depth_mm" }),
Plot.dot(penguins, Plot.brush({ x: "culmen_length_mm", y: "culmen_depth_mm", fill: "species", stroke:"black" }))
]
})
Inputs.table(selection.length ? selection : Object.assign([], {columns: penguins.columns}))
viewof logical = Plot.plot({
marks: [
Plot.dot(penguins, { x: "culmen_length_mm", y: "culmen_depth_mm" }),
Plot.dot(penguins, Plot.brush({ x: "culmen_length_mm", y: "culmen_depth_mm", fill: "species", stroke:"black", selectionMode: "extent" }))
]
})
logical
viewof facetedSelection = Plot.plot({
facet: {data: penguins, x: "species"},
marks: [
Plot.dot(penguins, { x: "culmen_length_mm", y: "culmen_depth_mm" }),
Plot.dot(penguins, Plot.brush({ x: "culmen_length_mm", y: "culmen_depth_mm", fill: "species", stroke:"black" }))
]
})
facetedSelection
viewof bandSelection = Plot.plot({
marks: [
Plot.cell(penguins, Plot.group({fill: "count"}, { x: "species", y: "sex", fillOpacity: 0.3 })),
Plot.cell(penguins, Plot.brush(Plot.group({fill: "count"}, { x: "species", y: "sex" }))),
]
})
bandSelection
viewof rectSelectionX = Plot.plot({
marks: [
Plot.rectY(
penguins,
Plot.binX({ y: "count" }, { x: "body_mass_g", fillOpacity: 0.5, thresholds: 20 })
),
Plot.rectY(
penguins,
Plot.brushX(Plot.binX({ y: "count" }, { x: "body_mass_g", thresholds: 20 }))
)
]
})
rectSelectionX
viewof rectSelectionXContinuous = Plot.plot({
marks: [
Plot.rectY(
penguins,
Plot.binX(
{ y: "count" },
{ x: "body_mass_g", fillOpacity: 0.5, thresholds: 20 }
)
),
Plot.barX(
d3.sort(penguins, (d) => d.body_mass_g),
{
...Plot.brushX({
x1: "body_mass_g",
x2: Plot.valueof(
d3.sort(penguins, (d) => d.body_mass_g),
"body_mass_g"
).slice(1)
}),
fill: "steelblue",
stroke: () => "steeblue",
mixBlendMode: "color",
}
)
//Plot.dot(penguins, Plot.dodgeY(Plot.brushX({ x: "body_mass_g" })))
]
})
mutable debug = null
rectSelectionXContinuous
viewof rectSelectionY = Plot.plot({
marks: [
Plot.rectX(
penguins,
Plot.binY(
{ x: "count" },
{ y: "body_mass_g", fillOpacity: 0.5, thresholds: 20 }
)
),
Plot.rectX(
penguins,
Plot.brushY(Plot.binY({ x: "count" }, { y: "body_mass_g", thresholds: 20 }))
)
]
})
rectSelectionY
viewof linkSelection = Plot.plot({
grid: true,
inset: 10,
x: {
type: "log",
label: "Population →"
},
y: {
label: "↑ Inequality",
ticks: 4
},
color: {
scheme: "BuRd",
label: "Change in inequality from 1980 to 2015",
legend: true,
tickFormat: "+f"
},
marks: [
Plot.link(metros, {
x1: "POP_1980",
y1: "R90_10_1980",
x2: "POP_2015",
y2: "R90_10_2015",
stroke: (d) => d.R90_10_2015 - d.R90_10_1980,
strokeOpacity: 0.2,
markerEnd: "arrow"
}),
Plot.text(metros, {
x: "POP_2015",
y: "R90_10_2015",
filter: "highlight",
text: "nyt_display",
fill: "currentColor",
stroke: "white",
dy: -8
}),
Plot.link(metros, Plot.brush({
x1: "POP_1980",
y1: "R90_10_1980",
x2: "POP_2015",
y2: "R90_10_2015",
stroke: (d) => d.R90_10_2015 - d.R90_10_1980,
markerEnd: "arrow"
})),
]
})
Plot.plot({
projection: "equal-earth",
marks: [
Plot.geo(countries, Plot.brush(Plot.centroid({ fill: "red" }))),
Plot.geo(countries)
]
})
import {countries} from "@visionscarto/geo"
import {metros} from "@observablehq/plot-link-variation-chart"
Plot = require(await FileAttachment("plot.umd.min.js").url())
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.
