{ const width = 700, height = 450; const margin = {top: 30, right: 30, bottom: 50, left: 60}; const colorScale = d3.scaleOrdinal() .domain(d3.range(kClusters)) .range(d3.schemeSet1); const xValues = [0, 1, 2, 3, 4, 5, 6, 10, 15, 20, 30, 40, 50, 70, 100, 200, 400, 600, 1000, 2500, 5000, 10000, 20000, 40000, 60000]; const yValues = [0, 1, 2, 3, 4, 5, 10, 15, 20, 30, 40, 50, 70, 100, 200, 300, 400, 500, 700, 1000, 2000, 3000, 4000, 5000, 10000, 15000, 20000]; const getClusterLabel = c => { if (c.id === "None") return "Unclassified"; if (c.maxFat < 100) return "Relatively safe / low conflict"; if (c.maxFat < 1000) return "Moderate risk"; if (c.maxFat < 5000) return "Dangerous"; if (c.maxFat < 20000) return "Very dangerous"; return "Extreme conflict zone"; }; const x = d3.scaleSymlog() .domain([0, d3.max(fatalities, d => +d.number_of_reported_fatalities)]) .range([margin.left, width - margin.right]); const y = d3.scaleSymlog() .domain([0, d3.max(fatalities, d => +d.number_of_reported_civilian_fatalities)]) .range([height - margin.bottom, margin.top]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); d3.select("body").selectAll(".my-tooltip").remove(); const tooltip = d3.select("body") .append("div") .attr("class", "my-tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid #999") .style("border-radius", "4px") .style("padding", "8px") .style("font-size", "12px") .style("box-shadow", "0 2px 6px rgba(0,0,0,0.2)") .style("pointer-events", "none") .style("opacity", 0) .style("z-index", 9999); svg.append("g") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7) .selectAll("line") .data(xValues) .join("line") .attr("x1", d => x(d)) .attr("x2", d => x(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom); svg.append("g") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7) .selectAll("line") .data(yValues) .join("line") .attr("y1", d => y(d)) .attr("y2", d => y(d)) .attr("x1", margin.left) .attr("x2", width - margin.right); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3.axisBottom(x) .tickValues(xValues) .tickFormat(d3.format(",.0f")) ) .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em"); svg.append("text") .attr("x", width - margin.right) .attr("y", height - margin.bottom - 6) .attr("fill", "black") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Total Fatalities →"); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3.axisLeft(y) .tickValues(yValues) .tickFormat(d3.format(",.0f")) ); svg.append("text") .attr("x", margin.left + 10) .attr("y", margin.top) .attr("fill", "black") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("↑ Civilian Fatalities"); const centroidGroup = svg.append("g") .selectAll("g") .data(kmeansResult.centroids) .join("g") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`); centroidGroup.append("line") .attr("x1", -8) .attr("y1", -8) .attr("x2", 8) .attr("y2", 8) .attr("stroke", "black") .attr("stroke-width", 3); centroidGroup.append("line") .attr("x1", -8) .attr("y1", 8) .attr("x2", 8) .attr("y2", -8) .attr("stroke", "black") .attr("stroke-width", 3); centroidGroup.append("circle") .attr("r", 4) .attr("fill", d => colorScale(d.id)) .attr("stroke", "white") .attr("stroke-width", 1); svg.append("g") .selectAll("circle") .data(kmeansResult.points) .join("circle") .attr("cx", d => x(d.total)) .attr("cy", d => y(d.civilian)) .attr("r", 6) .attr("fill", d => d.cluster !== null ? colorScale(d.cluster) : "#ccc") .attr("opacity", 0.8) .attr("stroke", "#fff") .attr("stroke-width", 1.5) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .attr("r", 8) .attr("opacity", 1); tooltip .style("opacity", 1) .html(` ${d.country}
Total amount of fatalities: ${d.total.toLocaleString()}
Amount of civilian fatalities: ${d.civilian.toLocaleString()}
Cluster: ${d.cluster !== null ? d.cluster + 1 : "No"} `); }) .on("mousemove", function(event) { tooltip .style("left", `${event.pageX + 12}px`) .style("top", `${event.pageY - 28}px`); }) .on("mouseout", function() { d3.select(this) .attr("r", 6) .attr("opacity", 0.8); tooltip.style("opacity", 0); }); const clustersInfo = d3.groups(kmeansResult.points, d => d.cluster) .map(([id, points]) => ({ id: id !== null ? id + 1 : "None", count: points.length, minFat: d3.min(points, d => d.total), maxFat: d3.max(points, d => d.total) })) .sort((a, b) => { if (a.id === "None") return 1; if (b.id === "None") return -1; return a.id - b.id; }); const container = document.createElement("div"); container.style.display = "flex"; container.style.gap = "20px"; container.style.alignItems = "flex-start"; const chartDiv = document.createElement("div"); chartDiv.style.flex = "3"; chartDiv.style.background = "white"; chartDiv.style.border = "1px solid #eee"; chartDiv.appendChild(svg.node()); const statsDiv = document.createElement("div"); statsDiv.style.flex = "1"; statsDiv.style.minWidth = "230px"; statsDiv.style.background = "#f9f9f9"; statsDiv.style.padding = "15px"; statsDiv.style.borderRadius = "8px"; statsDiv.style.fontSize = "14px"; statsDiv.style.lineHeight = "1.45"; const title = document.createElement("h3"); title.textContent = "Cluster's description"; title.style.marginTop = "0"; statsDiv.appendChild(title); clustersInfo.forEach(c => { const block = document.createElement("div"); block.style.marginBottom = "14px"; block.innerHTML = ` Cluster ${c.id}:
${getClusterLabel(c)}
Total amount of countries: ${c.count}
Range: ${c.minFat.toLocaleString()} – ${c.maxFat.toLocaleString()} fatalities `; statsDiv.appendChild(block); }); container.appendChild(chartDiv); container.appendChild(statsDiv); return container; }