<!DOCTYPE html>
<meta charset="utf-8">
<!-- Include d3 library -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- Create a container to host the chart -->
<div id="viz_container"></div>
// set the dimensions and margins of the graph
const margin = {top: 30, right: 20, bottom: 30, left: 20};
const width = 450 - margin.left - margin.right;
const height = 350 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3.select("#viz_container")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", "0 0 450 350")
.attr("preserveAspectRatio", "xMinYMin")
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// parse the Data
d3.csv("https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/part_to_a_whole/treemap_d3.csv")
.then(function(data){
data.forEach(function(d) {
d.staff_number = +d.staff_number;
d.enabled = true;
});
const total = d3.sum(data.map(function(d) {
return (d.enabled) ? d.staff_number : 0; }));
// reshape data
const treeData = d3.stratify()
.id(d => d.region)
.parentId(d => d.parent)
(data);
treeData.sum(d => d.staff_number)
d3.treemap()
.size([width, height])
.padding(2)
(treeData);
// create a tooltip
const tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip");
// tooltip events
const mouseover = function(d) {
tooltip
.style("opacity", 1)
d3.select(this)
.style("opacity", .5)
};
const mousemove = function(event,d) {
f = d3.format(",")
tooltip
.html("Number of staff: " + `${f(d.data.staff_number)}`)
.style("top", event.pageY - 10 + "px")
.style("left", event.pageX + 10 + "px")
};
const mouseleave = function(d) {
tooltip
.style("opacity", 0)
d3.select(this)
.style("stroke", "none")
.style("opacity", 1)
};
// create rectangle
svg
.selectAll("rect")
.data(treeData.leaves())
.join("rect")
.attr('x', d => d.x0)
.attr('y', d => d.y0)
.attr('width', d => d.x1 - d.x0)
.attr('height', d=> d.y1 - d.y0)
.style("stroke", "none")
.style("fill", "#0072BC")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave);
// add labels to the graph
svg
.selectAll("text-number")
.data(treeData.leaves())
.join("text")
.attr("class", "tree-label")
.attr("x", d => d.x0+5)
.attr("y", d => d.y0+15)
.text(d => Math.round(1000 * d.data.staff_number / total) / 10 + "%")
.attr("font-size", "10px")
.attr("fill", "#ffffff");
svg
.selectAll("text-region")
.data(treeData.leaves())
.join("text")
.attr("class", "tree-label")
.attr("x", d => d.x0+5)
.attr("y", d => d.y0+30)
.text(d => d.data.region)
.attr("font-size", "10px")
.attr("fill", "#ffffff");
// set title
svg
.append("text")
.attr("class", "chart-title")
.attr("x", 0)
.attr("y", -(margin.top)/1.5)
.attr("text-anchor", "start")
.text("UNHCR global workforce by region | 2021");
// set source
svg
.append("text")
.attr("class", "chart-source")
.attr("x", 0)
.attr("y", height + margin.bottom*0.4)
.attr("text-anchor", "start")
.text("Source: UNHCR")
// set copyright
svg
.append("text")
.attr("class", "copyright")
.attr("x", 0)
.attr("y", height + margin.bottom*0.7)
.attr("text-anchor", "start")
.text("©UNHCR, The UN Refugee Agency")
})
