piechart over a map point using d3.js

Question

I want to draw a pie chart for every point on the map instead of a circle. The map and the points are displaying well but the pie chart is not showing over the map points. There is no error also. I can see the added pie chart code inside map also.

Below is the code snippet .

var w = 600;
var h = 600;
var bounds = [[78,30], [87, 8]];  // rough extents of India
var proj = d3.geo.mercator()
        .scale(800)
        .translate([w/2,h/2])
        .rotate([(bounds[0][0] + bounds[1][0]) / -2,
            (bounds[0][1] + bounds[1][1]) / -2]); // rotate the project to bring India into view.

var path = d3.geo.path().projection(proj);

var map = d3.select("#chart").append("svg:svg")
        .attr("width", w)
        .attr("height", h);

var india = map.append("svg:g")
        .attr("id", "india");

var gDataPoints = map.append("g"); // appended second
d3.json("data/states.json", function(json) {
    india.selectAll("path")
            .data(json.features)
            .enter().append("path")
            .attr("d", path);

});

d3.csv("data/water.csv", function(csv) {
    console.log(JSON.stringify(csv))
    gDataPoints.selectAll("circle")
            .data(csv)
            .enter()
            .append("circle")
            .attr("id", function (d,i) {
                return "chart"+i;
            })
            .attr("cx", function (d) {
                return proj([d.lon, d.lat])[0];
            })
            .attr("cy", function (d) {
                return proj([d.lon, d.lat])[1];
            })
            .attr("r", function (d) {
                return 3;
            })
            .each(function (d,i) {
                barchart("chart"+i);
            })
            .style("fill", "red")
            //.style("opacity", 1);
});


function barchart(id){

    var data=[15,30,35,20];      
    var radius=30;
    var color=d3.scale.category10()        

    var svg1=d3.select("#"+id)
            .append("svg").attr('width',100).attr('height',100);

    var group=svg1.append('g').attr("transform","translate(" + radius + "," + radius + ")");
    var arc=d3.svg.arc()
            .innerRadius('0')
            .outerRadius(radius);
    var pie=d3.layout.pie()
            .value(function(d){
                return d;
            });

    var arcs=group.selectAll(".arc")
            .data(pie(data))
            .enter()
            .append('g')
            .attr('class','arc')

    arcs.append('path')
            .attr('d',arc)
            .attr("fill",function(d,i){
                return color(d.data);
                //return colors[i]
            });
}

water.csv:

lon,lat,quality,complaints
80.06,20.07,4,17
72.822,18.968,2,62
77.216,28.613,5,49
92.79,87.208,4,3
87.208,21.813,1,12
77.589,12.987,2,54
16.320,75.724,4,7

Answer 1

In testing your code I was unable to see the pie charts rendering, at all. But, I believe I still have a solution for you.

You do not need a separate pie chart function to call on each point. I'm sure that there are a diversity of opinions on this, but d3 questions on Stack Overflow often invoke extra functions that lengthen code while under-utilizing d3's strengths and built in functionality.

Why do I feel this way in this case? It is hard to preserve the link between data bound to svg objects and your pie chart function, which is why you have to pass the id of the point to your function. This will be compounded if you want to have pie chart data in your csv itself.

With d3's databinding and selections, you can do everything you need with much simpler code. It took me some time to get the hang of how to do this, but it does make life easier once you get the hang of it.

Note: I apologize, I ported the code you've posted to d3v4, but I've included a link to the d3v3 code below, as well as d3v4, though in the snippets the only apparent change may be from color(i) to color[i]

---

In this case, rather than calling a function to append pie charts to each circle element with selection.each(), we can append a g element instead and then append elements directly to each g with selections.

Also, to make life easier, if we initially append each g element with a transform, we can use relative measurements to place items in each g, rather than finding out the absolute svg coordinates we would need otherwise.

 d3.csv("water.csv", function(error, water) {

    // Append one g element for each row in the csv and bind data to it:
var points = gDataPoints.selectAll("g")
    .data(water)
    .enter()
    .append("g")
    .attr("transform",function(d) { return "translate("+projection([d.lon,d.lat])+")" })
    .attr("id", function (d,i) { return "chart"+i; })
    .append("g").attr("class","pies");

// Add a circle to it if needed
points.append("circle")
    .attr("r", 3)
    .style("fill", "red");

// Select each g element we created, and fill it with pie chart:
var pies = points.selectAll(".pies")
    .data(pie([0,15,30,35,20]))
    .enter()
    .append('g')
    .attr('class','arc');

pies.append("path")
  .attr('d',arc)
  .attr("fill",function(d,i){
       return color[i];      
      });
});  

Now, what if we wanted to show data from the csv for each pie chart, and perhaps add a label. This is now done quite easily. In the csv, if there was a column labelled data, with values separated by a dash, and a column named label, we could easily adjust our code to show this new data:

d3.csv("water.csv", function(error, water) {

    var points = gDataPoints.selectAll("g")
        .data(water)
        .enter()
        .append("g")
        .attr("transform",function(d) { return "translate("+projection([d.lon,d.lat])+")" })
        .attr("class","pies")

    points.append("text")
        .attr("y", -radius - 5)
        .text(function(d) { return d.label })
        .style('text-anchor','middle');

    var pies = points.selectAll(".pies")
        .data(function(d) { return pie(d.data.split(['-'])); })
        .enter()
        .append('g')
        .attr('class','arc');

    pies.append("path")
      .attr('d',arc)
      .attr("fill",function(d,i){
           return color[i];     
      });

});

The data we want to display is already bound to the initial g that we created for each row in the csv. Now all we have to do is append the elements we want to display and choose what properties of the bound data we want to show.

The result in this case looks like:

I've posted examples in v3 and v4 to show a potential implementation that follows the above approach for the pie charts:

With one static data array for all pie charts as in the example: v4 and v3

And by pulling data from the csv to display: v4 and v3