D3 - using SVG Bounding Box to get the "automatic padding"

100%

D3 - using SVG Bounding Box to get the "automatic padding"

✓ Published0🌍 Public

Last edited Oct 22, 2011

Created on Oct 22, 2011

This example demonstrates how to dynamically adjust an SVG chart's viewBox based on the bounding box of its contents. It uses D3.js to render axes, titles, and tick marks, then toggles the y-axis domain between 100 and 999,999,999 every second. After each domain change, the code calls `getBBox()` on the SVG element to compute the new bounding box and updates the `viewBox` attribute, automatically providing padding that accommodates the rescaled axis labels. The animation cycles indefinitely using `setInterval`.

AI-generated description

Similar vizzes

Loading thumbnail…

[separate SVG boxes ] Update speed based on number of SVG elements in viewBox

Two adjacent SVG boxes animate the movement of a red rectangle while displaying a live frame-rate counter. The performance benchmark is controlled through dropdown menus and a checkbox, allowing the user to adjust the number of green circles rendered inside the second viewBox and toggle whether they remain within it. The example uses d3.js selectors and data binding to update circle positions dynamically, while a setInterval timer drives the rectangle’s movement and calculates frames per second from timestamp differences.

ZZJONSSON

76% match

Loading thumbnail…

Margin Convention

This example illustrates the margin convention for D3.js v3, visualizing the layout of an SVG chart with outer and inner padding rectangles. Dashed and solid outlines mark the chart area while arrows label the origin and padding offsets. The code defines margin and padding objects, then uses `d3.svg.axis()` to position bottom and right axes on translated `g` elements. SVG markers create arrowheads for dimension annotations, and `d3.scale.identity` maps pixel coordinates, demonstrating how margins simplify chart construction by separating layout concerns from scale ranges.

Mmbostock

72% match

Loading thumbnail…

D3 Estimate Axis Text + Tick Buffers

This example measures and displays the pixel width required by a D3 axis, including its tick marks and tick text labels. It uses a categorical axis with three names, 'bob', 'billy', and 'bobicus', rendered as an SVG via `d3.axisLeft` and an ordinal scale. The code calculates the buffer space needed for these elements, providing a practical reference for layout when positioning additional chart components beside an axis. The implementation uses D3 v7 and appends the axis to an SVG canvas sized to the browser window.

Sselkamand

71% match

Loading thumbnail…

Dynamic Size Example

This example demonstrates a dynamic, resizable visualization using the d3-boxes library, which computes nested rectangular layouts. When the browser window is resized, the `redraw` function recalculates the layout based on the new `clientWidth` and `clientHeight`, and updates an SVG graphic. The layout defines a vertical arrangement of boxes, including a horizontal sub-group whose size weight is doubled, and box "A" is given a size weight of 2. Each box is drawn with a colored rectangle, an X-shaped pair of lines, and a centered text label, all managed through D3's selection and merge APIs.

AAlainRo

71% match

Loading thumbnail…

Viewport and viewBox

This example demonstrates how the SVG `viewBox` attribute changes the visible portion of a fixed-size canvas while using D3.js v7 to construct the scene. It draws a single blue circle inside a red-bordered `<svg>` element, then applies a `viewBox` with negative offsets and scaling to translate and zoom the coordinate system. The code uses `d3.select` to append the SVG and its child `<g>` element, and it utilizes the SVG API to inspect the geometry. The fixed width and height remain constant while the viewport shifts, showing how coordinates map differently in the rendered output.

GGiuliaPassoni

71% match

Loading thumbnail…

Update speed based on number of SVG elements in viewBox

A benchmark animates a red rectangle inside an SVG viewBox, while a grid of green circles is regenerated based on a user-selected count (500 to 10,000) and a toggle to place them inside or outside the viewBox. The animation updates the rectangle’s x-coordinate via `setAttribute` at maximum speed, and the visible FPS counter displays the resulting update rate. Using D3.js, it appends SVG circles based on the current `num_circles` and `inside` checkbox values, demonstrating how the number of rendered SVG elements affects rendering speed.

ZZJONSSON

71% match

Loading thumbnail…

Margin Convention

A demonstration of the D3 margin convention for laying out SVG charts. The visualization shows nested rectangles and axis arrows with labels that clarify the positions of margins, padding, and the coordinate origin. The code uses `d3.select` to append an SVG, `d3.svg.axis` for the bottom and right axes, and `d3.scale.identity` for linear scaling. It explicitly defines `margin` and `padding` objects in JavaScript and translates a G element to establish the chart origin, rendering axes and annotations in SVG.

FFrissAnalytics

70% match

Loading thumbnail…

Margin Convention

FFrissAnalytics

70% match