<!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: 50, right:20, bottom: 60, left: 120};
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")
.attr("width", "100%")
.append("svg")
.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/comparison/bar.csv")
.then(function(data) {
// set X scale and axis
const formater = d3.format("~s")
const xScale = d3.scaleLinear()
.domain([0, d3.max(data, d => +d.displaced_number)]).nice()
.range([0, width]);
svg
.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(xScale).tickSize(0).tickPadding(6).tickFormat(formater).ticks(7))
.call( d => d.select(".domain").remove());
// set Y scale and axis
const yScale = d3.scaleBand()
.domain(data.map( d => d.country_origin))
.range([0, height])
.padding(.25);
svg
.append("g")
.call(d3.axisLeft(yScale).tickSize(0).tickPadding(6));
// set vertical grid line
const GridLine = () => d3.axisBottom().scale(xScale);
svg
.append("g")
.attr("class", "grid")
.call(GridLine()
.tickSize(height,0,0)
.tickFormat("")
.ticks(7));
// create a tooltip
const tooltip = d3.select("body")
.append("div")
.attr("id", "chart")
.attr("class", "tooltip");
// tooltip events
const mouseover = function(d) {
tooltip
.style("opacity", .9)
d3.select(this)
.style("opacity", .5)
};
const mousemove = function(event, d) {
const formater = d3.format(",")
tooltip
.html(formater(d.displaced_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("opacity", 1)
};
// create bar group
const barGroup = svg.selectAll("rect")
.data(data)
.join("rect")
.attr("class", "bar")
.attr("fill", "#0072BC")
.attr("x", xScale(0))
.attr("y", d => yScale(d.country_origin))
.attr("width", d => xScale(d.displaced_number))
.attr("height", yScale.bandwidth())
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave);
// set chart title
svg
.append("text")
.attr("class", "chart-title")
.attr("x", -(margin.left)*0.9)
.attr("y", -(margin.top/2))
.attr("text-anchor", "start")
.text("People displaced across borders by country of origin | 2020");
// set X axis label
svg
.append("text")
.attr("class", "chart-label")
.attr("x", width/2)
.attr("y", height+margin.bottom*0.5)
.attr("text-anchor", "middle")
.text("Displaced population (millions)");
// set source
svg
.append("text")
.attr("class", "chart-source")
.attr("x", -(margin.left)*0.9)
.attr("y", height + margin.bottom*0.7)
.attr("text-anchor", "start")
.text("Source: UNHCR Refugee Data Finder");
// set copyright
svg
.append("text")
.attr("class", "copyright")
.attr("x", -(margin.left)*0.9)
.attr("y", height + margin.bottom*0.9)
.attr("text-anchor", "start")
.text("©UNHCR, The UN Refugee Agency")
})
