4

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;});

        });   
}
2

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...
1
  • I was way off track thank you for pointing me in the right direction however I am running into problems with accessing the data. I think there is a problem with how d3 is reading the array. I am getting a error of ( Uncaught TypeError: Object #<Object> has no method 'map') – CrazySpatial Apr 1 '14 at 14:29
-1

specifically for the d3js pie charts, data( [ data.rows ] ) might solve your problem

3
  • Ya I have posted a complete code example <a href="stackoverflow.com/questions/22792051/…> Still not working – CrazySpatial Apr 1 '14 at 17:55
  • 2
    Are you able to expand upon your Answer to perhaps explain why you think it may be applicable? Normally "about a paragraph" is treated as being minimum length for Answers (and Questions here). – PolyGeo Apr 1 '14 at 21:35
  • (just seeeing this now) my comment is no longer relevant as the source code has been updated. but the original issue was that the asker was passing a single element to a method that needed an array. That element should be turned into an array (even an array of one) for the method to work. – jcukier Dec 1 '14 at 6:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.