Learn D3.js

Grouping dots by category

Each data point object contains the continent to which each country belongs in the d.continent property. We can use it as a category to group several countries and identify them with a color code.

First, we need a set containing the names of the available continents. These names can be extracted from the data file and added to Set, which will only add each continent once. Let's create a new Set in our global data object:

const data = { continents: new Set() }

The set will be populated while loading the CSV in the row function, as shown in the following code snippet:

d3.csv("../Data/un_regions_gdp.csv", function(row) {    if(row.HDI_2017 >0 && row.GDP_2017 >0) {        data.continents.add(row.Continent);        // ...    }})

But since ...