1

I have a json file (gapminder.json) of the following format:

[
{"name": "Afghanistan", 
  "region": "South Asia", 
  "code": "afg", 
  "income": [[1800, 600], [1801, 601], ... ,[2100, 1200]],
  "population": [[1800, 122222], [1801, 60233231], ... ,[2100, 120232320]]
},
{"name": "India", 
  "region": "South Asia", 
  "code": "ind", 
  "income": [[1800, 1600], [1801, 6021], ... ,[2100, 11200]],
  "population": [[1800, 122222], [1801, 60233231], ... ,[2100, 120232320]]
},
... 195 more countries
] 

So I'm trying to pull this data into d3 using the following JS code:

d3.json("data\\gapminder.json", function(data) {
            function getData(year) {
                return data.map(function(d) {
                    return {
                        name: d.name,
                        region: d.region,
                        code: d.code,
                        income: getValues(d.income, year),
                        population: getValues(d.population, year),

                    };
                });
            }

            function getValues(values, year) {
                var a = values[i];
                return a[1];
            }
});

I'm not able to access the data using d.income/d.population. I'd need these values to plot a scatterplot over the years from 1800 to 2100 and there's going to be some animation involved to transition the bubbles.

Assuming I'd need to plot a circle for Afghanistan and India in the scatterplot for the year 1800, how would I call the co-ordinates of the circle in the following sample code:

  svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.income); } )
      .attr("cy", function (d) { return y(d.population); } )
      .attr("r", 1.5)
      .style("fill", "#69b3a2"

If anyone could please explain to me how to get the values at least with a console log it'd be wonderful. It goes without saying but I'm very new to d3. Please feel free to ask for more information.

RedSus
  • 23
  • 4

0 Answers0