2b:null 2c:["$","title",null,{"children":"World Population Growth Maps | Noah Song | Observable"}] 31:T10c4,viz = { // remove previously rendered svg d3.select('#_svg').remove(); // set up canvas const wrapper = d3 .select("#wrapper") .append("svg") .attr('id', '_svg') .attr("width", width) .attr("height", height); const bounds = wrapper .append("g") .style("transform", `translate(${margins.left}px, ${margins.top}px)`); // draw data const earth = bounds .append("path") .attr("class", "earth") .attr("d", pathGenerator(sphere)); const graticuleJson = d3.geoGraticule10(); // grids const graticule = bounds .append("path") .attr("class", "graticule") .attr("d", pathGenerator(graticuleJson)); const countries = bounds .selectAll(".country") .data(countryShapes.features) .enter() .append("path") .attr("class", d => ["country", countryIdAccessor(d)].join(" ")) .attr("d", pathGenerator) .attr("fill", d => { const metricValue = metricDataByRegion[countryIdAccessor(d)]; if (typeof metricValue == "undefined") return "#e2e6e9"; return colorScale(metricValue); }); const voronoi = bounds .selectAll(".voronoi") .data(countryShapes.features) .enter() .append("path") .attr("class", "voronoi") .attr("d", (d, i) => voronoiGenerator.renderCell(i)); // draw peripherals const legendGroup = wrapper .append("g") .attr( "transform", `translate(${120},${ width < 800 ? boundedHeight - 30 : boundedHeight * 0.5 })` ); const legendTitle = legendGroup .append("text") .attr("y", -23) .attr("class", "legend-title") .text("Population growth"); const legendByline = legendGroup .append("text") .attr("y", -9) .attr("class", "legend-byline") .text("Percent change in 2017"); const defs = wrapper.append("defs"); const legendGradientId = "legend-gradient"; const gradient = defs .append("linearGradient") .attr("id", legendGradientId) .selectAll("stop") .data(colorScale.range()) .enter() .append("stop") .attr("stop-color", d => d) .attr( "offset", (d, i) => `${ (i * 100) / 2 // 2 is one less than our array's length }%` ); const legendWidth = 120; const legendHeight = 16; const legendGradient = legendGroup .append("rect") .attr("x", -legendWidth / 2) .attr("height", legendHeight) .attr("width", legendWidth) .style("fill", `url(#${legendGradientId})`); const legendValueRight = legendGroup .append("text") .attr("class", "legend-value") .attr("x", legendWidth / 2 + 10) .attr("y", legendHeight / 2) .text(`${d3.format(".1f")(maxChange)}%`); const legendValueLeft = legendGroup .append("text") .attr("class", "legend-value") .attr("x", -legendWidth / 2 - 10) .attr("y", legendHeight / 2) .text(`${d3.format(".1f")(-maxChange)}%`) .style("text-anchor", "end"); navigator.geolocation.getCurrentPosition(myPosition => { const [x, y] = projection([ myPosition.coords.longitude, myPosition.coords.latitude ]); const myLocation = bounds .append("circle") .attr("class", "my-location") .attr("cx", x) .attr("cy", y) .attr("r", 0) .transition() .duration(500) .attr("r", 10); }); // set up interactions voronoi.on("mouseenter", onMouseEnter).on("mouseleave", onMouseLeave); const tooltip = d3.select("#tooltip"); function onMouseEnter(...args) { const datum = args[1]; tooltip.style("opacity", 1); const countryId = countryIdAccessor(datum); const metricValue = metricDataByRegion[countryId] || 0; tooltip.select("#country").text(countryNameAccessor(datum)); tooltip.select("#value").text(`${d3.format(",.2f")(metricValue)}%`); const [centerX, centerY] = pathGenerator.centroid(datum); const x = centerX + margins.left; const y = centerY + margins.top; tooltip.style( "transform", `translate(` + `calc( -50% + ${x}px),` + `calc(-100% + ${y}px)` + `)` ); d3.select(`.${countryId}`).classed("is-hovered", true); } function onMouseLeave() { tooltip.style("opacity", 0); d3.selectAll(`.country`).classed("is-hovered", false); } return `Renders the map`; }32:T5eb,html` `33:[{"id":"1037d6ebcf03d85c1ec9f5333dba4f4acf5eed82932e6eed414c6f7d9732ebd5b47eee699c93568cababb8c30d41515a0cdcfdaf7b9a53121c7a5d41dbfe88a0","href":"https://static.observableusercontent.com/files/1037d6ebcf03d85c1ec9f5333dba4f4acf5eed82932e6eed414c6f7d9732ebd5b47eee699c93568cababb8c30d41515a0cdcfdaf7b9a53121c7a5d41dbfe88a0","name":"world-geojson.json","type":"application/json","lastModified":1577118145145.333,"size":4700966},{"id":"dbd37df00068d4896d15297507db347bfdfec63fdf423b116169348330f3615017c2242afc19b23a4dc8deedb9c0b075d564ae84896b900bdcc5022780bd86fc","href":"https://static.observableusercontent.com/files/dbd37df00068d4896d15297507db347bfdfec63fdf423b116169348330f3615017c2242afc19b23a4dc8deedb9c0b075d564ae84896b900bdcc5022780bd86fc","name":"data_bank_data.csv","type":"text/csv","lastModified":1577118499868.961,"size":84013}] 2f:{"id":"68a6c989e1a2056a","slug":"world-growth-map","title":"World Population Growth Maps","thumbnail":"58555b219e953c088f088fd0c587500dd66c7878c875489b760243e2c2f958f3","access_level":"public","create_time":"$D2019-12-23T16:18:41.354Z","update_time":"$D2021-12-12T04:34:15.425Z","view_time":null,"first_public_time":"$D2020-04-25T02:00:31.426Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"207f12ceec18efb8","login":"fnick851","name":"Noah Song","avatar_url":"https://avatars-next.observableusercontent.com/c6684bfd604737bde4eb05a174d5804d205c92922b16eccd82b09aedacf20b12","tier":"starter_2024"},"version":292,"publish_version":292,"role":null,"authored":false,"authors":[{"type":"individual","id":"54649d8977fcf1ae","login":"fnick851","name":"Noah Song","avatar_url":"https://avatars-next.observableusercontent.com/c6684bfd604737bde4eb05a174d5804d205c92922b16eccd82b09aedacf20b12","tier":null}],"members":[{"type":"individual","id":"54649d8977fcf1ae","login":"fnick851","name":"Noah Song","avatar_url":"https://avatars-next.observableusercontent.com/c6684bfd604737bde4eb05a174d5804d205c92922b16eccd82b09aedacf20b12","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"1df41eab74c3a716","slug":"fullstack-d3","title":"Random D3.js","owner":{"id":"207f12ceec18efb8","login":"fnick851","name":"Noah Song"}},"type":"notebook","body":{"title":"World Population Growth Maps","cells":[{"id":0,"value":"md`# World Population Growth Maps \n\n### with voronoi assisted tooltip, and metric / projection toggle\n\nWorld bank data as of 2017`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof projectionType = select(projections)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof metric = select([\n \"Population growth (annual %)\",\n \"Net migration\",\n \"International tourism, receipts (current US$)\",\n \"Population density (people per sq. km of land area)\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"d3[projectionType] + ''","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html`\n

\n population change\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"projections = getMethods(geoProjections).filter(text => !text.includes('Raw'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"countryNameAccessor = d => d.properties[\"NAME\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"countryIdAccessor = d => d.properties[\"ADM0_A3_IS\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"sphere = {\n return {\n type: \"Sphere\"\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"margins = {\n return {\n top: 10,\n right: 10,\n bottom: 10,\n left: 10\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"boundedWidth = width - margins.left - margins.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"boundedHeight = {\n const [[x0, y0], [x1, y1]] = pathGenerator.bounds(sphere);\n\n return y1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"height = boundedHeight + margins.top + margins.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"projection = d3[projectionType]().fitWidth(boundedWidth, sphere)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"pathGenerator = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"voronoiGenerator = {\n let voronoi = d3.Delaunay.from(\n countryShapes.features,\n d => pathGenerator.centroid(d)[0],\n d => pathGenerator.centroid(d)[1]\n ).voronoi();\n voronoi.xmax = boundedWidth;\n voronoi.ymax = boundedHeight;\n\n return voronoi;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"countryShapes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"metricValueExtent = d3.extent(metricValues);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"maxChange = d3.max([-metricValueExtent[0], metricValueExtent[1]]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"colorScale = d3\n .scaleLinear()\n .domain([-maxChange, 0, maxChange])\n .range([\"indigo\", \"white\", \"darkgreen\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"countryShapes = FileAttachment('world-geojson.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"dataset = d3.csvParse(\n await FileAttachment('data_bank_data.csv').text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"metricDataByRegion = {\n let dataByRegion = {};\n dataset.forEach(d => {\n if (d[\"Series Name\"] != metric) return;\n dataByRegion[d[\"Country Code\"]] = +d[\"2017 [YR2017]\"] || 0;\n });\n return dataByRegion;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"metricValues = Object.values(metricDataByRegion)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3base = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"geoProjections = require('d3-geo-projection')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"getMethods = obj =>\n Object.getOwnPropertyNames(obj).filter(\n item => typeof obj[item] === 'function'\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"delaunay = require('d3-delaunay')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"d3 = {\n return {\n ...d3base,\n ...geoProjections,\n ...delaunay\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"