D3 Piechart

100%

D3 Piechart - Semi Circular

✓ Published1🌍 Public

Last edited Dec 29, 2023

Created on Dec 29, 2023

This example displays a semi-circular pie chart, also known as a donut chart, rendered as SVG. Six data values are visualized as orange arcs with white strokes, arranged from left to right across a half-circle. The visualization uses the d3 pie generator, configured with start and end angles to create the semi-circular shape, and the d3 arc generator to define the inner and outer radii. The arcs are drawn as SVG path elements using the `d3.select` API.

AI-generated description

D3 Scales - scaleTime()

D3 In Depth

MIT Licensed

Similar vizzes

Loading thumbnail…

This example shows a simple pie chart built from a static array of six numeric values, rendered as filled orange arcs with white strokes on an SVG canvas. The chart is generated using the d3 pie generator to compute arc segments, while the d3 arc generator defines the inner and outer radii for the donut-style shape. The visualization uses d3’s select and join methods to bind the computed arc data to SVG path elements, with styling applied through CSS and inline attributes.

SSubhendu Karmakar

93% match

Loading thumbnail…

D3 Layouts - Pie charts

This example shows a donut-shaped pie chart that visualizes a small dataset of six numeric values. The chart is rendered as an SVG, with each value displayed as a white label at the centroid of its corresponding arc. The code uses D3’s `pie` layout generator to compute the arc segments, `d3.arc` to define the ring’s inner and outer radii, and `d3.scaleOrdinal` with `d3.schemeCategory10` to assign categorical colors. The chart is drawn using D3’s select/append API on a blank HTML page.

KKaustav Sen

88% match

Loading thumbnail…

D3 Piechart - with labels

This example shows a pie chart of fruit quantities, with each slice labeled by its fruit name. The chart uses the `d3.pie()` generator to compute arc data, and `d3.arc()` with inner and outer radii to create a donut-like shape. Slice paths are rendered in orange with white strokes, and labels are positioned at each arc’s centroid using `arcGenerator.centroid(d)`. Data is hard-coded in the JavaScript, and the visualization is drawn as SVG within an HTML page, styled by CSS.

SSubhendu Karmakar

88% match

Loading thumbnail…

D3: Pie layout

This example shows a donut chart built with D3.js, displaying six numeric values as colored arc segments arranged around a central hole. Each segment is labeled with its corresponding value, positioned at the centroid of the arc. The visualization uses the `d3.pie()` layout to compute the angles and `d3.arc()` to generate the SVG path shapes, with an ordinal color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`) assigning colors. Data is hardcoded as an array, and all rendering is done via SVG elements in d3.v4.

深深度碎片

87% match

Loading thumbnail…

D3 Shapes - Pi Charts

This example shows how to create a simple donut chart using D3’s arc generator. Five arc segments with varying start and end angles are rendered as SVG paths inside a single group, all filled with solid orange. The code configures the arcs with inner and outer radii, padding, and rounded corners via `d3.arc()`, then binds the data array to path elements using `.join()`. The visualization relies on D3 v7 and static SVG output, with no interaction or animation.

SSubhendu Karmakar

86% match

Loading thumbnail…

Pie chart

This pie chart example shows a donut-shaped chart with a solid orange center, rendered as an SVG using D3 v5. The chart displays four data segments (10, 20, 30, 60) with a color scale based on `d3.scaleOrdinal`, while radio buttons allow switching between apple and orange datasets (though only the orange dataset is actively rendered). The visualization uses `d3.arc()` to generate both the outer ring and inner circle paths, with the chart positioned at three-fifths of the SVG height.

JJoachimSchaeffer

86% match

Loading thumbnail…

D3 piecharts

This example visualizes data as a set of pie charts rendered with SVG, with each chart’s arcs sized relative to its slice values. Built using D3 v4 within a React starter setup, the code creates a single pink-background SVG, centers a `<g>` container via an explicit transform, and appends pie chart elements directly to it. The visualization relies on D3’s selection and SVG primitives, with layout logic implied through D3’s pie and arc generators.

Oonika123

82% 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

82% match