Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

181202_04_ Nice hoevering effect

Public visualization

Viewing a saved revision (read-only)

13daa8c52e20498190957d6fbefa421b

181202_04_ Nice hoevering effect

0 stars1🌍 Public
LLudovicGouverneur
Last edited Dec 2, 2018
Created on Dec 2, 2018

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.

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.