Book Image

Learning D3.js Mapping

Book Image

Learning D3.js Mapping

Overview of this book

Table of Contents (14 chapters)
Learning D3.js Mapping
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
6
Finding and Working with Geographic Data
Index

Transform


Transform allows you to change your visualization dynamically and is one of the advantages of using SVG and commands to draw shapes. Transform is an additional attribute you can add to any of the elements we have discussed so far. Two important types of transforms when dealing with our D3 maps are:

  • Translate: Move the element

  • Scale: Adjust the coordinates for all attributes in the element

Translate

You will likely use this transformation in all of your cartography work and will see it in most D3 examples online. As a technique, it's often used with a margin object to shift the entire visualization. The following syntax can be applied to any element:

transform="translate(x,y)"

Here, x and y are the coordinates to move the element by.

For example, a translate transform can move our circle 50 pixels to the left and 50 pixels down by using the following code:

<circle cx="62" cy="62" r="50" transform="translate(50,50)"></circle>

Here is the output:

Note that the translucent image...