d3.js - Plotting points on zoomable, clickable map - csv

Question

I am trying to adapt the map found at http://bl.ocks.org/mbostock/2206340 and plot some points on it. I have the data I am trying to use (latitudes and longitudes) in a csv file called data.csv, which is formatted like this:
lon_0,lat_0,lon_1,lat_1
-122.1430195,37.4418834,-122.415278,37.778643
-122.1430195,37.4418834,-122.40815,37.785034
-122.4194155,37.7749295,-122.4330827,37.7851673
-122.4194155,37.7749295,-122.4330827,37.7851673
-118.4911912,34.0194543,-118.3672828,33.9164666
-121.8374777,39.7284944,-121.8498415,39.7241178
-115.172816,36.114646,-115.078011,36.1586877
The modification to the code I made is contained in the following snippet
d3.json("us-states.json", function(json) {
d3.csv("data.csv", function(data) {
dataset = data.map(function(d) { return [ +d["lat_0"], +d["lon_0"] ]; });
console.log(data)
states.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d["lon_0"], d["lat_0"] ])[0];
})
.attr("cy", function(d) {
return projection([d["lon_0"],d["lat_0"] ])[1];
})
.attr("r", 5)
.style("fill", "red");
});
states.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path)
.on("click", click);
});
The map renders fine, but the plots are not shown. Any idea what could be wrong here? I've tried a bunch of different things, I'm not sure if it is a matter of the states map covering the points, or if something is wrong with the projection...

Answer 1

The paths drawn in the example are filled, i.e. anything behind them will be obscured. SVG elements are drawn in the order they are specified. In your case, the circles are drawn first and then the paths for the states, thereby obscuring the circles.
It works when you draw the state paths before drawing the circles.