how to draw a d3 pie chart from a json file

Question

here is the json file

{

"name": "Packages",

"children": [
    {
        "name": "Talks",
        "children": [
            {
                "name": "talk_1",
                "size": 722,
                "url": "www.example_1.com"
            },
            {
                "name": "talk_2",
                "size": 722,
                "url": "www.example_2.com"
            },
            {
                "name": "talk_3",
                "size": 722,
                "url": "www.example_3.com"
            }
        ]
    }
]

}

i want to draw a pie chart from the above code. I want to know how to access the nodes. i want to create a pie chart based on the value "size". Thanks in advance

Answer 1

Edit: See this fiddle, forked from another fiddle, found on stack overflow, using Google. Your pie chart is here more or less as I understand it, labels and all. This took about 5 minutes of research and almost no background in d3. Just saying... did you try at all before you asked?

Knowing little about d3 but much about Google, I searched for "d3 pie chart" and found http://bl.ocks.org/mbostock/3887235.

I then searched for "d3 pie chart json" and found a Stack Overflow answer d3 piechart from local json variable that pointed to this fiddle. http://jsfiddle.net/fg9MU/1/

Now, if you want it to update dynamically, check this example out. http://bl.ocks.org/mbostock/1346410

There are really a wealth of resources on Google.

If you need help with your specific case, here's what you need to do at a high level:

1. Define the chart object and how it will look
2. Create function mapping your objects to numbers
3. Connect (1) and (2)

So to spell it out,

var dataFromYou = [
    {
        "name": "Talks",
        "children": [
            {
                "name": "talk_1",
                "size": 722,
                "url": "www.example_1.com"
            },
            {
                "name": "talk_2",
                "size": 722,
                "url": "www.example_2.com"
            },
            {
                "name": "talk_3",
                "size": 722,
                "url": "www.example_3.com"
            }
        ]
    }
];

var data = dataFromYou[0].children;

var width = 800,
    height = 250,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

var pie = d3.layout.pie()
    .sort(null)
    .value(function (d) {
    return d.size;
});



var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var g = svg.selectAll(".arc")
        .data(pie(data))
        .enter().append("g")
        .attr("class", "arc");

    g.append("path")
        .attr("d", arc)
        .style("fill", function (d) {
        return color(d.data.name);
    });

    g.append("text")
        .attr("transform", function (d) {
        return "translate(" + arc.centroid(d) + ")";
    })
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .text(function (d) {
        return d.data.size;
    });