chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "visible");
svg
.selectAll("circle")
.data(TotalMissingMigrantsGlobal)
.join("circle")
.filter((d) => d.Number_of_Survivors > 10)
.attr("cx", (d) => x(d.Number_Dead))
.attr("cy", (d) => y(d.Number_of_Survivors))
.attr("r", (d) => r(d.Number_of_Survivors))
.attr("fill", (d) => c(d.Number_of_Survivors));
svg
.selectAll("text")
.data(TotalMissingMigrantsGlobal)
.join("text")
.filter((d) => d.Number_of_Survivors > 400)
.text((d) => d.Number_of_Survivors + " | " + d.Number_Dead)
.attr("x", (d) => x(d.Number_Dead - 2))
.attr("y", (d) => y(d.Number_of_Survivors - 2));
return svg.node();
}
x = d3
.scaleLinear()
.domain([0, d3.max(TotalMissingMigrantsGlobal, (d) => d.Number_Dead)])
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain([0, d3.max(TotalMissingMigrantsGlobal, (d) => d.Number_of_Survivors)])
.range([height - margin.bottom, margin.top])
r = d3
.scaleSqrt()
.domain(d3.extent(TotalMissingMigrantsGlobal, (d) => d.Number_of_Survivors))
.range([2, 30])
c = d3
.scaleLinear()
.domain(d3.extent(TotalMissingMigrantsGlobal, (d) => d.Number_of_Survivors))
.range(["#022859", "#f20666"])
TotalMissingMigrantsGlobal = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vT9EVRWe5vBsYlRgLj2DIRWDcM2fIOXezzEaPt9LcYFum0RN8lrhZN2_aBzFugDmpFibGCAIb-8VLR0/pub?gid=1823294042&single=true&output=csv",d3.autoType)
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.
