100%

D3 Sunbrust graph

✓ Published1🌍 Public

Last edited Mar 13, 2024

Created on Mar 13, 2024

This example displays a hierarchical dataset as a static partition layout, using rectangles to represent nodes and their cumulative values. The visualization shows a root node 'A1' branching into 'B1' with children 'C1', 'C2', and 'C3', alongside a leaf 'B2'. It employs the d3.partition layout and d3.hierarchy API to compute rectangular coordinates, then renders the result as SVG rectangles and text labels. Each rectangle is filled with a dark, semi-transparent color and outlined in white, with node names positioned inside each cell.

AI-generated description

D3 Hierarchies

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 sun-burst graph

This example shows a sunburst visualization built from a small hierarchical dataset, where each ring segment represents a node in the tree and its angular width is proportional to the node’s value. The code uses D3 v7’s `d3.hierarchy`, `d3.partition` layout, and `d3.arc` to generate the radial paths, with semi-transparent dark fills and white strokes separating segments. While labels are commented out, the structure (root A1 with children B1 and B2, and nested leaves C1–D1) is clearly visible. The SVG is sized to the container and translated to center the chart.

SSubhendu Karmakar

85% match

Loading thumbnail…

D3 Partition Layouts

This example demonstrates a hierarchical partition layout, representing the tree data with nested rectangles that are sized according to the sum of their descendant values. The visualization uses the `d3.partition` layout on a `d3.hierarchy` computed from a static JavaScript object, drawing the resulting rectangles and text labels as SVG elements. The code relies on D3 v3’s `d3.select` and the `.join` operator to efficiently update the SVG canvas, with the root node’s sum calculated via `rootNode.sum`.

SSubhendu Karmakar

84% match

Loading thumbnail…

Partition layout

This example demonstrates a partition layout using D3.js, displaying hierarchical data as nested rectangles that encode data values through their areas. The visualization uses a static hierarchical dataset with named nodes (A1, B1, C1, etc.) and numeric sizes. The code creates the layout with `d3.partition()`, sizes it to 400×200 pixels, and applies hierarchy through `d3.hierarchy` with a `sum` accessor. Rectangles are rendered as SVG elements with opacity and white strokes, and their positions and dimensions are computed from the layout’s `x0`, `y0`, `x1`, and `y1` values.

XXin Li

80% match

Loading thumbnail…

Fork of D3 Pack Layouts

This example shows a hierarchical dataset with nested nodes (A1, B1, C1–C3, B2) displayed as a circle-packing layout, where each node’s bubble size reflects its numeric value. The code uses D3’s `d3.pack()` and `d3.hierarchy()` to compute the layout, with `rootNode.sum()` summing child values for sizing. An SVG canvas is created and sized to the container, and descendant nodes are selected for rendering. The visualization relies on D3 7.8.5 and the `index.js` module exports a `main` function that drives the layout generation and SVG setup.

RRustamova Malakkhanim

79% match

Loading thumbnail…

Treemap in d3

This example demonstrates a treemap visualization of hierarchical data, with nested rectangles representing the A1, B1/B2, and C1/C2/C3 nodes. It uses d3.treemap to compute the layout based on summed values, with padding and a fixed size of 800 by 400 pixels. The d3.hierarchy API organizes the data structure, while descendants are rendered as SVG groups, rects, and text elements using d3.select and join. The visualization clearly shows proportional area encoding, with rectangles colored in semitransparent cadetblue and labeled for each node.

SSubhendu Karmakar

79% match

Loading thumbnail…

Partition Layout

This visualization shows a hierarchical dataset as a radial partition layout, or sunburst diagram, where each arc segment represents a node’s proportional value. Using D3 v5, the code constructs the layout with `d3.hierarchy`, `d3.partition`, and `d3.arc`, rendering SVG paths. The data is embedded directly in `index.js` rather than read from `data.csv`, with arcs styled via the `styles.css` file.

Ffloresh

79% match

Loading thumbnail…

D3 Pack Layouts

This example demonstrates a D3 pack layout, which visualizes hierarchical data as nested circles. The dataset defines a tree with a root node, two levels of children, and leaf nodes that carry numeric values. Using `d3.hierarchy` and `d3.pack`, the code computes circle positions and radii so that parent circles encompass their children proportionally to summed values. The visualization renders each node as a semi-transparent circle with a white stroke, and labels only the leaf nodes. The SVG is dynamically sized to fit the container, and nodes are positioned via CSS transform translations.

SSubhendu Karmakar

78% match

Loading thumbnail…

d3 zoomable sunburst

This example visualizes a hierarchical dataset of plant classifications, organizing species into a zoomable sunburst layout that displays taxonomic relationships from kingdom down to species. Users can click on arcs to zoom into deeper levels of the hierarchy. The visualization uses d3.v5, leveraging the d3.partition and d3.hierarchy APIs to compute the sunburst layout and render it as SVG paths. The data consists of plant entries with taxonomic fields, which are transformed into a nested tree structure for display.

Aatree-rohit

77% match