3e:null 3f:["$","title",null,{"children":"Interactive map to visualize world population data (Tutorial) | Kevin Thiebaut | Observable"}] 45:[{"id":"6390a3b32124a481a4f0b6311935de04e12b5d12bdb387d967ba4ea5b07d16e66bbd1b2438318e63f2d5535a5165b062d88a4470b6ac357eb5e0d3113d677273","href":"https://static.observableusercontent.com/files/6390a3b32124a481a4f0b6311935de04e12b5d12bdb387d967ba4ea5b07d16e66bbd1b2438318e63f2d5535a5165b062d88a4470b6ac357eb5e0d3113d677273","name":"API_SP.POP.TOTL_DS2_en_csv_v2_2106202@1.csv","type":"text/csv","lastModified":1615369363926.82,"size":143942}] 43:{"id":"ecc474a0b7e25534","slug":"interactive-map-to-visualize-world-population-data-tutori","title":"Interactive map to visualize world population data (Tutorial)","thumbnail":"4a57e13f064935a44a8e8e53c9840c520585136afdb429db77d5f215edb784d5","access_level":"public","create_time":"$D2021-03-10T08:39:27.216Z","update_time":"$D2021-03-25T15:03:19.846Z","view_time":null,"first_public_time":"$D2021-03-10T17:45:56.108Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"815a536e05a656c8","login":"kthieb","name":"Kevin Thiebaut","avatar_url":"https://avatars-next.observableusercontent.com/4fd57c79b43cca1bbab1d32081438c26c9fc7fbb89c5d5a10914be5bbbcd53dc","tier":"starter_2024","bio":""},"version":852,"publish_version":852,"role":null,"authored":false,"authors":[{"type":"individual","id":"1cb0d83bfea99d05","login":"kthieb","name":"Kevin Thiebaut","avatar_url":"https://avatars-next.observableusercontent.com/4fd57c79b43cca1bbab1d32081438c26c9fc7fbb89c5d5a10914be5bbbcd53dc","tier":null,"bio":""}],"members":[{"type":"individual","id":"1cb0d83bfea99d05","login":"kthieb","name":"Kevin Thiebaut","avatar_url":"https://avatars-next.observableusercontent.com/4fd57c79b43cca1bbab1d32081438c26c9fc7fbb89c5d5a10914be5bbbcd53dc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":31,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive map to visualize world population data (Tutorial)","cells":[{"id":0,"value":"md`# Interactive map to visualize world population data (Tutorial)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"map = svg.node();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"button = buttn.node();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"md`## Some context\nI recently had a school project where I had to display a choropleth map, and I also had to make it interactive. This is an informative notebook that will show how I did it! Any comment about this notebook is welcomed as it is the first one I posted here.\n\n\nThe different interactions possible are the following: \n- highlighting of the countries when the mouse is over it,\n- zooming via scrolling,\n- navigation with the mouse (hold click and move),\n- selection of countries with a click (click multiple countries to see what I mean!),\n- removing the selection with a button click (below the map),\n- a tooltip displaying more details about the data.\n\nThis notebook is using **d3** and **topojson**.\n\nYou can play a little bit with the map to see what functionnalities there are, then we will jump right into how I did it.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"md`## Defining variables\n\nYou can change the *currentYear* variable to display data from other years. There are population data from 1960 all the way up to 2019.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"currentYear = 2010","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"height = width * 0.7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"md`We define the minimum and maximum value of the population of the map with regards to the variable *currentYear* (if you want more details, the way data is formatted is specified in the Appendix at the end of the notebook).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"minValue = {\n let minVal = 100000000000;\n data.forEach(value => {\n if (value[currentYear] === 0) return;\n minVal = Math.min(minVal, value[currentYear])\n })\n return minVal; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"maxValue = {\n let maxVal = 0;\n data.forEach(value => {\n if (value[currentYear] === 0) return;\n maxVal = Math.max(maxVal, value[currentYear])\n })\n return maxVal; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"md`## Creating the svg\n\nThe svg is created here. There are 2 **g** layers that represents the 2 different entities we will display : \n\n- the countries and their boundaries,\n- the selected countries \n\nwe give to each one its own class name.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"svg = d3\n .create('svg')\n .style('width', width)\n .style('height', height);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"selectedLayer = svg.append('g').attr('class', 'selected-countries');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"layer = svg.append('g').attr('class', 'counties');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"md`## Using topojson\n\nThe \"feature\" function is used to convert our topojson to geojson. \nThe \"mesh\" function is used to get the countries boundaries, it is useful to display each boundary only once.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"countries = topojson.feature(world, world.objects.countries).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"boundaries = topojson.mesh(world,world.objects.countries, (a, b) => a !== b);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"md`## Creating the color scale \n\nHere we create the color scale that the map will be using to display the data. In this map, the more red a country is, the more population it holds.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"paletteScale = d3\n .scaleLinear()\n .domain([minValue, maxValue])\n .range(['#EFEFFF', '#CF4646']);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"md`## Aggregating the data\n\nHere I take the geojson that was created above and change the properties of each country to hold the data I want displayed. This is done by using map and adding some properties. Here the properties that are important are the fill color of the country, the total population of the country, the name of the country and the current year that is considered.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"geoData = countries.map(country => {\n const totalPopulationAllYears = data.get(country.id);\n const totalPopulationCurrentYear = totalPopulationAllYears === undefined ? 0 : totalPopulationAllYears[currentYear];\n return {\n ...country,\n properties: {\n totalPopulation: totalPopulationCurrentYear,\n fillColor: paletteScale(totalPopulationCurrentYear),\n name: totalPopulationAllYears === undefined ? \"\" : totalPopulationAllYears['Country Name'],\n currentYear,\n },\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`## Setting up the projection, path, and zoom\n\nI chose the mercator projection (being from France, this is the natural one for me) and I centered it on France. The scale was adapted so that the map would be confortable to look at on a computer screen. \nThen we use this projection to create a path. \nFinally we set up the zoom for the 2 layers, and use the call method on the svg element (where we want the zoom behaviour).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"projection = d3\n .geoMercator()\n .center([4.8357, 45.764]) // this is centered on France\n .scale(200)\n .translate([width / 2, height / 2]); // The map will appear at the right spot","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"path = d3.geoPath().projection(projection);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"zoom = {\n const zoomed = ({ transform }) => {\n layer.attr('transform', transform);\n \n selectedLayer.attr('transform', transform);\n };\n return d3.zoom().scaleExtent([0.5, 40]).on('zoom', zoomed);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"svg.call(zoom);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"md`## Displaying the map \nIn this section, the *geoData* are bound to path elements that are then appended to a **g** layer. We then add a class name with the class 'country' and the id of each country. We set the **d** attribute to path. \nFinally we set the fill color of each country to be the one that is in the properties of the datum associated, and we set the stroke to none because we will display the borders separately. \nIf you want to learn more about *selection.join*, the tutorial is [here](https://observablehq.com/@d3/selection-join).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"countriesSelection = {\n layer\n .selectAll('path')\n .data(geoData, (d) => d.id)\n .join(\n enter => {\n enter\n .append('path')\n .attr('class', (d) => `country ${d.id}`)\n .attr('d', path)\n .style('fill', (d) => d.properties.fillColor)\n .style('stroke', 'none');\n },\n () => {},\n exit => {\n exit\n .remove();\n },\n );\n return layer.selectAll('.country');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"md`Here we display the borders of the countries. We proceed this way so that each border is displayed only **once**. If we did not do that, each border would have been displayed once per country, and there would be some borders that would appear wider. \n\nNB: Since I want the boundaries to be displayed after the countries, I added a 'dependency' to *countriesSelection* in this cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"boundariesLayer = {\n countriesSelection\n layer\n .selectAll('.country-boundary')\n .data([boundaries])\n .join(\n enter => {\n enter\n .append('path')\n .attr('d', path)\n .attr('class', 'country-boundary')\n .style('stroke', 'black')\n .style('stroke-width', 1)\n .style('stroke-opacity', 0.3)\n .style('fill', 'none');\n },\n () => {},\n exit => {\n exit.remove()\n }\n );\n return layer.selectAll('.country-boundary');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"md`## Creating the tooltip \nHere we create the tooltip used to display more data on each country. We simply append a div element to the body and give it the *hover-info* class, and set its visibility to hidden.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"tooltipSelection = d3.select('body')\n .append('div')\n .attr('class', 'hover-info')\n .style('visibility', 'hidden');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"md`Event listeners are needed to display the tooltip. The behaviour I want is the following : \n - The tooltip is displayed just under the cursor when the cursor is over a country and follows the cursor wherever it goes.\n - The tooltip is hidden when the cursor is not over a country. \n\nWe also add in these event listeners some transitions. If the cursor is above a country, it will be highlighted and there will be a smooth transition between the 2 colors.\n\nTo display the tooltip under the cursor, 'pageX' and 'pageY' are used. These are event properties that we use to style our tooltip. The tooltip's position is set to absolute and is updated everytime a mousemove event is detected. This provides the behaviour I wanted.\n\nAlso I added a little triangle on the tooltip to make it appear prettier, but this is not really important in my opinion.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"tooltipEventListeners = countriesSelection\n .on('mouseenter', ({ target }) => {\n tooltipSelection.style('visibility', 'visible');\n\n d3.select(target)\n .transition()\n .duration(150)\n .ease(d3.easeCubic)\n .style('fill', '#ffba08');\n})\n .on('mousemove', ({ pageX, pageY, target }) => {\n\n tooltipSelection\n .style('top', `${pageY + 20}px`)\n .style('left', `${pageX - 10}px`)\n .style('z-index', 100)\n .html(\n `${\n target.__data__.properties.name\n }
Total population (${target.__data__.properties.currentYear}): ${\n target.__data__.properties.totalPopulation\n }`,\n )\n .append('div')\n .attr('class', 'triangle');\n\n d3.selectAll('.triangle').style('top', `${-Math.sqrt(20) - 3}px`);\n})\n .on('mouseleave', (e) => {\n tooltipSelection.style('visibility', 'hidden');\n\n d3.select(e.target)\n .transition()\n .duration(150)\n .ease(d3.easeCubic)\n .style('fill', (d) => d.properties.fillColor);\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"md`## Setting up the selection button \n\nHere we just create a button and give the 'Reinitialize Selection' text. This will be used later.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"buttn = d3.create('button').html('

Reinitialize Selection

');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"md`## Creating a reactive Set of selected countries \n\nThe behaviour I want here is the following: \n - When I click on a unselected country, I add it to the set of selected countries.\n - When I click on the *Reinitialize selection* button, the selection is reinitialized to be empty.\n\nThis part was tricky. \nSince I need the *selectedCountriesSet* variable below to change with click events, I used **Generators**. Everything is very well explained on the [tutorial page](https://observablehq.com/@observablehq/introduction-to-generators) about them, so I will not go into too much details. \nI defined the *on click* events here and changed the set of selected countries at each click event accordingly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"selectedCountriesSet = {\n countriesSelection\n return Generators.observe(next => {\n \n let selectedSet = new Set()\n // Yield the initial value.\n next(selectedSet);\n \n // Define event listeners to yield the next values\n svg.selectAll('.country')\n .on('click', null)\n .on('click', ({ target }) => {\n selectedSet.add(target.__data__.id);\n next(selectedSet)\n });\n \n // Define the event listener of the button\n buttn.on('click', () => {\n selectedSet = new Set();\n next(selectedSet);\n });\n \n // When the generator is disposed, detach the event listener.\n return () => svg.selectAll('.country').on('click', null);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"md`The *geoData* variable is filtered to only keep the countries that are in the *selectedCountriesSet* variable. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"selectedCountries = geoData.filter((country) => selectedCountriesSet.has(country.id));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"md`Then *selectedCountries* is reduced to keep the total population of the selection. This will be used to display the total population of the selection on the map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"totalPopulationSelection = selectedCountries.reduce((acc, country) => acc + country.properties.totalPopulation, 0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"md`*selectedCountries* is mapped over to construct another variable: *geo*. It will be used to display the selected countries on the map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"geo = selectedCountries.map(country => {\n const newCountry = {\n ...country,\n properties: {\n ...country.properties,\n totalPopulation: totalPopulationSelection,\n name: `${country.properties.name} (Selected)`,\n }\n };\n return newCountry;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"md`## Displaying and animating the selected countries\nFirst, we define a *getTransition* function to create the transitions needed when we select countries. It will be used in the next cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"t = function getTransition() {\n return d3.transition().duration(250).ease(d3.easeCubic);\n }\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"md`There, we use **selection.join** to update the DOM as the data changes. Everything about *selection.join* is really well explained [here](https://observablehq.com/@d3/selection-join). There is nothing particular going on in this notebook that is not explained in the page I linked so I will not go into too much details. \n\nThanks to *selection.join* path elements are appended or removed according to the selected countries. The right styles and classes are set to make the animation smoother. \nWe use a transition to make the experience smoother for the user when a country is clicked. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"changeSelectedLayer = {\n const currentTransition = t();\n selectedLayer\n .selectAll('path')\n .data(geo, (d) => d.id)\n .join(\n (enter) => {\n enter\n .append('path')\n .attr('class', (d) => `selected-country ${d.id}`)\n .attr('d', path)\n .style('fill', '#ffba08')\n .style('fill', '#f4a261')\n .style('stroke', 'black')\n .style('stroke-width', 1)\n .style('stroke-opacity', 0.3)\n .call((en) =>\n en\n .transition(currentTransition)\n .style('fill', '#f4a261')\n .style('stroke-opacity', 0.1),\n );\n },\n () => {},\n (exit) => {\n exit.style('fill', '#f4a261').call((ex) =>\n ex\n .transition(currentTransition)\n .style('fill', (d) => d.properties.fillColor)\n .remove(),\n );\n },\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"md`Finally we set up event listeners on the selected countries to display the tooltip. It is almost the same code as the one to display tooltips on the countries. Only the html inside the tooltip was changed to display *(Selected)* on selected countries.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"{\n changeSelectedLayer\n selectedLayer\n .on('mouseenter', ({ target }) => {\n tooltipSelection.style('visibility', 'visible');\n\n d3.select(target).style('fill', '#ffba08');\n })\n .on('mousemove', ({ pageX, pageY, target }) => {\n const x = pageX;\n const y = pageY;\n\n tooltipSelection\n .html(\n `${\n target.__data__.properties.name\n }
Total population of the selection (${target.__data__.properties.currentYear}): ${target.__data__.properties.totalPopulation}`,\n )\n .style('top', `${y + 20}px`)\n .style('left', `${x - 10}px`)\n\n d3.selectAll('.triangle').style('top', `${-Math.sqrt(20) - 3}px`);\n })\n .on('mouseleave', ({ target }) => {\n tooltipSelection.style('visibility', 'hidden');\n\n d3.select(target).style('fill', '#f4a261');\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"md`### Et voilà! We now have an interactive map that displays population data!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"topojson = require('topojson-client@3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"md`## Data fetching`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"world = d3.json('https://gist.githubusercontent.com/olemi/d4fb825df71c2939405e0017e360cd73/raw/d6f9f0e9e8bd33183454250bd8b808953869edd2/world-110m2.json')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"rawData = FileAttachment(\"API_SP.POP.TOTL_DS2_en_csv_v2_2106202@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"countryCodes = d3.tsv('https://d3js.org/world-110m.v1.tsv')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"md`## Data formatting`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"letterToNum = {\n const letToNum = new Map();\n \n countryCodes.forEach(item => {\n if (item.iso_a3 !== \"-99\" && item.iso_n3 !== \"-99\") {\n letToNum.set(item.iso_a3, item.iso_n3);\n }\n });\n return letToNum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"data = {\n const arrayData = rawData.map(item => {\n let newDatum = Object.assign({}, item);\n for (let i = 1960; i < 2020; i++) {\n newDatum[`${i}`] = +newDatum[`${i}`]\n }\n newDatum[\"Country Code\"] = letterToNum.get(item[\"Country Code\"]);\n return newDatum;\n }).filter(item => {\n return item[\"Country Code\"] !== undefined;\n })\n const data = new Map()\n arrayData.forEach(item => {\n data.set(+item[\"Country Code\"], item);\n })\n return data; \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"defaultMinValue = {\n let minVal = 100000000000;\n data.forEach(value => {\n if (value[\"1960\"] === 0) return;\n minVal = Math.min(minVal, value[\"1960\"])\n })\n return minVal; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"defaultMaxValue = {\n let maxVal = 0;\n data.forEach(value => {\n if (value[\"2019\"] === 0) return;\n maxVal = Math.max(maxVal, value[\"2019\"])\n })\n return maxVal; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"styles = html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"