Viewport and viewBox

100%

Viewport and viewBox

✓ Published0🌍 Public

Last edited Jan 11, 2023

Created on Jan 10, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

181202_01_Viewport

This example demonstrates how the SVG viewport and viewBox interact to scale a coordinate system. A set of vertical and horizontal path elements, drawn as colored lines, is defined within a viewBox of “0 0 100 50” and rendered inside an SVG element with a blue border. The number of horizontal and vertical lines is parameterized, and their positions are calculated dynamically using D3’s `range` function. The code uses D3 v5 to append paths to the SVG, while line styling is specified in an external CSS file.

LLudovicGouverneur

80% match

Loading thumbnail…

181202_02_ Divide window_01

This example demonstrates how SVG viewport and viewBox attributes control the scaling and positioning of graphical elements within a designated area. It displays a grid of vertical and horizontal paths, along with a row of circles, all rendered within a single SVG element. The code uses D3 v5 selection methods to bind data and append elements, while CSS styles define the line colors. The viewBox is not hardcoded but is derived from parameterized dimensions for the grid and shapes.

LLudovicGouverneur

76% match

Loading thumbnail…

181202_02_ Put some balls in

This example demonstrates how SVG viewport and viewbox scaling affect the rendering of graphical elements by dividing a single `<svg>` into a grid of paths, circles, and rectangles. The visualization shows a 7-by-30 grid of green and red grid lines, overlaid with blue circles and yellow squares, which can be interactively zoomed and panned using d3.zoom. The code uses D3 v5 selections (`select`, `selectAll`, `data`, `enter`) to generate the SVG elements dynamically, with all styling defined in CSS. The zoom functionality applies a transform to the entire SVG, illustrating how the viewport interacts with coordinate systems.

LLudovicGouverneur

73% match

Loading thumbnail…

D3 Blank Canvas

This example displays a blank, full-window SVG canvas with a single rounded rectangle filling the viewport. The code uses D3 v5's `select` function to target the SVG element and sets its width and height attributes based on the browser window dimensions. A `rect` element with a corner radius of 40 pixels is appended and sized to match the available space. The minimal setup demonstrates how to initialize a D3 visualization with dynamic sizing and CSS styling that locks the body to the viewport.

Rrdeichert

71% match

Loading thumbnail…

Restricted zoom behavior in d3

This example demonstrates restricted zoom behavior in d3.v5, bounding pan and zoom within a rectangular viewport. A field of 300 randomly positioned and sized circles is rendered in an SVG, and users can scroll to zoom up to 50x and drag to pan; when zooming out to the original scale, the view snaps back to the full extent. The implementation uses `d3.zoom()` with a custom `on("zoom")` handler that clamps translation based on viewport dimensions and scale, then updates the `<g>` element’s `transform` attribute, applying the constrained translation and scale.

GGerardoFurtado

71% match

Loading thumbnail…

scale svg

This example demonstrates how to create a responsive SVG visualization using D3 v7. It displays five small rectangles positioned horizontally within a 400x400 viewBox, with each rectangle’s x-coordinate determined by its data value. The code uses `d3.select` to append an SVG element and applies the `viewBox` and `preserveAspectRatio` attributes to ensure the graphic scales proportionally to its container. The rectangles are bound to the array `[1,2,3,4,5]` using D3’s data join pattern with `selectAll`, `data`, and `enter`.

Yyar

71% match

Loading thumbnail…

Blank canvas

This blank canvas demonstrates an empty SVG viewport that fills the browser window. The visualization shows a single rounded rectangle covering the entire display area, creating a blank slate. The code uses D3 v5's `select` method to target the SVG element and chain attribute setters for width and height. It retrieves the viewport dimensions from `document.body.clientHeight` and `document.body.clientWidth`, then appends the rectangle with rounded corners via the `rx` attribute, all rendered as vector graphics.

JJacob van Lingen

71% match

Loading thumbnail…

zoom/pan d3v4 - Full

This example demonstrates how to implement zoom and pan interactions on an SVG canvas. The visualization displays a single green circle centered in the viewport, with the zoom behavior applied directly to the SVG group element. The code uses the D3 v4 zoom API via `d3.zoom().on("zoom", zoomfn)` to handle mouse and touch events, and the zoom function applies the event transform to the group. A circle is rendered at the center using `svg.append("circle")`, and the zoom handler updates the group’s `transform` attribute while also calling `svg.scale(4)`, which scales the entire group by a fixed factor. The SVG fills the browser window.

IIgathi

69% match