Public
Edited
Mar 4
1 fork
viewof country_picker = Inputs.select(d3.group(ship_data, d => d.ship_country_build), {label: "Country of origin"})
viewof summary = Plot.plot({
width: window.innerWidth, // Set width dynamically to full window width
height: 400, // Adjust height as needed
color: { scheme: "Category10", legend: true },
x: {
label: "Year of build",
tickFormat: d => d.toString().replace(/,/g, '')
},
y: {
label: "Number of ships"
},
marks: [
Plot.rectY(
country_picker,
Plot.binX(
{ y: "distinct" },
{
x: "ship_build_period",
y: "id",
fill: "ship_country_build",
fill: "#e4066e",
tip: {
format: d => `Ship Build Period: ${d.x}\nNumber of Ships: ${d.y}\nCountry: ${d.fill}`
}
}
)
),
Plot.ruleY([0])
]
});
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.
