viewof plotContainer = {
// Create a container for the plot
const container = document.createElement("div");
container.style = "width: 800px; height: 900px;"; // Set dimensions or styling as needed
// Draw the initial plot with all data
//drawPlot(companySelect, container); // Pass the container to the draw function
updatePlot(companySelect, container);
return container;
}
function drawPlot(data, container) {
const plot = Plot.plot({
width: 1050,
projection: {
type: "azimuthal-equidistant",
rotate: [0, -90],
// Note: 0.625° corresponds to max. length (here, 0.5), plus enough room for the labels
domain: d3.geoCircle().center([0, 90]).radius(6.25)()
},
color: { legend: true },
marks: [
// grey discs
Plot.geo([5, 4, 3, 2, 1], {
geometry: (r) => d3.geoCircle().center([0, 90]).radius(r)(),
stroke: "black",
fill: "black",
strokeOpacity: 0.3,
fillOpacity: 0.03,
strokeWidth: 0.5
}),
// white axes
Plot.link(longitude.domain(), {
x1: longitude,
y1: 90 - 5.7,
x2: 0,
y2: 90,
stroke: "white",
strokeOpacity: 0.5,
strokeWidth: 2.5
}),
// tick labels
Plot.text([3, 4, 5], {
x: 180,
y: (d) => 90 - d,
dx: 2,
textAnchor: "start",
text: (d) => `${20 * d}%`,
fill: "currentColor",
stroke: "white",
fontSize: 8
}),
// axes labels
Plot.text(longitude.domain(), {
x: longitude,
y: 90 - 5.7,
text: Plot.identity,
fontSize: 15,
lineWidth: 5
}),
() =>
svg`<style>
g[aria-label=area] path {fill-opacity: 0.1; transition: fill-opacity .2s;}
g[aria-label=area]:hover path:not(:hover) {fill-opacity: 0.05; transition: fill-opacity .2s;}
g[aria-label=area] path:hover {fill-opacity: 0.3; transition: fill-opacity .2s;}
`,
// areas
Plot.area(data, {
// ... (your existing area configuration),
x1: ({ key }) => longitude(key),
y1: ({ value }) => 90 - value,
x2: 0,
y2: 90,
fill: "Company",
stroke: "Company",
curve: "cardinal-closed"
}),
Plot.dot(data, { x: "key", y: "value", fill: "Company" }),
// interactive labels
Plot.text(
data,
Plot.pointer({
x: ({ key }) => longitude(key),
y: ({ value }) => 90 - value,
text: (d) => `${(20 * d.value).toFixed(0)}%`,
textAnchor: "start",
dx: 4,
fill: "currentColor",
stroke: "white",
maxRadius: 20
})
)
]
});
// Clear the previous plot and append the new one
container.innerHTML = "";
container.appendChild(plot);
}
function updatePlot(company, container) {
const filteredDots =
company === "All" ? dots : dots.filter((d) => d.Company === company);
// Ensure 'drawPlot' considers 'container' if necessary
drawPlot(filteredDots, container);
}
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.
