Aster Plot in D3

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.

深深度碎片

[TEST] Pie Chart

This pie chart displays the distribution of credit ratings, with values ranging from 0% to 73.2%, using a static SVG rendering. The chart uses d3.pie and d3.arc to generate the segments, with d3.scaleOrdinal assigning colors from a custom palette. A legend, built with SVG rectangles and text elements, lists each rating label alongside its numeric percentage. Data is loaded from a JSON file via d3.json, with string values converted to numbers before the chart is rendered. The visualization includes a tooltip that logs data values to the console on mouseover.

Mmbehiry-CW

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

Pie Chart

This example visualizes rating distributions as a pie chart, where each slice represents a categorical rating (such as "AAA Local" or "BBB- Internacional") with its corresponding percentage value. The chart reads input data from a JSON file and displays each category with a color-coded slice, accompanied by a legend on the right listing the label and exact percentage. Built with D3 v5, the code uses the `pie` layout generator to compute arc segments, `arc` for rendering paths, and `scaleOrdinal` for categorical color assignment. The SVG output is generated using the `select` and `append` API to construct both the pie slices and the legend elements.

SSRI RAM REDDY KOTERU

pie

A donut chart displays the distribution of votes among four options, with each arc segment sized proportionally to its vote count. The visualization uses d3.js v4 to compute arc paths via `d3.pie` and render them as SVG paths with a white stroke, while text labels positioned along the outer radius identify each option. Data is hardcoded as a JavaScript array, and colors are assigned randomly using `d3.scaleOrdinal` with the `schemeCategory20` palette.

RRonolibert

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

Pie chart RDW

This example displays a pie chart of yearly values using D3.js, rendering four labeled slices with a categorical color scheme. The visualization is built with the `d3.pie` layout function and `d3.arc` for paths and labels, rendered as SVG. It uses `d3.scaleOrdinal` for colors and `d3.schemeCategory10` for the palette, with data hardcoded in the script. The chart is centered using an SVG group transform, and each slice’s year is placed via the label centroid.

SSergio Eijben

Hhanulik.ondrej@gmail.com

Easy Pie Chart

This example displays a simple pie chart with four slices, using colors and numeric labels to represent the provided dataset. The chart is built with D3 v4 on an SVG canvas, where a group element is centered and `d3.pie()` computes the start and end angles for each arc. These angles are rendered using `d3.arc()` with a specified inner and outer radius and pad angle, while `d3.scaleOrdinal` assigns the slice colors. Each wedge is labeled with its data value using `arc.centroid` to position the text.