CODEWITHSUNDEEP
d3.jspie-chart
Abhinaw Kumar
Abhinaw Kumar

Reputation: 132

Use json file instead of csv in d3.js pie chart

There is an example of making pie chart using d3.js https://bl.ocks.org/mbostock/3887235

here in this example .csv file is used.

age,population

<5,2704659
5-13,4499890
14-17,2159981
18-24,3853788
25-44,14106543
45-64,8819342
≥65,612463

I want to use json file.

[
{"age": "<5",
"population": 2704659
},
{"age": "5-13",
"population": 4499890
},
{"age": "14-17",
"population": 2159981
},
{"age": "18-24",
"population": 3853788
},
{"age": "25-44",
"population": 14106543
},
{"age": "45-64",
"population": 8819342
},
{"age": ">=65",
"population": 612463
}
]

what code I need to change in the source file?

I have used 

d3.json("data.json", function(error, data) {

But it not worked for me.

Upvotes: 0

Views: 519

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10612

Look at this pie chart : https://jsfiddle.net/reko91/qkHK6/1942/

Data is like so : 

var data = [{"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":30}];

Makes the container using the data :

var vis = d3.select('#chart')
  .append("svg:svg")
  .data([data])

Makes a variable pie :

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

Then uses this variable :

var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");

Which in turn gets used to create the slices : 

arcs.append("svg:path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d) {
    // log the result of the arc generator to show how cool it is :)
    console.log(arc(d));
    return arc(d);
  });

There you go, pie chart made via json :)

This is just an example, obviously can't implement the exact changes unless you show us your code

Upvotes: 0

Related Questions