Search code examples
d3.jstopojson

Selecting country ID from topoJSON (D3)


Im following this tutorial "A simple d3.js map explained". I'd like to create a map and change the colour of a single country.

I've simplified the tutorial to show just the map in this Plunk

I think I might be able to select a country through the id's found in the topoJSON

   {"type": "Polygon",
    "id": 604,
    "arcs": [
      [133, -473, -448, -378, -374, -413]
     ]
   },

I know that UK is "id": 826. Should I be using the id to change the colour of a single country and how do I go about this?


Solution

  • You can use .filter to select the country you are interested in, then process it the way you want.

    Example:

    // select a country by Id and change its styling
    g.selectAll('path')
      .filter(function(d) {
        return d.id === 826 
      })
    .style('fill', 'red')
    

    Demo: Updated plunk.