Logo IMG
HOME > PAST ISSUE > Article Detail


Pixels or Perish

The art of scientific illustration will have to adapt to the new age of online publishing

Brian Hayes

Data-Driven Documents

2012-03HayesFD.jpgClick to Enlarge ImageThe interactive version of the population pyramid that I discussed above is an SVG graphic—although, as it happens, I did not write a single line of SVG code when I created the illustration. All of the SVG structures are generated by an embedded JavaScript program, which reads in a data file and constructs the corresponding bars for male and female population. (The architecture is the same as that of the 1990 PostScript program that read a data file to generate Chernoff faces.)

The pyramid is initialized to the state of the world population in 1950. When a mouse click advances the date to 1955, all the bars shift upward by the width of one bar (representing the aging of the population by five years), and then the bar lengths are adjusted to account for deaths in each age group during the five-year interval. Finally a new bar enters at the bottom of the stack, representing net births into the youngest age category. Each of these transitions is animated over 750 milliseconds. It’s worth emphasizing that all of the computations are done “on the client side,” by the JavaScript interpreter built into a Web browser; nothing is precomputed by the Web server.

The pyramid visualization is built on a JavaScript library called D3 (for “data-driven documents”) described in a 2011 paper by Michael Bostock, Vadim Ogievetsky and Jeffrey Heer of Stanford University. (D3 is an open-source software project managed by Bostock, who is now with Square, Inc.)

At the heart of the D3 framework is a simple but general mechanism for creating or modifying elements of the DOM based on supplied data. For example, in the pyramid figure, the length of each bar is determined by an entry in a table that lists population by age, gender and year. When the year changes, each bar length is relinked to a different entry in the table. The updating of the display and the animated transitions are handled behind the scenes by the D3 library.

In designing my population pyramid I was inspired by several examples and tutorials on the D3 website ( and I borrowed snippets of code from them. There are at least two more population pyramids among the examples, and many other delightful tools and toys worth exploring.

comments powered by Disqus


Subscribe to American Scientist