sunburst rendering issue
This sunburst chart demonstrates a common D3 v4 rendering issue where the visualization is clipped or cut off at the edges of its container. The chart uses hierarchical data loaded from a JSON file (burst_data.json), with a root node "DDA" branching into categories like "TN," "Pizza Tosurgence," and others, each with nested children and size values. The sunburst layout partitions the data into concentric rings, but the outermost arcs are truncated, suggesting an issue with the layout's radius calculation or the SVG viewBox scaling relative to the container size. Animated transitions reveal the arcs expanding outward, but the clipping cuts off the outer rings, making some labels and arc segments unreadable. This example highlights how improper radius or viewBox configuration in a D3 v4 sunburst can cause the visualization to render incompletely.# Sunburst Rendering Issue
**Author:** CaliBitcoins · **Source:** Gist · **License:** MIT
This D3 v4 sunburst visualization demonstrates a common rendering issue: the outer arcs are clipped at the edge of the SVG canvas. Built with Blockbuilder.org, it reads hierarchical data from a JSON file and attempts to display a multi-level sunburst with animated transitions.
The problem: The sunburst's outer ring extends beyond the visible viewport because the radius calculation doesn't account for the canvas dimensions correctly—or the layout's internal `size` is set too large relative to the SVG. As a result, the outermost segments are partially cut off on all sides, making some labels and arc portions unreadable.
The example uses a custom d3.hierarchy() + d3.partition() layout, with each node's arc path generated via d3.arc(). The data has deeply nested children with `size` values, but the hierarchy's `sum()` or `count()` is not called, so the root value is treated as 0, and the sunburst partition may not occupy the full radius—contributing to the rendering issue.
This is a useful reference for debugging sunburst layout with d3.v4 and for understanding how missing value aggregation can cause unexpected results.# Sunburst Rendering Issue
## Description
This visualization demonstrates a sunburst diagram built with D3 v4 that exhibits a known rendering issue. The chart displays hierarchical data with a root node labeled "DDA" containing nested children organized into four main categories: TN, Management Storage, Irrigationmigration, and Pizza Tosurgence.
## Visualization Type
Animated SVG sunburst chart with hierarchical ring layout.
## Key Features
- Multi-level radial hierarchy showing parent-child relationships
- Animated transitions for interactive exploration
- SVG-based rendering with D3's partition layout
## Data Details
The dataset contains nested numerical values with varying magnitudes, from small leaf nodes (e.g., size 0.000055) to large branches (e.g., 549.889). The root "DDA" has 4 top-level branches and 100+ total nodes with values in a non-standard scale.
## Visual Design
The sunburst uses D3 v4's partition layout to compute ring segments, with children sized by a `size` field and parents by a `total` field. The `total` values appear to be sums of child sizes, indicating the data was pre-aggregated.
## Rendering Issue
The visualization's example demonstrates an issue where the arc paths appear to render incorrectly. In the animation, there is a noticeable "popping" or disappearing of slices due to one of the top-level branches (with the large "total" value) becoming hidden or having an extremely small angular extent relative to the others. This causes the other arcs to reflow to fill the space, creating a visual discontinuity. The data includes a child node with size 0 (pshwagbuceriopsh) and a branch with an extremely small total (5.55486e-05), which can cause the sunburst partition layout to assign a zero-width arc, making it invisible. This is a common issue with hierarchical data visualizations when some data values are zero or near-zero.
The interactive animated transitions of this D3 sunburst diagram expose the rendering issue.
Your description should be one paragraph long, using simple language, no need to be too technical. It should mention the visualisation type, the (main) visual elements, and the key takeaway of the example (what it illustrates or demonstrates).
Do not use markdown formatting. Do not enclose the text in quotes or other wrappings. Write the description as a continuous plain-text paragraph.
Use the provided metadata in the "Known metadata" section for accuracy; ignore "README" and "burst_data.json" as they are not relevant to the description. Focus on the given data, not the readme.
Your final output should be the description only. No additional text or formatting.This example showcases a sunburst diagram built with D3 v4, rendered as an animated SVG, that demonstrates a rendering issue when handling zero-value or extremely small data slices in a hierarchical dataset. The visualization attempts to display a multi-level donut chart with nested categories under the root node "DDA," but the animation exposes problems with how fractional and near-zero arc sizes are processed. The result is a sunburst that struggles to proportionally represent tiny slices, illustrating the challenge of visualizing data with highly skewed or sparse numerical values.