What is the best method to retrieve the country name from a world map using D3.js?

Question

What is the best method to retrieve the country name from a world map using D3.js?

I'm trying to figure out how to retrieve the country name from a click event on the D3 world map. Despite inspecting the DOM, I can't quite understand how the country's name, code, or population is associated with the map.

The template for this project was taken from

// The svg
const svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

// Map and projection
const path = d3.geoPath();
const projection = d3.geoMercator()
  .scale(70)
  .center([0, 20])
  .translate([width / 2, height / 2]);

// Data and color scale
let data = new Map()
const colorScale = d3.scaleThreshold()
  .domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
  .range(d3.schemeBlues[7]);

// Load external data and boot
Promise.all([
  d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),
  d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) {
    data.set(d.name, d.code, +d.pop)
  })
]).then(function(loadData) {
  let topo = loadData[0]
  let mouseClick = function(d) {
    d3.selectAll(".Country")
      .transition()
      .duration(200)
      .style("opacity", .8)
    d3.select(this)
      .transition()
      .duration(200)
      .style("stroke", "transparent")
    console.log(this.name)
  }
  // Draw the map
  svg.append("g")
    .selectAll("path")
    .data(topo.features)
    .join("path")
    // draw each country
    .attr("d", d3.geoPath()
      .projection(projection)
    )
    // set the color of each country
    .attr("fill", function(d) {
      d.total = data.get(d.id) || 0;
      return colorScale(d.total);
    })
})

<script src="https://d3js.org/d3.v6.js"></script>
<svg id="my_dataviz" width="400" height="300"></svg>

javascript d3.js

Answer 1

Answer №1

Make sure to update the mouseClick function in your JavaScript code.

Code:

<html>
      <script src="https://d3js.org/d3.v6.js"></script>
      <svg id="my_dataviz" width="400" height="300"></svg>
      <script>
        // The svg
        const svg = d3.select("svg"),
          width = +svg.attr("width"),
          height = +svg.attr("height");
    
        // Map and projection
        const path = d3.geoPath();
        const projection = d3
          .geoMercator()
          .scale(70)
          .center([0, 20])
          .translate([width / 2, height / 2]);
    
        // Data and color scale
        let data = new Map();
        const colorScale = d3
          .scaleThreshold()
          .domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
          .range(d3.schemeBlues[7]);
    
        // Load external data and boot
        Promise.all([
          d3.json(
            "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"
          ),
          d3.csv(
            "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv",
            function (d) {
              data.set(d.name, d.code, +d.pop);
            }
          ),
        ]).then(function (loadData) {
          let topo = loadData[0];
    
          // Modify the mouseClick function here
          let mouseClick = function (event, d) {
            d3.selectAll(".Country")
              .transition()
              .duration(200)
              .style("opacity", 0.8);
            d3.select(this)
              .transition()
              .duration(200)
              .style("stroke", "transparent");
            console.log(d.properties.name); // Log the country name
          };
    
          // Draw the map
          svg
            .append("g")
            .selectAll("path")
            .data(topo.features)
            .join("path")
            // draw each country
            .attr("d", d3.geoPath().projection(projection))
            // set the color of each country
            .attr("fill", function (d) {
              d.total = data.get(d.id) || 0;
              return colorScale(d.total);
            })
            .on("click", mouseClick); // Attach the updated mouseClick function
        });
      </script>
    </html>

Hope this adjustment works for you.

Answer 2

Make sure to update the mouseClick function in your JavaScript code.

Code:

<html>
      <script src="https://d3js.org/d3.v6.js"></script>
      <svg id="my_dataviz" width="400" height="300"></svg>
      <script>
        // The svg
        const svg = d3.select("svg"),
          width = +svg.attr("width"),
          height = +svg.attr("height");
    
        // Map and projection
        const path = d3.geoPath();
        const projection = d3
          .geoMercator()
          .scale(70)
          .center([0, 20])
          .translate([width / 2, height / 2]);
    
        // Data and color scale
        let data = new Map();
        const colorScale = d3
          .scaleThreshold()
          .domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
          .range(d3.schemeBlues[7]);
    
        // Load external data and boot
        Promise.all([
          d3.json(
            "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"
          ),
          d3.csv(
            "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv",
            function (d) {
              data.set(d.name, d.code, +d.pop);
            }
          ),
        ]).then(function (loadData) {
          let topo = loadData[0];
    
          // Modify the mouseClick function here
          let mouseClick = function (event, d) {
            d3.selectAll(".Country")
              .transition()
              .duration(200)
              .style("opacity", 0.8);
            d3.select(this)
              .transition()
              .duration(200)
              .style("stroke", "transparent");
            console.log(d.properties.name); // Log the country name
          };
    
          // Draw the map
          svg
            .append("g")
            .selectAll("path")
            .data(topo.features)
            .join("path")
            // draw each country
            .attr("d", d3.geoPath().projection(projection))
            // set the color of each country
            .attr("fill", function (d) {
              d.total = data.get(d.id) || 0;
              return colorScale(d.total);
            })
            .on("click", mouseClick); // Attach the updated mouseClick function
        });
      </script>
    </html>

Hope this adjustment works for you.

Answer 3

Answer №2

Please remember to include this code snippet:

    .attr("country-name", d => d.properties.name)
          .on("click", function(){
           console.log(d3.select(this).attr("country-name"))
          })

        // Defining the svg
        const svg = d3.select("svg"),
          width = +svg.attr("width"),
          height = +svg.attr("height");
    
        // Map setup and projection
        const path = d3.geoPath();
        const projection = d3
          .geoMercator()
          .scale(70)
          .center([0, 20])
          .translate([width / 2, height / 2]);
    
        // Initializing data and color scale
        let data = new Map();
        const colorScale = d3
          .scaleThreshold()
          .domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
          .range(d3.schemeBlues[7]);
    
        // Loading external data and commencement
        Promise.all([
          d3.json(
            "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"
          ),
          d3.csv(
            "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv",
            function (d) {
              data.set(d.name, d.code, +d.pop);
            }
          ),
        ]).then(function (loadData) {
          let topo = loadData[0];
    
          // Click function for mouse
          let mouseClick = function (event, d) {
            d3.selectAll(".Country")
              .transition()
              .duration(200)
              .style("opacity", 0.8);
            d3.select(this)
              .transition()
              .duration(200)
              .style("stroke", "transparent");
            console.log(d.properties.name); // Country name displayed in log
          };
    
          // Rendering the map
          svg
            .append("g")
            .selectAll("path")
            .data(topo.features)
            .join("path")
            // drawing each country shape
            .attr("d", d3.geoPath().projection(projection))
            // setting the color of each country based on population
            .attr("fill", function (d) {
              d.total = data.get(d.id) || 0;
              return colorScale(d.total);
            })
            .attr("country-name", d => d.properties.name)
          .on("click", function(){
           console.log(d3.select(this).attr("country-name"))
          })
            
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
 <svg id="my_dataviz" width="400" height="300"></svg>

Answer 4

Please remember to include this code snippet:

    .attr("country-name", d => d.properties.name)
          .on("click", function(){
           console.log(d3.select(this).attr("country-name"))
          })

        // Defining the svg
        const svg = d3.select("svg"),
          width = +svg.attr("width"),
          height = +svg.attr("height");
    
        // Map setup and projection
        const path = d3.geoPath();
        const projection = d3
          .geoMercator()
          .scale(70)
          .center([0, 20])
          .translate([width / 2, height / 2]);
    
        // Initializing data and color scale
        let data = new Map();
        const colorScale = d3
          .scaleThreshold()
          .domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
          .range(d3.schemeBlues[7]);
    
        // Loading external data and commencement
        Promise.all([
          d3.json(
            "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"
          ),
          d3.csv(
            "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv",
            function (d) {
              data.set(d.name, d.code, +d.pop);
            }
          ),
        ]).then(function (loadData) {
          let topo = loadData[0];
    
          // Click function for mouse
          let mouseClick = function (event, d) {
            d3.selectAll(".Country")
              .transition()
              .duration(200)
              .style("opacity", 0.8);
            d3.select(this)
              .transition()
              .duration(200)
              .style("stroke", "transparent");
            console.log(d.properties.name); // Country name displayed in log
          };
    
          // Rendering the map
          svg
            .append("g")
            .selectAll("path")
            .data(topo.features)
            .join("path")
            // drawing each country shape
            .attr("d", d3.geoPath().projection(projection))
            // setting the color of each country based on population
            .attr("fill", function (d) {
              d.total = data.get(d.id) || 0;
              return colorScale(d.total);
            })
            .attr("country-name", d => d.properties.name)
          .on("click", function(){
           console.log(d3.select(this).attr("country-name"))
          })
            
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
 <svg id="my_dataviz" width="400" height="300"></svg>

What is the best method to retrieve the country name from a world map using D3.js?

Answer №1

Answer №2

Similar questions

Toggle the visibility of an element with a single button click

The element type is not valid: it should be a string for built-in components or a class/function for composite components, but it is currently an object in a React project

When Safari injects elements that were previously hidden with display:none, they remain visible

Unable to set a value for the variable

What advantages and disadvantages come with using timeouts versus using countdowns in conjunction with an asynchronous content loading call in JavaScript/jQuery?

Partial view remains stagnant despite successful ajax post completion

The Google Visualization chart fails to display properly once CSS is applied

How do I make a component in React delete itself from a page when its internal state changes?

Resolve the route expression before the API request is fully processed

Issues with Grunt functionality after installation on Ubuntu

The data visualization tool Highchart is struggling to load

streamlining form updates in vue

Dealing with empty POST request bodies in Node.js Express is a common challenge

Adding an iframe with inline script to my Next.js website: A step-by-step guide

"Drag and drop elements that automatically snap to a grid and move with

Trying out the Send feature of Gmail API using Postman

Tips for streamlining code using switch statements in vue.js

Error message encountered when deploying a Discord bot on Heroku: "SyntaxError: Unexpected token '??='"

NPM: The registry cannot be found

When the user clicks, show a designated search result in a separate container