What is Stack View?
Stack View is a library browsing tool. It gives visual clues to the character of the holdings and their frequency of use.

Stack View from Harvard Library Innovation Lab on Vimeo.

How is size determined?
The form factor of each media object in Stack View is derived from catalog records. We find the artifact height in the record itself, and we derive width based on the page count. Other media representations follow proportionately.

How are they drawn?
Stack View is drawn with CSS. This keeps the rendering time speedy as its a native language spoken by all browsers. Each object is an html list item, and javascript dynamically determines the dimensioning information. There is one image in Stack View, it’s the reflection gradient. Doing that in CSS seemed to slow things down.

What about color?
Color visualizes a books ShelfRank. The depth of color correlates to frequency of checkouts. The more an asset has traffic in the collection, the darker the blue.

More than just books?
Yes. Stack View visualizes multiple media types, expanding the notion of what can live on a “shelf” — cds, dvds, websites, books, serials.  More to come.  Suggestions?

Get the code
Use Stack View in your own applications. Everything you need is up on GitHub.

Stack View on GitHub

7 Responses to “Stack View”

  1. Annie

    Very cool application. Never thought of athletes in a stack, but it works.

  2. Jeff

    Really like the thought process too. If soccer players were books…. Wonder if you could do something with pagecount with respect to field position. Forward is thin (100pg) mid fielder (300) defence (500) goalie (1000). Don’t think that’d necessarily be super informative, but it trying to keep within your logic….
    Rock n Roll

  3. Robert Vander Hart

    What a great idea! I was curious: How does ShelfRank work for folks who may not have much/any color perception? Would, for example, something like a 5-star “rating” system work?