Analytics Tools for Developers

jenkliu edited this page Jun 16, 2014 · 2 revisions

Table of Contents


NB Analytics rests upon the existing NB codebase and infrastructure. This section outlines where the code for NB Analytics lies.


The Django view for analytics is defined in apps/pages/ as source_analytics
This view gathers data using queries defined in apps/base/


The template for analytics is: templates/web/source_analytics.html


NB Analytics uses the global NB object to authenticate the user for image retrieval, and to use NB's logging system to record user interactions. It also uses Backbone.js to construct client-side models and views. The JavaScript is distributed across the following files:

  • Initializes the NB object and defines the Backbone models Page, Highlight, and Document. This file is compiled into docanalytics_NB.js using Grunt.
  • ui.docAnalyticsBackboneViews.js: Contains the Backbone Views--PageView, HighlightView, and DocumentView-- which use the templates defined in source_analytics.html to display data.
  • source_analytics.html: Contains code for event logging, initializing Backbone models and views using Django template variables, setting up the Google Chart, and handling events.


The CSS is located in ui.docAnalyticsView.css, which is compiled into docanalytics.css using Grunt.


Both visits and interactions are logged using the NB logging infrastructure to gain insights into analytics usage patterns. These are stored in the NB database, with models defined in apps/base/

AnalyticsVisit: a visit to an NB analytics page.

AnalyticsClick: a user interaction, classified by the following events (recorded in the "control" column):

  • page-sort-by: User changes value of the "Sort by" dropdown (page heat map).
  • page-filter: User changes value of the "Show" dropdown (page heat map).
  • pagenum-click: User clicks a page number to navigate to that page on NB.
  • chart-pagenum-hover: User hovers a page number on the chart's x-axis to view an enlarged image of the page.
  • pagethumb-hover: User hovers over a page thumbnail to view an enlarged image of the page.

NOTE: Prior to 6/16/14, pagenum-hover and pagethumb-click were events in place of pagenum-click and pagethumb-hover, when hovering over a page number in the heat map view would display an enlarged page and clicking the thumbnail would bring the user to NB. On 6/16/14, these events were swapped.

Future Work

This section outlines improvements and features that could be developed to enhance the use of NB Analytics.


  • Thumbnails of varying sizes are not always displayed properly with overlaid highlights.


The following are potential features that could be added:

  • Analytics for HTML documents: This requires determining a way to split up an HTML page into units analogous to pages, likely according to text length.
  • Enhanced page heat map: Some visual distinction between threads, comments, and comments with replies requested (perhaps different colors, or symbols such as question marks).
  • Analytics for students: Access to analytics data might be of interest to students.
  • Continuous graph of annotations: The x-axis would represent vertical positions in the document, and fixed-size spikes would represent annotations. A low-pass smoothing filter could be applied to generate a curve.

Requested by instructors

The following features were requested by instructors:

  • Comments aggregated by student
  • A view of interactions could answer the questions: Are students interacting within a subset of the population or is there roughly equal distribution across the class? Does the instructor respond to all students or only a subset?
  • Aggregate data for a folder/class
  • A heatmap of words that show up in comments: Hashtags entered in comments could make this easier.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.