block by alansmithy d832fc03f6e6a91e99f4

Pictogram grid in d3js

Full Screen

Pictograms, or isotypes, in the form of repeating icons, can be used to effectively contrast quantity/magnitude comparisons in infographics and data visualisation. For more background information on the topic, I’d recommend the article by Robert Kosara:

The ISOTYPE may be close to 100 years old, but many of the ideas behind it are still very relevant and visualization might benefit from considering some of them.

Scalable Vector Graphics (SVG), the vector markup language exploited by d3.js, makes it easy to generate repeating graphics by declaring icon geometry once in the <defs> element and then calling them whenever needed via a <use> element. This simple example shows how to use d3 to create a grid of icons. A jQuery slider shows how those icons can then be addressed for interactive purposes.

The complex geometry needed to define an icon can be created by any vector graphics editor capable of generating SVG markup - Inkscape or Illustrator will work just fine. To see a project that uses this approach, have a look at the interactive census quiz of England & Wales.

index.html