mmviz-web

Library for visualizing data on the web.

Technologies

• JavaScript (TypeScript 2.0)
• CSS (SASS)
• d3.js (4.x)
• SVG
• canvas
• webpack
• npm
• jest
• typedoc

Setup and Build

# Clone the repository
git clone https://github.com/massmutual/mmviz-web.git

# Navigate into the root folder
cd mmviz-web/

# Install the dependencies
npm install

Make is used to run frequent tasks. Install it, if you need to. Below are tasks run by Make.

# Generate documentation
make docs

# Run tests and generate a coverage report
make test

# Build TS for dev
make scripts

# Build TS for prod
make scripts-dist

# Build Sass 
make styles

# Publish to NPM
make publish

Examples

The following GitHub project includes several examples of mmviz-web :

(https://github.com/massmutual/mmviz-web-examples)

Architecture

Builder Factory

Factory to produce common Chart Builders

Data Operator

Performs data operations such as cleaning, sorting, filtering, aggregating and other general data operations.

Builders

Constructs charts from modular Layouts and Components. Allows method chaining to add on chart features. One can add on axises as well as add layers of different chart types.

Layouts

Maps data from value to visual space and produces a layout view model.

Components

Takes in the view model produced by a Layout and draws the visualization. Components can be implemented in different technologies such as SVG, canvas or webgl. This makes the library view agnostic.

Dispatcher

Is a Singleton object that implements the observer pattern in order to facilitate communication between visual elements and enables flexible interactivity. For instance an "on click" event would be broadcasted out through a dispatcher channel to any elements listening for an "on click" event. By using the observer pattern via an event Dispatcher, it decouples each element to operate independently.

Templates

Uses Mustache templates to construct html views such as chart/legend layout and the "on hover" details dialog.

Architecture Diagram