Skip to main content
100%

quick example of nested elements from one data set

✓ Published0🌍 Public
Aandyreagan
Last edited Jun 15, 2016
Created on Jun 15, 2016

This example shows two alternative ways to render the same dataset as two sets of rectangles along shared axes. The nested version first creates a group element for each data point, then appends one rectangle scaled by the primary y-scale and another by the secondary y2-scale within each group. The non-nested version instead selects separate rectangle classes, binding the data twice and assigning each class its own scale. Both approaches use D3.js selection methods such as `selectAll`, `data`, `enter`, and `append`, with `attr` setting positions and sizes based on an x index and the y or y2 scales.

AI-generated description

Similar vizzes

Loading thumbnail…

re-render elements

This example demonstrates how D3’s data join handles re-rendering when the dataset changes. It creates an SVG with five rectangles, first rendering three red rectangles from the array [1, 2, 2.5], then re-rendering with five blue rectangles from [1, 2, 3, 4, 5]. The code uses `d3.scaleLinear` to map data values to x-coordinates, and `selectAll`, `data`, `enter`, `exit`, and `merge` to update the DOM. Exiting rectangles are removed, while new ones are appended and colored according to the latest render call.

Aal1s
72% match
Loading thumbnail…

Rectangles using data

This example shows how to bind a hardcoded JSON dataset of four rectangles—each with position, size, color, and a name—to SVG elements using D3 v4. It first creates the rectangles via `d3.selectAll("rect").data(...).enter().append("rect")`, then sets their `x`, `y`, `width`, and `height` attributes and `fill` style from the data. It also appends text labels next to each rectangle, positioning them relative to the rectangle’s coordinates and size. The visualization demonstrates basic data joins and attribute binding in D3, with the source data defined inline in the script.

IIgathi
70% match
Loading thumbnail…

Rectangles using data Color II

This example shows seven rectangles, each filled with a distinct color from a hardcoded JSON dataset that defines their position, size, color, and name. The rectangles are rendered on a 960 by 500 pixel SVG canvas, with each rectangle labeled next to it using its corresponding name. The code uses D3 v4’s selection and data binding to append a group for each data element, then appends a `rect` and a `text` child to each group. The rectangles use a black stroke for clarity, while the text is styled in a monospace font. The data source is an inline array of objects, and the rendering relies on D3’s SVG manipulation.

IIgathi
69% match
Loading thumbnail…

Nested Elements

This example demonstrates nested SVG elements by rendering a bowl of fruit as circles within groups. It shows how to manage enter, update, and exit selections with D3 v5, using `scaleOrdinal` for color and radius mapping. The visualization updates over time via `setTimeout`, removing fruits, changing an apple to a lemon, and filtering the data array. Rectangles anchor the bowl, while groups position each circle and its corresponding text label.

AAjit Singh
67% match
Loading thumbnail…

expandable-rectanges

This example shows a set of rectangles that expand and contract when clicked, revealing hidden nested content. Built with D3 v3 and rendered as animated SVG, the visualization uses custom helper functions from d3-jetpack to simplify attribute handling and transitions. Rectangles are likely bound to hierarchical data, with expansion triggered by mouse events to reveal child nodes or additional details. The animation is driven by D3's transition system, and the layout adapts to the data's depth. The code relies on a lightweight d3 starter kit for scales and axes, while the jetpack library provides syntactic sugar for concise, readable D3 code.

11wheel
67% match
Loading thumbnail…

scatter rectangles

This example shows a scatterplot where each point is a rectangle, with its width and height encoded as, well, width and height—the actual visual size of the rectangle corresponds to the data values. The visualization uses a force-directed layout with a custom rectangle-collision constraint, so the rectangles push apart and settle into a non-overlapping arrangement. Rendered as an animated SVG, the rectangles drift and rearrange themselves in response to the forces, creating a dynamic, organic distribution. The code builds on an earlier rectangle-force block by Elijah Meeks and uses D3's force module (d3-force v1.0.0) along with the d3v4+jetpack convenience library. The animation makes the spatial encoding of each rectangle's dimensions immediately visible as the rectangles jostle and find their positions.

11wheel
67% 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
67% match
Loading thumbnail…

Rectangles data Color Jason Zoom

This example shows three colored rectangles, each labeled with a color name, positioned at fixed coordinates on an SVG canvas. The visualization maps a small JSON dataset, where each object defines the rectangle’s x/y position, width, height, fill color, and label, directly to SVG elements. Using D3 v4, the code binds the data to `rect` elements via `selectAll` and `data`, then sets the geometry attributes (`x`, `y`, `width`, `height`) and inline `fill` style from the data. It also appends `text` elements to display each rectangle’s name, with labels placed near the shapes using computed offsets. The rendering approach is purely SVG-based, with no axes or scales, presenting a straightforward data-driven layout.

IIgathi
66% match