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 used3.json
, just feed thedata
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 bedata.rows
), and then use thatdata
to create your pie graph as in this example.So something like: