D3.js: Cutting-edge Data Visualization
by Ændrew H. Rininsland, Michael Heydt, Pablo Navarro Castillo
Applying SVG transforms
The S in SVG stands for Scalable, while V stands for Vector. These are the two important parts of the name. This allows us to be able to apply a variety of transforms prior to the rendering of SVG shapes.
Each SVG shape is represented by one or more vectors, where a vector in SVG is a tuple (x, y) distance from an origin in the coordinate system. As an example, a rectangle will be represented by four 2D vectors, one for each corner of the rectangle.
When creating graphical visualizations, this modeling of data with vectors has several benefits. One of those is that we can define a shape around a coordinate system for just that shape. Modeling this way allows us to make copies of the shape, but position them in different places ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access