ADS Metrics Page Redesign

Skills used:
BackboneJS, D3, DataViz

The Astrophysics Data System has a metrics page that provides useful statistics for a set of search results, including in-depth information about aggregate citations, different bibliometric indices, and information about how popular items have been in the ADS over time. As we were moving the functionality to our new site, I thought that a slight re-organization and redesign could make the page more attractive and usable.

a view of the old metrics page
a view of the new metrics page

My main goal was to organize the page into logical units of information. To do so I split the three tables into four, so that there could be four distinct sections for the metrics: Papers, Citations, Indices and Reads.

I used the principles of enclosure and proximity to emphasize the subject-matter relatedness of the tables and graphs in each section. The sections are deliberately ordered: the first section, "papers", offers a quick overview of search results, while the second section, "citations", contains the key metrics most frequently desired by users. By stacking the sections on top of each other and increasing the size of the type and the graphs, I gain legibility at the expense of data density--now you have to scroll to see all of the graphs.

I wrote the Backbone widget that queries our metrics API and renders the data in D3.