O'Reilly logo

D3.js By Example by Michael Heydt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required