mmviz
v3.14.4
Published
MassMutual Visualization Library
Downloads
94
Keywords
Readme
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.