181202_02_ Put some balls in

100%

181202_02_ Put some balls in

✓ Published1🌍 Public

Last edited Dec 2, 2018

Created on Dec 2, 2018

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.

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_ 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

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

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

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

76% match

Loading thumbnail…

SVG Playground

This example shows three identical SVG figures arranged in a row, each displaying a yellow circle with a rectangular hat, but dressed in different colors. A separate group of green lines, one straight and one zigzag polyline, crosses below them. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path` within grouped `<g>` tags, applying transforms, fills, strokes, and CSS classes. D3 v6 is loaded for scripting, but the visualization relies entirely on static SVG markup without data binding or dynamic updates.

Ddabrze3@gmail.com

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

74% match

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

74% match

Loading thumbnail…

Balls at random : Jul 29,2021

One hundred circles, each filled with a red-to-blue linear gradient, animate randomly across a black SVG canvas over five seconds. The visualization demonstrates basic D3 v6 selection, data binding, and transition methods, using `d3.select` to append an SVG and `transition().duration()` to move each circle’s `cx` and `cy` attributes. The circles, with a radius of 20 and 80% opacity, also receive a gradient stroke via the `url(#svgGradient)` reference. No external data is involved; positions are generated from `Math.random()` multiplied by each index.

NNita

74% match