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.