chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "visible");
const tooltip = d3tip()
.html(`<div> Hello </div>`);
svg
.selectAll("circle")
.data(region)
.join("circle")
.filter((d) => d.Number_Dead > 10)
.attr("cx", (d) => x(d.Number_Dead))
.attr("cy", (d) => y(d.Number_of_Survivors))
.attr("r", 2)
.on("mouseover", tooltip.show)
.on("mouseout", tooltip.hide)
.attr("fill", (d) => c(d.Number_Dead))
.style("opacity", 0.1)
.transition()
.duration(3000)
.delay((d, i) => i * 0.2)
.attr("r", (d) => r(d.Number_of_Survivors))
.style("opacity", 1);
svg
.selectAll("text")
.data(region)
.join("text")
.filter((d) => d.Number_Dead > 5)
.text((d) => d.Number_of_Survivors + " | " + d.Number_Dead)
.attr("x", (d) => x(d.Number_Dead - 2.5))
.attr("y", (d) => y(d.Number_of_Survivors - 1));
svg
.append("g")
.call(xAxis)
.append("text")
.attr("fill", "black")//set the fill here
.attr("transform","translate(500, 35)")
.text("Number of Deads");
svg
.append("g")
.call(yAxis)
.append("text")
.attr("fill", "black")//set the fill here
.attr("transform","rotate(-90)")
.attr("y", (margin.left)*-1)
.attr("x",((height/2)*-1)+35)
.text("Number of Survivors");
return svg.node();
}
d3tip = require("d3-tip")
xAxis = (g) =>
g
.attr("class", "x-axis")
.attr("transform", `translate(0, ${height-35})`)
.call(
d3
.axisBottom(x)
.tickValues([10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 200, 250])
)
yAxis = g => g
.attr("class", "y-axis")
.attr("transform", `translate(30, 0)`)
.call(d3.axisLeft(y)
.ticks(4)
)
x = d3
.scaleLinear()
.domain([0, d3.max(region, (d) => d.Number_of_Survivors)])
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain([0, d3.max(region, (d) => d.Number_Dead)])
.range([height - margin.bottom, margin.top])
r = d3
.scaleSqrt()
.domain(d3.extent(region, (d) => d.Number_of_Survivors))
.range([5, 40])
c = d3
.scaleLinear()
.domain(d3.extent(region, (d) => d.Number_Dead))
.range(["#ff0003", "#1b00ff"])
region = TotalMissingMigrantsGlobal.filter(d => d.Region === "Western Asia")
TotalMissingMigrantsGlobal = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vT9EVRWe5vBsYlRgLj2DIRWDcM2fIOXezzEaPt9LcYFum0RN8lrhZN2_aBzFugDmpFibGCAIb-8VLR0/pub?gid=1823294042&single=true&output=csv",d3.autoType)
data = [[7, 120], [240, 40], [120, 150], [90, 13], [140, 15],[210, 62],
[275, 44], [155, 77], [65, 30], [220, 88],[100, 28],[120, 48],[20, 78], [20, 78],[10, 35],[180, 200],[200, 240],[200, 90],[130, 68], [180, 120], [170, 40], [200, 150], [150, 13], [200, 15],[160, 62],
[225, 44], [205, 77]];
width = 1000
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.
