31:T74b,refugee_map = { const container = html``; // and add it to the DOM const div = d3.select(container).append("div").classed("tooltip", true); // now we tell the Tooltip which container to use const tooltip = new Tooltip(div); // this is just a handy idiom to use vs build the HTML inline in the js below function tooltipContents(p) { if (p.name == "Ukraine") { return "Слава Україні!"; } else if (ref_names.includes(p.name)) { return `${p.name} has taken in
${d3.format(",")( ref_map[p.name] )} refugees from 🇺🇦`; } else { return "No official refugees taken on record"; } } const svg = d3 .select(container) .append("svg") .attr("viewBox", [0, 0, width, height]) .style("border", "1px solid white") .style("width", width) .style("height", height); svg .append("g") .append("path") .datum(graticule) .attr("d", path) .attr("stroke", "#c3c3c3") .attr("stroke-width", "0.5px") .attr("stroke-dasharray", "1,2") .attr("fill", "none"); var refugee_countries = svg.append("g").selectAll(".countries").data(eurasia); // we paint the white paths with a random-ish blue fill; refugee_countries .enter() .append("path") .attr("d", path) .style("stroke", "white") .style("stroke-width", "1px") .style("fill", (d) => { if (d.properties.name == "Ukraine") return "#FFD700"; const res = ref_map[d.properties.name]; return res === undefined ? "#f3f3f3" : ukr_blue(res); }) .on("mouseover", (e, d) => { tooltip.display(d.properties, tooltipContents); }) .on("mouseout", (e, d) => { tooltip.hide(); }) .on("mousemove", (e, d) => { tooltip.move(e); }); return container; }32:[{"id":"7c816e2ea438ac5e6db4b97d034ed670cd8449639128724fd3334011518873a05e08466347a1fdbbd63c6e53c79173c5f61033f85bb7850b6823238aac57cac5","href":"https://static.observableusercontent.com/files/7c816e2ea438ac5e6db4b97d034ed670cd8449639128724fd3334011518873a05e08466347a1fdbbd63c6e53c79173c5f61033f85bb7850b6823238aac57cac5","name":"ukraine-refugees.json","type":"application/json","lastModified":1667748748140.788,"size":2511},{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1667748493683.44,"size":107761}] 2f:{"title":"2022 30-day Map Challenge • Day 05 •🇺🇦 (Refugees)","cells":[{"id":0,"value":"# 2022 30-day Map Challenge • Day 05 •
🇺🇦 (Refugees)","pinned":false,"hidden":false,"mode":"md"},{"id":649,"value":"[UNHCR is concerned about the crisis situation in Ukraine](https://www.unrefugees.org/emergencies/ukraine/) that escalated on February 24, 2022 following the Russian Federation’s military action in the country. The crisis has displaced 6.6 million people inside the country. Over 6.3 million people from Ukraine have crossed into neighboring countries in the region including Poland, Hungary, Moldova and others. \n\nThe map data below was retrieved from the [UNHCR's Ukraine Refugee Data Portal](https://data.unhcr.org/en/situations/ukraine) on 2022-11-05, and the map focuses on Ukraine nearby neighboring countries.\n\nFill color indicates the number of refugees taken in.\n\nHover/tap on country to see country name and refugee count.","pinned":false,"hidden":false,"mode":"md"},{"id":644,"value":"Legend(ukr_blue, {\n title: \"🇺🇦 Refugees Taken In By Country\",\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"Get the refugee data into various useful formats.","pinned":false,"hidden":false,"mode":"md"},{"id":661,"value":"ref_names = ukraineRefugees.map((d) => d.country_name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"ref_map = ukraineRefugees.reduce(\n (d, o) => ((d[o.country_name] = o.refugees), d),\n {}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"Ukraine blue scale.","pinned":false,"hidden":false,"mode":"md"},{"id":596,"value":"ukr_blue = d3\n .scaleLinear()\n .domain(d3.extent(ukraineRefugees.map((d) => d.refugees)))\n .range([\"#d5e1f0\", \"#2356b2\"])\n .interpolate(d3.interpolateHcl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"Refugee data excruciatingly extracted from UNHCR's portal.","pinned":false,"hidden":false,"mode":"md"},{"id":551,"value":"ukraineRefugees = FileAttachment(\"ukraine-refugees.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"This lets us use the projection to draw the paths.","pinned":false,"hidden":false,"mode":"md"},{"id":483,"value":"path = d3.geoPath(lambertAzimuthalEqualArea)","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"We have the entire globe, and we need a better projection than Mercator (😒) so we pick a good one, rotate the globe til we get to the ~EU, and then zoom in enough to focus on the area we want to highlight.\n\nYou can't break anything if you play with the values to see what they do. Just revert wonky changes back to the original.","pinned":false,"hidden":false,"mode":"md"},{"id":496,"value":"lambertAzimuthalEqualArea = d3\n .geoAzimuthalEqualArea()\n .rotate([-20.0, -52.0])\n .translate([width / 2, height / 2])\n .scale(700)\n .precision(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"eurasia = topojson.feature(countries, countries.objects.countries).features","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"countries = FileAttachment(\"countries-110m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"import { graticule } with { projection } from \"@d3/world-map\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"d3 = require(\"d3@7\", \"d3-geo@3\", \"d3-geo-projection@4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"import { Legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"css = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}