181202_02_ Divide window_01

100%

181202_02_ Divide window_01

✓ Published1🌍 Public

Last edited Dec 2, 2018

Created on Dec 2, 2018

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.

AI-generated description

Goals : - Divide a svg element in 4 sub svg elements

Elements to grasp :

The D3 Select module : understand how DOM elements can be created, selected, modified.

How View port works for french speakers.

This example is used to understand the SVG viewport and viewbox - Ludo;

Improvements since the start : - Style of lines are defined in CSS. - Number of Horizontal and Vertical are parameter - For automatic Display, number of lines and viewbox dimensions are now linked. - Viewbox dimensions is not hardcoded anymore

This is based in SVG Path Tutorial • Easy to Understand!, made by Roberto Matthews.

MIT Licensed

Similar vizzes

Loading thumbnail…

181202_02_ Divide window

Two identically sized SVG viewports render grids of vertical and horizontal lines using D3’s data join with `selectAll`, `data`, and `enter`. Each grid’s line count is set by parameters, and the viewBox dimensions are derived from those counts rather than hardcoded. The example demonstrates how varying the SVG `width` and `height` attributes changes the display of the same coordinate system, while CSS classes style the lines separately from the geometry.

LLudovicGouverneur

88% match

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

88% match

Loading thumbnail…

181202_02_ Put some balls in

This example shows how to organize SVG elements within a viewport by dividing a single SVG element into four sub-elements using D3 v5’s selection module. It generates a grid of vertical and horizontal paths, along with steel-blue circles, using `d3.range` and data joins. The viewBox dimensions automatically scale with the number of lines, and the code applies a zoom behavior via `d3.zoom` to transform a group element. Styling for the paths is defined in CSS, while circle positions and radii are computed from the grid parameters.

LLudovicGouverneur

83% 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

82% 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

76% match

Loading thumbnail…

SVG Path

This example demonstrates SVG path drawing primitives by rendering a grid of vertical and horizontal lines using D3 v5. It creates a 10x5 lattice of green strokes on an SVG canvas with a viewBox of 100x50 units. The code uses `d3.select` to append the SVG element and `d3.range` to generate data arrays, then appends path elements whose `d` attribute strings are constructed with template literals for `M` (moveto), `V` (vertical line), and `H` (horizontal line) commands. The rendering relies entirely on SVG path syntax without additional geometry libraries.

RRubens

75% match

Loading thumbnail…

181202_04_ Nice hoevering effect

A grid of colored shapes on a large SVG canvas demonstrates a hovering effect, with white rectangles and concentric circles in steel blue, blue, dark blue, yellow, and light green arranged across vertical and horizontal green and red lines. The visualization divides the viewport into a parameterized grid using D3 v5's selection API, appending paths and circles via `append`, while styling lines through CSS classes. It uses `d3.zoom` to enable interactive panning and zooming, which updates the group's transform attribute based on the zoom event.

LLudovicGouverneur

75% 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

75% match