Dash

Dash is short for dashboard. Dash takes in data from the outside world and puts up nice visuals of that data for the user to interact with. There are filters for the user to drill down to the data they want to see.

Install

• Git clone
• install npm...
• npm install (to install wigglemaps and other things)
• gem install saas
• saas --watch ....
• also use google closures... details
• to update wiggle maps via npm need to first rm -r node_modules/wigglemaps (as npm does not do updates from git repos or something like that)
• node_modules/grunt/bin/grunt will compile src/templates/*.handlebars into compiled js
• node_modules/grunt/bin/grunt watch will compile handlebars when handlebar files change

Implementation

Dash is written in javascript and utilizes JQuery and google closures(for compile/dependencies). The code follows the Model View Controller paradigm.

Directory structure

• at root is index.html which is the root page and calls dash.js
• src is where our source is
• src/dash.js launches the controllers and model
• src/controllers has all the controllers
• src/models
• src/views panels, filter view
• src/templates handlebars templates
• node_modules where npm imports land - wigglemaps, handlebars, jquery, d3

Wigglemaps

Dash depends heavily on Wigglemaps. wigglemaps both provides gui for the Map & Time Series views as well as the model. Wigglemaps also provides selectors analagous to jquery selectors that operate on both the model and view. Wigglemaps gets imported via npm.

Model

The model comes from wigglemaps. (Zach should fill in details about the model)

ServiceLayer

retrieves data (eventually will talk to a real backend), and notifies listeners of new data. views register themselves as listeners for new data.

ColorMap

The model for all things color. color ramps and highlighting.

View

The visualization views are called panels. Currently there are 4 panels in dash.

• Map
  from wigglemaps. shows data on a map
• Time Series
  Shows data on a graph with time as the x axis, intensity as the y axis. The graphics are from wigglemaps. time_panel is the dash container for the graphics.
• MDS
  Multi dimensional scaling. Native to dash. Does some statistical correlation of the data and visualizes how the different datapoints correlate (zach/nico - elaborate)
• Table
  Show the data in a table.

FilterView

filter_view is the view for the filter. It has composed of subviews for each filtering, like time_step_filter_view (and more to come)

Handlebars

Dash utilizes handlebar templates (in src/templates) for putting up html

Controllers

Selection Manager

Selecting/deselecting on one view will cause the other views to select/deselect. This is managed by the selection manager.

Panel Manager

Manages all of the panels

Color Ramp Controller

Listens for user clicking color ramps, sets the color ramp in ColorMap and tells the panels to redraw via panel manager