StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I figured it out. I used this code and customized it for JSON</p> <p><a href="https://gist.github.com/enjalot/1203641" rel="nofollow">https://gist.github.com/enjalot/1203641</a></p> <p>Here is what I got</p> <pre><code>(function() { var w = 670, //width h = 326, //height r = 150, //radius color = d3.scale.category20c(); //builtin range of colors d3.json("script.php", function (data) { var vis = d3.select("body") .append("svg:svg") //create the SVG element inside the <body> .data([data]) //associate our data with the document .attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag .attr("height", h) .append("svg:g") //make a group to hold our pie chart .attr("transform", "translate(" + r + "," + r + ")") //move the center of the pie chart from 0, 0 to radius, radius var arc = d3.svg.arc() //this will create <path> elements for us using arc data .outerRadius(r); var pie = d3.layout.pie() //this will create arc data for us given a list of values .value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet) .data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) .enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array .append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice) .attr("class", "slice"); //allow us to style things in the slices (like text) arcs.append("svg:path") .attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above .attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function arcs.append("svg:text") //add a label to each slice .attr("transform", function(d) { //set the label's origin to the center of the arc //we have to make sure to set these before calling arc.centroid d.innerRadius = 0; d.outerRadius = r; return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50] }) .attr("text-anchor", "middle") //center the text on it's origin .text(function(d, i) { return data[i].col; }); //get the label from our original data array }) })(); </code></pre> <p>So what was wrong was that I wasn't connecting the key values from the JSON, to the variables in the JS. Here are the lines to change:</p> <pre><code>var vis = d3.select("<PUT DIV ID HERE>") .value(function(d) { return d.<PUT NUMBER VALUE KEY NAME HERE>; }); .text(function(d, i) { return data[i].<PUT SLICE CATEGORY HERE>; }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload