zipline

Basics

Running the Visualization

First, clone this repository and install its dependencies using npm install.

NB: This repository expects node v0.10.x due to the incompatibility between node v0.12.x and the testing library Jest.

To run the example visualization, you will need to have JSON data conforming to the Tidepool data model stored in example/data/ with the filename specified as the dataUrl in example/App.js.

zipline uses a CSS pre-preprocessor called Rosetta to allow sharing of variables between CSS and JavaScript, which is often very useful when implementing an SVG visualization in D3 given that not all SVG properties can be set via CSS. Before running the visualization, you need to "compile" a set of .rose Rosetta files comprising a color and style theme. The script rosetta.js allows you to do this:

node rosetta $THEME_NAME

Two themes are currently included in this repository, "salt-cure" and "blip." (You can see where all the source .rose files are using, for example, find . -type f -name 'blip.rose'. To create your own theme, you'd need to copy each of these files, adjust the variables within to your liking, and then compile the set of them using the command listed above.)

Finally, you can serve yourself the visualization at http://localhost:8081/:

npm start

Running the Tests

zipline includes unit tests using mocha with chai. Flux stores and React components are unit-tested using Jest. To run all the tests, make sure you have all the dependencies installed, then:

npm test

The Jest tests will fail if not running node v0.10.x. To run only the mocha tests, use:

node_modules/.bin/mocha test/**/*_test.js
node_modules/.bin/mocha diabetes/test/**/*_test.js

Background

This repository started out as an experiment in virtual rendering to produce a fast-scrolling, high-performing timeline visualization of time-series data in D3. A pared down version of the experiment can now be seen in two bl.ocks I wrote: the first illustrating the style of virtual rendering employed in tideline, the data visualization library I have been leading development on at Tidepool. The second bl.ock illustrates the better strategy initially developed in this repository.

Now that the initial experiment has concluded---that is, I am reasonably satisfied that I have found a solution for fast-scrolling, high-performing scrolling SVG visualizations using D3---I am continuing to experiment in this repository, but now the focus of the experimentation has shifted to the following:

• implementing data management (filtering, calculating summary statistics, etc.) for a large and complex data visualization using the Flux application architecture
• structuring a large visualization library with the right kind of modularity to allow all of the following:
  • user-configurability (toggling on and off various elements of the display, as well as changing things like the units for a scale)
  • ability for designers and developers to iterate with a minimum of friction
  • testability

Repository Structure

zipline, like its in-some-ways predecessor tideline is a library for building certain types of visualizations (in particular: scrolling timelines of time-series data at the granularity of twenty-four hours in view at a time). This library, which is agnostic as to the type(s) of data being visualized, is contained in src/. Add-ons for visualizing specific types of data are found in activity/ for activity data and diabetes/ for diabetes data. example/ contains a minimal example application that uses zipline; this example includes a daily view scrolling timeline chart configuration daily.config.js.

Of the remaining directories not described:

• dev/ includes tools I find useful during development
• fontello/ includes the icon font I put together from the available permissively-licensed options on Fontello
• test/ includes the unit tests run on mocha with chai