block by shawnbot 9240915

Uniformly scaled geo thumbnails

Full Screen

This example shows how to use d3 to create uniformly scaled geographic feature thumbnails. There are two interesting features of SVG at play here:

  1. The viewBox attribute is used to “zoom in” to the individual states.
  2. The use element is used to redraw a common background states path into each thumbnail, reducing DOM overhead.

The other nice thing here is that we didn’t have to define the SVG elements’ size in JavaScript, so they can be sized exclusively in CSS. The viewBox attribute tells the browser to fit the given rectangle within the SVG element’s bounds. You can also use the preserveAspectRatio attribute to change how the viewBox fits within its bounds.