No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
files
src
.gitignore
.npmignore
Makefile
README.md
gulpfile.js
package-lock.json
package.json
tsconfig.json
tslint.json
webpack.config.js

README.md

mmviz-web

Library for visualizing data on the web.

Technologies

  • JavaScript (TypeScript 2.0)
  • CSS (SASS)
  • D3.js
  • Handlebars
  • SVG
  • Canvas
  • Gulp
  • Webpack
  • npm

Setup and Build

git clone https://github.com/massmutual/mmviz-web.git
cd mmviz-web/
npm install
gulp sass
gulp dist-css
webpack

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