necklace around square

gems on top of square

A square chart area displays nine colored circles, each connected by a dashed line to a corresponding icon positioned evenly along the top edge. The visualization overlays two gradient backgrounds—one horizontal and one vertical—using CSS `mix-blend-mode` for a blended effect. Built with D3 v4 in SVG, the code uses `d3.pie`, `d3.scaleLinear`, and `d3.scaleOrdinal` to position data points randomly and assign colors. A crosshair grid and a legend-like icon row clarify spatial relationships.

PPatrick Wojda

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

Gist 937986

A single red donut chart fills the entire 800-by-800-pixel SVG canvas, showing five equal slices that together form a complete ring. The visualization uses D3's `d3.layout.pie` to compute the arc angles and `d3.svg.arc` with an inner radius set to 95% of the outer radius, producing a thin, ring-like donut rather than a thick pie. Each slice is filled with the same solid red color, and the data comes from a hardcoded array of five 20s in the sample.coffee file. The rendering approach relies on SVG `path` elements grouped in `<g>` elements, with the entire chart translated to the center of the canvas.

CCaged

Untitled

This example shows a donut chart that visualizes a small dataset of five categorical values, with each slice colored distinctly and separated by black strokes. The chart uses D3.js version 6, where `d3.pie()` computes the arc angles from the data and `d3.arc()` generates the SVG path geometries with an inner radius creating the donut hole. A color scale via `d3.scaleOrdinal()` maps each category to a unique color, while the SVG rendering is sized and centered within a fixed 450×450 viewport. The slices are semi-transparent and rendered as SVG path elements appended to a grouped container.

Nnicolekevans

playground #2

This example shows a donut chart with three randomly sized and colored slices rendered as SVG paths. The code uses React to build the component, while D3 v7 provides the `pie` generator and `arc` generator to compute the angular layout and path geometry. Slice values come from `d3.randomUniform`, and each color is generated as a random hexadecimal string. The chart is centered in a fixed 900 by 600 viewport with an inner radius of 60 and outer radius of 200.

Bbart

Arc Corners

This example demonstrates D3’s rounded-arc capability by rendering a donut chart where each slice has rounded corners and small gaps between adjacent segments, using the Fibonacci sequence as sample data. The visualization is drawn as SVG, with the arcs generated by `d3.layout.pie` and `d3.svg.arc`’s `cornerRadius` and `padAngle` options. Overlaid on the chart are faint reference circles that mark the exact positions where the arc corners are rounded, computed manually from each slice’s angles and radii. The code also applies a category color scale and semi-transparent fills to distinguish the slices.

Mmbostock

Arc Corners IV

A donut chart presents eight sequential values from a hardcoded Fibonacci-like array as colored wedges with rounded outer corners. The d3.svg.arc generator applies a cornerRadius of 20 pixels, while d3.layout.pie sets a padAngle to separate slices. Rendered as SVG paths in a centered group, each wedge uses a category10 color scale. The visualization highlights how rounded corners and padding soften the classic pie chart aesthetic, using D3 v3’s layout and shape APIs.

Mmbostock

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