dataEvent = ((selectEvent === "all") ? dataNoEU : dataNoEU.filter(d => d.icon === selectEvent));
// if(select === "all") {return data} else {data.filter(d => d.icon === select)}
// dataSelect = select ? "all" : data, else {data.filter(d => d.icon === select)}
dataSelect = ((selectCountry === "all") ? dataEvent : dataEvent.filter(d => d.who === selectCountry));
// if(select === "all") {return data} else {data.filter(d => d.icon === select)}
// dataSelect = select ? "all" : data, else {data.filter(d => d.icon === select)}
plot = visibility().then(() =>
addAnimation(
Plot.plot({
marginLeft: 40,
height: 1800,
x: {label: null,
text: null,
axis: null},
y: {label: null,
// format: "%Y",
padding: 0},
height: 1200,
// height: dataSelect.length * 20,
// width: 1200,
// marks
marks: [
// Plot.frame(),
// axes
Plot.axisY({ticks: "year"}),
// general markers
Plot.ruleY(dataEU, {x: "who", y: "start", stroke: "#cccccc"}),
Plot.text(dataEULabel, Plot.dodgeX("right", {x: "who",
y: "startLabel",
text: d => d.desc,
textAnchor: "end",
stroke: "white",
strokeWidth: 5,
fill: "black",
lineWidth: 20})),
// tooltip and highlighted dot
Plot.dot(dataSelect, Plot.dodgeX("middle", {x: "who",
y: "start",
// fill: "who",
fill: d => d.icon !== "other" ? d.who : "",
stroke: d => d.icon === "other" ? d.who : "",
symbol: "icon",
// fill: "who",
// stroke: null,
opacity: 0,
r: "size",
title: d => d.desc,
padding: 3,
tip: "xy"})),
],
fill: {
range: ["#df3144", "#1d3956", "#309ebe", "#ffffff"],
domain: ["Burkina Faso", "Mali", "Niger", ""],
legend: true, // Add the legend
label: "Type of event" // Update legend label
},
color: {
range: ["#1d3956", "#309ebe", "#aaaaaa", "#ffffff"],
domain: ["Burkina Faso", "Mali", "Niger", ""],
legend: true, // Add the legend
label: "Country" // Update legend label
},
r: {
range: [0, 11],
},
symbol: {
range: ["triangle", "diamond", "square", "circle"],
domain: ["Coup", "Sanction", "Statement", "other"],
legend: true
}
}),
{ type: "path", attribute: "opacity", endValue: 1, delay: 5 } // options for the animation
// { type: "path", attribute: "r", endValue: 11, delay: 20 } // options for the animation
))
import {addAnimation} from "@mkfreeman/plot-animation"
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.
