Unlisted
Edited
Sep 23, 2024
1 star
data = test
viewof test = Plot.dot(
penguins,
Plot.brush({
tip: true,
x: "culmen_length_mm",
y: "culmen_depth_mm",
stroke: "currentColor",
fill: "#fff",
unselected: { strokeOpacity: 0.5 },
selected: { fill: "species" }
})
).plot({title:"test"})
Plot.dot(
penguins,
Plot.brush({
x: "culmen_length_mm",
y: "culmen_depth_mm",
stroke: "currentColor",
fill: "#fff",
unselected: { strokeOpacity: 0.5 },
selected: { fill: "species" }
})
).plot({title:"test"})
faceted
Object.fromEntries(Object.entries(faceted).filter(([d]) => d[0]> "9"))
viewof faceted = Plot.dot(
penguins,
Plot.brush({
x: "culmen_length_mm",
y: "culmen_depth_mm",
stroke: "currentColor",
fill: "#fff",
fy: "species",
unselected: { strokeOpacity: 0.5 },
selected: { fill: "island" }
})
).plot({x: {type:"log"}})
Plot.rectY(
penguins,
Plot.brushX(
Plot.binX(
{y: "count"},
{
x: "body_mass_g",
thresholds: 40,
unselected: {opacity: 0.1},
}
)
)
).plot()
viewof selection = Plot.plot({
marks: [
Plot.dot(
cars,
Plot.brush({
x: "power (hp)",
y: "economy (mpg)",
// r: 10,
unselected: {opacity: 0.1},
selected: { r: 3.5, fill: "cylinders" }
})
)
]
})
Plot.plot({
marks: [
Plot.dot(
cars,
{
x: "power (hp)",
y: "economy (mpg)",
r: 2, fill: "#555"
}
),
Plot.linearRegressionY(
cars,
Plot.brushX({
x: "power (hp)",
y: "economy (mpg)",
// r: 10,
unselected: {opacity: 0},
})
)
]
})
selection
viewof cells = Plot.cell(
penguins,
Plot.brush(
Plot.group(
{ fill: "count" },
{ x: "species", y: "sex", unselected: { fillOpacity: 0.3 } }
)
)
).plot()
cells
Inputs.table(selection)
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,
Plot.brush({
x1: "POP_1980",
y1: "R90_10_1980",
x2: "POP_2015",
y2: "R90_10_2015",
unselected: { stroke: "#ccc" },
stroke: (d) => d.R90_10_2015 - d.R90_10_1980,
markerEnd: "arrow"
})
), Plot.text(metros, {
x: "POP_2015",
y: "R90_10_2015",
filter: "highlight",
text: "nyt_display",
fill: "currentColor",
stroke: "white",
dy: -8
}),
]
})
import {metros} from "@observablehq/plot-link-variation-chart"
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.
