[GIS] Populating D3 Graph with Cartodb

cartod3jquery

I have been looking at D3 and following along with their basic tutorials. In the documentation you can use json files to create graphs, however I am confused on how to make the connection from my cartodb query, to the input of D3. To clarify I have made a successful query to my cartodb table and returned those results from there I need make a connection from my returned json query to D3.

  var sql = new cartodb.SQL({ user: 'ceigis' });
sql.execute("SELECT status, COUNT(status) FROM deldot_rail_crossing GROUP BY status")
  .done(function(data) {
    for (var i = 0; i < data.total_rows; i++) {
      $('#content').append("<div><span>" + data.rows[i].status + "</span><span>" +  data.rows[i].count+ "<span></div></br>"); ///This was just to test if my json query was correct 
     //Making the Connection from my query to D3 is where I am struggling 

        d3.json("data.json", function(json) {

I am ultimately trying to create a simple pie graph of how many records fall within 4 different statuses.

UPDATE: I was able to get a working pie chart. One of my problems was passing json object instead of an array.code posted below.. hope this helps out others

function init(){
var w = 1000;
var h = 1000;
var r = 200;
var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c"]);

var sql = new cartodb.SQL({ user: 'igis' });
sql.execute("SELECT status, COUNT(status) FROM rail_ing GROUP BY status")
        .done(function(data) {
            for (var i = 0; i < data.total_rows; i++) {
                var data = data.rows;
            }       
        var canvas = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", h);

        var group= canvas.append("g")
            .attr("transform", "translate(300,300)");


        var arc = d3.svg.arc()           
            .outerRadius(r)
            .innerRadius(0);

        var pie = d3.layout.pie()         
            .value(function(d) { return d.count; });

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

        arcs.append("path")
        .attr("d",arc)
        .attr("fill", function (d) { return color (d.data.status); });

        arcs.append("text")
        .attr("transform", function (d) { return "translate(" +  
                    arc.centroid(d) + ")";})
            .attr("text-anchor", "middle")
            .attr("font-size", "1em")
            .text (function (d) {return d.data.status;});

        });   
}

Best Answer

After you have done the request you already have the data so you don't need to use d3.json, just feed the data to a selection and work with that.

On d3 you can bind data to a selection (usually data is a javascript array, in this case could be data.rows), and then use that data to create your pie graph as in this example.

So something like:

var piechart = d3.select("#my_pie_chart") // Id of the block you want to use to show your data
    .append("svg:svg")               
    .data(data.rows)                         // Bind the data you already have to the selection                   
    .attr("width", w)
    .attr("height", h)
    ...                                   // Draw the pie chart...
Related Question