Code4Lib 2014: Day 1 Morning

Morning talks of Day 1 at Code4lib 2014.

A Book, a Web Browser and a Tablet: How Bibliotheca Alexandrina’s Book Viewer Framework Makes it Possible – Engy Morsy

Book viewer that was developed inside the library.


  • multiple digitization projects for preserving knowledge in monographs and availing them to people around the world
  • readers miss features they like in old books
  • availability of ebook readers

Why not PDF

  • copyright – limited by license
  • have to be recreated every time the license changes on what is allowed
  • page selection
  • morphological search could not have been done otherwise
  • all in one (metadata, content and search) object
  • streaming/browser compatibility – have to wait until download the whole PDF, frequently have to install a plugin
  • personalization/annotation – can only be done offline

Book Viewer Framework

two main parts:
* client side
* server side
client side
* can highlight
* create sticky notes
* annotations
* authenticate and can save these
* different views e.g. thumbnails, my basket (for out of copyright works, can select pages and download own compilation)
* metadata can be viewed
* search results within the PDF with page numbers and snippets, search highlights
* view related books
* standard zoom functions but with functionality to download higher quality version once a threshold is reached
server side
* storage layer – mainly responsible for streaming images
* content serving layer will process images for client display
* using Solr 4.1, but can use any framework that you like

Future Work

  • include other type of media objects e.g. manuscripts
  • android implementation
  • enhance storage layer

Book site viewer

Quick and Easy Data Visualization with Google Visualization API and Google Chart Libraries – Bohyun Kim

Spreadsheets are not databases, and they’re not efficient, but database might not be convenient, might not have knowledge or resources in house.

Use spreadsheet as data source, query using visualization API, and charts to visualize.

Two Ways to Display Result
* get a stand alone page with table
* chart and table with JavaScript and Google Charts


Really big spreadsheet.

All you need is a id, sheet id, columns you want.

You can use aggregate functions e.g. count, limit, avg, pivot

Use JS instead of a URL
* set query string within JavaScript call
* can drop it into your own page
* can also specify header, range


  • load Chart libraries, list data, select options
  • visualize table, chart
  • chart.draw = longest and verbose, but most flexible with ability to draw multiple charts on one page, and requires to know which chart library that you want to use
  • chartwrapper = shorter, but only allows certain functions
  • drawchart – quickest, but can’t handle any events, and don’t need to load packages

Charts has limitation of up to 400,000 cells, 256 columns.

Use Own Database to load into Google Chart Libraries

  • need to contruct datatable from SQL database
  • encode into JSON
  • then use Google Chart


Can give control to your users using dashboard draw ability e.g. change age and gender

Final Notes

Take a look at the
* code playground.
* public data exchange

Slides, Code

WebSockets for Real-Time and Interactive Interfaces – Jason Ronallo

Slides and audience notes

What just happened?

When change slides, presentation sends a message to Websocker server: node +

What Problem it’s Trying to Solve

  • browser is always making requests, start have to
  • browser always has to make request


  • Polling (AJAX), but some problems so came up with
  • Long Polling (Hanging GET), also tried but had the problem
  • queuing latency
  • server sent events, where after initial handshake, server can stream data to client, but client can’t communicate back
  • Websocket comes along to create consistent connection where data can flow in both directions, can even send data at the same time with full duplex in real time
  • gets around queuing latency.
  • payload can send UTF-8, binary, whatever

Why Not Use it For Everything?

  • lose XHR, HTTP services
  • e.g. cache
    Want to use the right tool for the job

Websockets good for?

  • collaborative
  • real-time display of activity
  • remote control
  • e.g. Google Analytics Real-time and see digital collection whie viewing them
  • did tracking to show popularity this week or today, but only updated every hour

Vanity Metrics

  • show value in a way that makes sense, won’t change decisions on changing website, but show some interesting things
  • real time interaction with the website
  • using Rails + Blacklight Server to node + express +
  • can use it for multiple applications

Practical Use

  • immersion theatre to show big video walls
  • inspired by listen to wikipedia – visualization and audiation of wikipedia edits
  • starting thinking about simple remote controls
  • provides URL to interact with the wall
  • token-based authentication, but future might use geolocation, BLE, NEC
  • remote control interface is you can turn language on/off
  • goal: low latency, like pressing button on the wall
  • keep clients in sync by using websockets
  • also see content that’s being display, e.g. stream of articles being edited and pause

Unintended Consequences

  • deleted a large portion of an article just to see how big the bubble would be
  • vizualization wall – take control by choose control add content to wall, then be able to see and explore the actual content
  • chrome screen emulation – resolution wasn’t that high on the images, so no efficienty issues


Notetaker’s: This is really cool

> This is your moment of zen.

Personalizing Google Analytics Using Events and Custom Variables – Josh Wilson

Events and CUstom Variables

  • out of the box: GA gives you general data on audience (who), acquisition (how), behavior (what)
  • record personalized data about your sit’es usage
  • custom variables adds data about who’s doing the stuff, conceptually like a custom segment e.g. users not logged in, people with items in shopping cart
  • events = stuff that’s happening beyond basic pageview e.g. download, facet click, video play

Which to use?

  • depends on what you want to know: more about people or what happens
  • reports look like any in GA


* can work with universal analytics which you can enable website config tool
* defaults analytics provides a number of detailed events
* but also wanted to do custom example e.g. data on whether certain metadata popped up in views (state agency)
* custom GA script for use in contentdm
* GA module has built-in fields to add custom variables
* can also add custom snippets
* using it to track


Your CMS might do it for you as plugin

The code
* add one more line of code, and define how to label it
* only required is category and action, but can add label and other fields

* extra JS, usually some sort of trigger code is required
* changing a category/action/label – surprise, it’s now a new event
* balance clarify with consistency
* test using HTTP watching tool e.g. HTTPFox (firefox plugin) or just wait a day
* timing is everything
* can’t fire event if GA isn’t loaded
* can’t record page elemtn value if it’s not loaded
* custom variables must be set before trackpageview
* tracking a download or link-click
* you have to check IE8
* multiple domains/subdomains requires extra switches


Discovering your Discovery System in Real Time – Godmar Back and Annette Bailey

Observations in 2014
* majority of resources are electronic
* physical space mostly for student work areas and digital displays
* librarians = active partners in research
* libraries replacing OPACs with discovery systems
Risks associated with these changes
* use of library collections becomes invisible (more difficult to assess or track?)
* search engines compete with discovery systems for users requiring substantial marketing effort
How do we make the discovery process and use of resources visible?

Can We See What our Users are Doing?

COUNTER standard which gives us usage data
* usually after the fact
* unfortunately interpreted differently
discovery service provides data on search terms & click data, but aggregate and not real-time

What if we could see what our users are doing in real time while still affording them some privacy? What if we could share that with other members of the community?

Discovering Discovery

Wanted to visualize real-time items users discover as they click results.

Added some code to be able to see what is being accessed in different visualizations e.g. Twitter-style, cube, ticker style

How it Works

Use custom JS, record clicks (extract ID from HTML), save to visualization server with database, get record using Summon API, push to D3 based visualizations or Google Charts.


A way to clearly see what research is being used.

Lunch Time

baby goal sitting on parent nibbling its ear

Author: Cynthia

Technologist, Librarian, Metadata and Technical Services expert, Educator, Mentor, Web Developer, UXer, Accessibility Advocate, Documentarian

Leave a Comment

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: