Public
Edited
Mar 28, 2024
3 forks
8 stars
toc()
Plot.plot({
marginLeft: 70,
x: {
line: true
},
y: {
line: true
},
marks: [
Plot.ruleY(
countries,
Plot.groupY({ x1: "min", x2: "max" }, { x: "fert_rate", y: "region" })
),
Plot.tickX(countries, {
x: (d) => d.fert_rate + Math.random() * 0.05,
y: "region",
strokeOpacity: 0.4
}),
Plot.dot(countries, Plot.groupY({ x: "mean"}, { x: "fert_rate", y: "region", stroke: "red" }))
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Plot.plot({
marginLeft: 70,
x: {
line: true
},
y: {
line: true
},
marks: [
Plot.barY(
countries,
Plot.groupX({ y: "max" }, { y: "fert_rate", x: "region" })
)
]
})
countries
Plot.plot({
marginLeft: 70,
x: {
line: true
},
y: {
line: true
},
marks: [Plot.rectY(countries, Plot.binX({ y: "count" }, { x: "area" , fill: "region"}))]
})
viewof dimension = Inputs.select(Object.keys(countries[0]), {label: "Select dimension"})
Plot.plot({
height: 300,
x: {
line: true
},
y: {
line: true
},
facet: {
data: countries,
y: "region"
},
marks: [Plot.tickX(countries, { x: dimension, stroke: "region" })]
})
{
return html`${Object.keys(countries[0]).map(
(dimension) =>
Plot.plot({
height: 300,
x: {
line: true
},
y: {
line: true
},
facet: {
data: countries,
y: "region"
},
marks: [Plot.tickX(countries, { x: dimension, stroke: "region" })]
})
)}`
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Plot.plot({
marginLeft: 70,
height: 600,
x: {
line: true
},
y: {
line: true,
padding: 0.2
},
marks: [
Plot.barX(
countries,
Plot.groupY(
{ x1: "min", x2: "max" },
{
x: "fert_rate",
y: "region",
fillOpacity: 0.3,
fill: "steelblue",
sort: { y: "x" }
}
)
),
Plot.tickX(
countries,
Plot.groupY(
{ x: "median" },
{ x: "fert_rate", y: "region", stroke: "red" }
)
),
Plot.text(
countries,
Plot.groupY(
{ x: "median" },
{ x: "fert_rate", y: "region", text: (d) => "median", fill: "red", textAnchor: "start", dx: 3, dy: -30 }
)
),
Plot.tickX(
countries,
Plot.groupY({ x: "mean" }, { x: "fert_rate", y: "region" })
),
Plot.text(
countries,
Plot.groupY(
{ x: "mean" },
{ x: "fert_rate", y: "region", text: (d) => "mean", fill: "black", textAnchor: "start", dx: 3, }
)
),
]
})
Plot.plot({
height: 500,
marginLeft: 80,
x: {
line: true
},
y: {
line: true
},
color: {
legend: true
},
marks: [
Plot.dot(countries, {
x: "fert_rate",
y: "region",
r: "area",
fill: "region",
fillOpacity: 0.4,
stroke: "black"
}),
Plot.tickX(
countries,
Plot.groupY(
{ x: "median" },
{
x: "fert_rate",
y: "region",
strokeWidth: 4,
strokeOpacity: 0.4
}
)
),
Plot.text(
countries,
Plot.groupY(
{ x: "median", text: "median" },
{
x: "fert_rate",
y: "region",
text: "fert_rate",
fontSize: 20,
dx: 15,
dy: -30
}
)
)
]
})
import {countries} from '@ee2dev/plot-party'
import { toc } from "@mbostock/toc"
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.
