{
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", tip: true })
]
})
)}`;
}
groupedCountries = d3.groups(countries, (d) => d.region)
{
return html`${groupedCountries.map((countries) =>
Plot.plot({
marginLeft: 200,
height: 1000,
inset: 5,
marks: [
Plot.frame(),
Plot.dot(countries[1], {
x: "area",
y: "country",
stroke: "region",
tip: true
})
]
})
)}`;
}
countries
orientation === "vertical"
? html`<div>${plot1()}${plot2()}</div>`
: html`<div style="display: flex">${plot1()}${plot2()}</div>`
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.
