# 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

```bash
# 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**.
```bash
# 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

![alt text](https://github.com/massmutual/mmviz-web/blob/master/files/mmviz-web.png "Architecture Diagram")