D3: Iterating and accessing datasets? - d3.js

Question

Context
I am making a scatterplot. For each location, in my dataset, I want to plot a circle on a map, using 'lat' and 'long' values. There will be two circles plotted, one on top of the other. The radiuses of the two circles will be defined by 'total' and 'passed' values. I've made my map; I intend my plotted data to look something like this:
I can structure my data any way I want to. I have have opted for json, below.
[
{
"year": 2006,
"inspections": [
{
"location": "Cheshire",
"total": 341,
"passed": 26,
"long": 5,
"lat": 20
},
{
"location": "County Durham",
"total": 102,
"passed": 1,
"long": 480,
"lat": 90
}
]
},
{
"year": 2007,
...
]
Eventually, I'd like to transition my circles (having them grow and shrink) through the years, but for now I'm starting simple and just trying to plot a single year of data on my map.
Here is my first attempt at the code to plot my circles:
d3.json("dataset", function(error, data) {
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
// return someting;
})
.attr("cy", function(d) {
// return someting;
})
.attr("r", 5);
});
Here's the console output of d:
Question
I don't understand too well how .data() and .enter() work? How do I access my values, 'location', 'total', 'passed', 'long' and 'lat', in turn so I can plot all my circles for the year 2006. The examples available tend to use very simple arrays. How do I get my values from my more complex structure of nested arrays and objects?

Answer 1

If your json data is like this
var json = [{
"year": 2006,
"inspections": [{
"location": "Cheshire",
"total": 341,
"passed": 26,
"long": 50,
"lat": 0
}, {
"location": "County Durham",
"total": 102,
"passed": 10,
"long": 52,
"lat": 0
}]
}, {
"year": 2007,
"inspections": [{
"location": "Cheshire",
"total": 341,
"passed": 26,
"long": 51,
"lat": 1
}, {
"location": "County Durham",
"total": 102,
"passed": 10,
"long": 51,
"lat": -1.8
}]
}
];
First make red circle for the first array of inspections like this:
//circle1
svg.selectAll(".red")//get all the circles with class red
.data(json).enter()//iterate over the json
.append("circle")
.attr("cx", function (d) { var circle1 = d.inspections[0]; return projection([circle1.lat,circle1.long])[0]; })//get x point based on projection set the x point which is 0 index
.attr("cy", function (d) { var circle1 = d.inspections[0]; return projection([circle1.lat,circle1.long])[1]; })//get x point based on projection set the x point which is 1 index
.attr("r", "8")
.attr("class", "red")//to get the selection for red circles
.attr("fill", "red")
Make blue circle for the second array of inspections like this:
//circle 2
svg.selectAll(".blue")
.data(json).enter()
.append("circle")
.attr("cx", function (d) { var circle1 = d.inspections[1]; return projection([circle1.lat,circle1.long])[0]; })
.attr("cy", function (d) { var circle1 = d.inspections[1]; return projection([circle1.lat,circle1.long])[1]; })
.attr("r", "8")
.attr("class", "blue")
.attr("fill", "blue")
Working code here
Hope this helps!

Answer 2

Easier to just have a flat array of objects if you can:
[
{
"year": 2006,
"location": "Cheshire",
"total": 341,
"passed": 26,
"long": 5,
"lat": 20
},
{
"year": 2006,
"location": "County Durham",
"total": 102,
"passed": 1,
"long": 480,
"lat": 90
}
]
Then d.lat etc will return what you expect. Otherwise your code looks fine on first glance. Just do your svg.selectAll("circle").data(data).enter().append("circle") twice--once for each set of circles.