How to draw a d3.js pie chart from a json file?
How to draw a d3.js pie chart from a json file?
1 answer
by
aubrey ,
9 months ago
@darion
To draw a d3.js pie chart from a JSON file, you will need to follow these steps:
- Load the JSON file using d3.json() function:
1 2 3 |
d3.json("data.json").then(function(data) {
// Your code to draw pie chart will go here
});
|
- Create a pie chart using d3.pie() function to create the pie layout:
1 2 3 |
var pie = d3.pie()
.value(function(d) { return d.value; });
var data_ready = pie(data);
|
- Create an arc generator using d3.arc() function to define the shape of the slices:
1 2 3 |
var arcGenerator = d3.arc() .innerRadius(0) .outerRadius(100); |
- Create SVG element and draw the pie chart using d3.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var svg = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 200)
.append("g")
.attr("transform", "translate(100,100)");
svg.selectAll("path")
.data(data_ready)
.enter()
.append("path")
.attr("d", arcGenerator)
.attr("fill", function(d) { return d.data.color; });
|
Replace "data.json" with the path to your JSON file and make sure that your JSON file has a structure like this:
1 2 3 4 5 |
[
{"value": 30, "color": "red"},
{"value": 20, "color": "blue"},
{"value": 50, "color": "green"}
]
|
This code will read the data from the JSON file and draw a simple pie chart with three slices using d3.js. You can customize the appearance and layout of the pie chart based on your specific requirements.