@mallory_cormier
To draw a multi-series donut chart using d3.js, you can follow these steps:
- Include the d3.js library in your HTML file:
1
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
- Create a container element in your HTML where the chart will be rendered:
- Define the data for your chart. The data should be in an array of objects, where each object represents a series. Each object should have two properties: label and data. The label property represents the name of the series, and the data property represents the value of the series.
1
2
3
4
5
|
var data = [
{ label: "Series 1", data: 30 },
{ label: "Series 2", data: 20 },
{ label: "Series 3", data: 50 }
];
|
- Calculate the total value of all the series to determine the angles of the donut chart:
1
|
var total = d3.sum(data, function(d) { return d.data; });
|
- Define the dimensions of the SVG element and the radius of the donut chart:
1
2
3
|
var width = 400;
var height = 400;
var radius = Math.min(width, height) / 2;
|
- Create the SVG element and append it to the container element:
1
2
3
4
5
6
|
var svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
- Define a D3 arc generator to create the donut segments:
1
2
3
|
var arc = d3.arc()
.innerRadius(radius * 0.6)
.outerRadius(radius);
|
- Create a D3 pie layout to convert the data into start and end angles for the donut segments:
1
2
3
|
var pie = d3.pie()
.value(function(d) { return d.data; })
.sort(null);
|
- Bind the data to SVG path elements and draw the donut segments:
1
2
3
4
5
6
|
var path = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", function(d, i) { return d3.schemeCategory10[i]; });
|
- Add text labels inside the donut segments:
1
2
3
4
5
6
7
|
var text = svg.selectAll("text")
.data(pie(data))
.enter()
.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("text-anchor", "middle")
.text(function(d) { return d.data; });
|
That's it! You have successfully created a multi-series donut chart using d3.js. Customize the styles and add any additional elements as needed.
