Rellenar el gráfico D3 con Cartodb

Question

He estado mirando D3 y siguiendo sus tutoriales básicos. En la documentación se puede utilizar archivos json para crear gráficos, sin embargo estoy confundido sobre cómo hacer la conexión de mi consulta cartodb, a la entrada de D3. Para aclarar que he hecho una consulta exitosa a mi tabla cartodb y devuelve los resultados de allí tengo que hacer una conexión de mi consulta json devuelto a 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) {

En última instancia, estoy tratando de crear un simple gráfico circular de cuántos registros se encuentran dentro de 4 estados diferentes.

ACTUALIZACIÓN : He podido conseguir un gráfico circular que funciona. Uno de mis problemas estaba pasando objeto json en lugar de un código array.posted abajo.. espero que esto ayuda a otros

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

        });   
}

Answer 1

Después de haber hecho la solicitud ya tiene el data por lo que no es necesario utilizar d3.json , solo hay que alimentar el data a una selección y trabajar con ella.

En d3 puedes vincular los datos a una selección (normalmente data es un array javascript, en este caso podría ser data.rows ), y luego utilizar ese data para crear su gráfico circular como en este ejemplo .

Así que algo como:

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...

Answer 2

Empezar con un punto $(x,y)$ con $x$ y $y$ no están relacionados. Entonces, como la relación es reflexiva, contiene la diagonal. Ahora bien, como la relación es cerrada, su complemento es abierto y hay un vecino de $(x,y)$ que no la cruza. A continuación, piensa en cómo podría ser la base de la topología del producto...