Skip to main content
SimilarExport ZIP
100%

Reusable Donut Chart in D3 v4

✓ Published0🌍 Public
TThanaporn-sk
Last edited Jul 28, 2017
Created on Jul 28, 2017

This donut chart displays species probability data from a TSV file, with each slice colored by species and labeled with its percentage. The chart is implemented as a reusable D3.js v4 function, using `d3.pie()` to compute slice angles, `d3.arc()` for rendering with configurable corner radius and padding, and `d3.scaleOrdinal()` with a categorical color scheme. Hovering over a slice or its label shows a tooltip with the species name and percentage in the donut’s center—a feature built from D3’s selection and event handling. The SVG output includes text labels and connecting polylines, styled via CSS.

AI-generated description

I'm relatively new to d3.js and know it can be tough getting started as a lot of bl.ocks and tutorials don't have what I would consider adequate comments.

One of the first real-world problems I had to tackle with d3 was a donut chart (which would eventually need to be dynamic).
I flew around stackoverflow, google, bl.ocks, and everything inbetween trying to get my head around how to make one. I eventually got something up and running but the code was a bowl of spaghetti and I had no idea how it was actually working.

What I decided to do in the end was to start with a clean slate and build the pieces one-by-one. I have been helped immensely by juancb's bl.ock and the Pie Chart Update series by Mike Bostock.

Two of the main goals I wanted to achieve with making this were:

  1. Make the chart reusable. Which, in my opinion, is one of the most important concepts in d3.
  2. Make it using d3 v4, as most tutorials I come across are still in d3 v3.

Going through the process of making a chart reusable really helps in understanding how all the pieces fit together and boosts your understanding of how charts are constructed.

I worked through the tutorials mentioned above until I understood (pretty much) every line of code. I went to town on the comments because:

  • I will be very thankful for it in 6 months time.
  • I hope it will help out someone else in my position 3 months ago.

This donut chart has a tooltip that appears in the centre of the donut when the mouse enters a chart slice or hovers over a species name. By making the chart in this reusable fashion I think you should be able to easily tweak any settings to meet your needs. If you do need any help or advise with this those feel free to get in touch.

This is my first bl.ock so please let me know if there are any issues or things I can improve on.
I am also working on a dynamic, updating version of this so I will add and link that when it is done.

Next: Dynamic, reusable chart.

forked from <a href='http://bl.ocks.org/mbhall88/'>mbhall88</a>'s block: <a href='http://bl.ocks.org/mbhall88/b2504f8f3e384de4ff2b9dfa60f325e2'>A static, reusable donut chart for D3.js v4.</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Reusable Donut Chart in D3 v4

This reusable donut chart, built with D3 v4, displays the probability distribution of bacterial species in a sample. It renders an interactive SVG donut with labeled slices and connecting lines, and shows a tooltip in the center when hovering over a slice or species name. The chart is implemented as a reusable function using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, with data loaded from a tab-separated values file. It features animated transitions and customizable parameters like corner radius and pad angle.

EEndNight95
93% match
Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
83% match
Loading thumbnail…

Fork of Donut Chart v2

This donut chart displays proportional data from a JSON file (data.json) with country names and numeric sums, rendered as an SVG using D3.js v4. The visualization uses a pie layout with a half-radius inner hole and divergent color scheme from d3-scale-chromatic. Labels are positioned outside the arcs using polyline connectors and text elements, with the arc generator determining slice geometry and outerArc handling label placement. The example demonstrates D3’s modular approach to building interactive, data-driven graphics.

MMaeva B
82% match
Loading thumbnail…

Donut-Pie Chart

This donut-pie chart visualizes hierarchical data from a CSV file, showing current statuses in the outer donut ring and prior statuses in the inner pie, with color coding for New, Open, Reopened, and Closed categories. Built with d3.v3, it uses `d3.layout.pie`, `d3.svg.arc`, and `d3.nest` to aggregate and structure the data, rendering as SVG. The outer arc and inner wedge paths are styled with distinct radii, and labels are positioned via arc centroids.

TThanaporn-sk
81% match
Loading thumbnail…

donut chart w. d3-annotations

A donut chart displays six categorical values as proportional slices, with annotations positioned to the left and right of the chart. A center label appears above the visualization, though the annotation rendering is commented out, leaving only red translucent circles marking annotation anchor points. The chart uses the d3-annotation library alongside d3.v4, building the pie and arcs with `d3.pie()` and `d3.arc()`. A `d3.forceSimulation` with collision and X-axis forces arranges the right-side annotation positions, while the data is hardcoded as an array of value-label-color objects.

PPatrick Wojda
81% match
Loading thumbnail…

Donut Chart

This donut chart displays five equal segments, each representing a donut count of 1000 from the Data.json file. The circular visualization uses a ring geometry with an inner radius of 140 and outer radius of 185, with segments colored green, blue, yellow, red, and teal. The visualization is built using D3 version 5, leveraging the `pie` API to compute arc segments and the `arc` API to generate the SVG paths. A `scaleOrdinal` color scale maps the data values to the custom color palette. The chart reads its data asynchronously from a JSON file and renders within an SVG element on an HTML page.

Xxyzcorrupt@gmail.com
81% match
Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07
81% match
Loading thumbnail…

Donut Chart - Default Labels

This example shows a donut chart where each slice is labeled with an animal name, with the text placed along the arc starting at each slice’s beginning. The chart uses D3.js version 3.5.6, with `d3.svg.arc` for the donut slices and `d3.layout.pie` to compute the arc angles from a hardcoded dataset of eight animal values. Color is assigned via a linear scale with an HCL interpolator, and labels are rendered using SVG `<textPath>` elements referencing the arc paths. The data is embedded directly in the script rather than loaded from an external file.

SShuanWu
81% match