Question

so i have an already working jquery ajax application that i’m trying to create graphs for using d3js. i’m pretty familiar with jq but this is my first project using d3.

so, my html file using jquery.ajax to request json encoded data from a php script/mysql db. all my data is returned in a format similar to this:

{"status":"Failed","msg":"Bad request."}

or if it’s data like this (this is an age breakdown of users):

{"status":"Found","msg":{"under_18":103,"18-23":841,"24-29":1436,"30-36":1058,"37-46":907,"47-56":483,"over_56":200}}

i already have login/session/cookie stuff working with jq. i can request data from my ajax api, format it, and draw it to the screen with no problem.

so im trying to use d3js to create a pie chart w/ the 2nd json blob i posted above. here’s a the snip of code i’m working on:

function ageDemographics() {
    closure(
        'action=ageDemographics',
        function(result) {
            var width = 200,
                height = 200,
                outerRadius = Math.min(width, height) / 2,
                innerRadius = outerRadius * .6,
                data = d3.values(result.msg),
                color = d3.scale.category20(),
                donut = d3.layout.pie(),
                arc = d3.svg.arc().innerRadius(0).outerRadius(outerRadius);
            var vis = d3.select("#ageDemographics")
              .append("svg")
                .data([data])
                .attr("width", width)
                .attr("height", height);
            var arcs = vis.selectAll("g.arc")
                .data(donut)
              .enter().append("g")
                .attr("class", "arc")
                .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
            arcs.append("path")
                .attr("fill", function(d, i) { return color(i); })
                .attr("d", arc);
            arcs.append("text")
                .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
                .attr("dy", ".35em")
                .attr("text-anchor", "middle")
                .attr("display", function(d) { return d.value > .15 ? null : "none"; })
                .text(function(d, i) { return d.value.toFixed(2); });
        },
        function(xhr, status, thrown) {
            setupLoginForm();
            $('#error').html('You have been logged out.<br class="clear"/><br/>');                      
        }
    );
}
function closure(data, success, error) {
    $.ajax({
        type: "POST",
        url: 'http://localhost/analytics/api/ajax.php',
        data: data,
        cache: false,
        success: success,
        error: error
    });
}

i’m using the pie example from the d3js git repo and the chart is rendering “ok”, but on line #9 in the above code i’m calling:

data = d3.values(result.msg),

to pull out the values for d3 to generate the pie chart. but the labels on the pie are the values, which i gave it, but i’d like to display the keys instead.

e.g. “under 18”, “18-23”, etc, etc…

is this possible?
on line #31 i’m setting the text with:

.text(function(d, i) { return d.value.toFixed(2); });

but in this case “d” is just the numeric value. i was thinking i could use “i” to look up the key in the original “result.msg” but since the keys are strings not integers (like an array) i’m not sure how to do this.

ok, so i solved my problems. see my answer below, here’s a new question,
is it possible to move the labels out side the pie? or on rollover?

Answer 1

i figured it out.

to create the labels:

labels = d3.keys(result.msg)

then on line 31:

.text(function(d, i) { return labels[i]; });

i hacked on this code for a whole day, and as soon as i posted it here i figured it out. lol