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.