As a newcomer to d3.js, I've been experimenting with creating pie charts. One of my projects involves a pie chart divided into 19 segments (see Picture 1) based on data from a CSV file (see Picture 2). Each segment represents a year, with the area indicating its score. If you'd like to view the images, you can check them out here.
My current goal is to establish a parent-child relationship within the CSV data, similar to the structure shown in Picture 3 (each year containing 5 continents). You can view the image here. The sum of the scores for the five continents should equal the total score for that specific year.
Additionally, I aim to transform the pie chart so that each segment is divided into 5 layers, going from the innermost to the outermost layer.
I've provided a snippet of my code below. Can someone guide me on how to create the hierarchy as outlined? If the structure shown in Picture 3 is incorrect, what would be the right approach to defining it?
Do I need to work with JSON data? If so, how should I adjust the data loading section from CSV files to accommodate JSON files?
var width = 650, height = 650, radius = Math.min(width, height) / 2, innerRadius=0;
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.width; });
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(function (d) {
return (radius - innerRadius) * Math.sqrt(d.data.score / 2900.0) + innerRadius;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//data loading
d3.csv('./src/InCountry-v1.csv', function(error, data) {
data.forEach(function(d) {
d.id = d.year;
d.order = +d.order;
d.color = d.color;
d.weight = +d.weight;
d.score = +d.score;
d.width = +d.weight;
d.label = d.label;
});
var path = svg.selectAll(".solidArc")
.data(pie(data))
.enter().append("path")
.attr("fill", function(d) { return d.data.color})
.attr("class", "solidArc")
.attr("stroke", "gray")
.attr("d", arc)
.attr("opacity",0.5)
.on("mouseenter", function() {d3.select(this)
.style("fill", function(d) { return d.data.color})
.attr("opacity",1); })
.on("mouseleave", function() { d3.select(this).attr("opacity", 0.5); });