Skip to content
Composable data visualisation library for web with a data-first approach
JavaScript HTML Other
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github initial commit Apr 8, 2019
dist Make a build and bump version Sep 19, 2019
docs Add samples Nov 19, 2018
examples add facet name to sort facet fields Sep 17, 2019
packages Make a build and bump version Sep 19, 2019
plugins CDC-141: Add plugin Oct 25, 2018
scripts Add tag prompt Apr 29, 2019
yaml Add samples Nov 19, 2018
.babelrc Update babel packages Dec 24, 2018
.env.example #223: Use branch name as new library name in sherlock Apr 2, 2019
.eslintignore Delete .npmrc file and Fix contructor type checking of DataModel Aug 28, 2018
.gitattributes Add .github and Authors Aug 18, 2018
.gitignore Implement autotest command Jan 14, 2019
AUTHORS initial commit Apr 8, 2019 Walkthrough the code to migrate Aug 27, 2018
LICENSE initial commit Apr 8, 2019 initial commit Apr 8, 2019
jsdoc.conf.json CDC-141: Add jsdoc configuration Oct 25, 2018
karma.conf.tpl.js initial commit Apr 8, 2019
lerna.json Delete package old files Aug 17, 2018
logo.png Change logo Aug 27, 2018
package-lock.json Make a build and bump version Sep 19, 2019
package.json Add tag prompt Apr 29, 2019
postcss.config.js Build separet css file on production mode Aug 18, 2018 Delete package old files Aug 17, 2018
webpack.config.js Update babel packages Dec 24, 2018


NPM version NPM total downloads Contributors License

What is Muze?

Muze is a data visualization library which uses a layered Grammar of Graphics (GoG) to create composable and interactive data visualization for web. It uses a data-first approach to define the constructs and layers of the chart, automatically generates cross-chart interactivity, and allows you to over-ride any behavior or interaction on the chart.

Muze uses an in-browser DataModel to store and transform data, and control the behaviour of every component in the visualization, thereby enabling creating of complex and cross-connected charts.


  • 🚀 Build complex and interactive visualizations by using composable layer constructs.
  • 🔨 Use rich data operators to transform, visualize and interact with data.
  • 👯 Define custom interactions by configuring physical behavioural model and side effect.
  • ✂️ Use css to change look and feel of the charts.
  • ☀️ Have a single source of truth for all your visualization and interaction controlled from data.
  • 🔩 Integrate easily with your existing application by dispatching actions on demand.



Insert the muze build and the required CSS into the <head>:

<link href="" rel="stylesheet">
<script src="" type="text/javascript"></script>


Install muze from NPM:

$ npm install --save muze

Also import the required stylesheet:

import 'muze/dist/muze.css';

Getting started

  1. Prepare the data and the corresponding schema using DataModel:
// Prepare the schema for data
const schema = [
    name: 'Name',
    type: 'dimension'
    name: 'Maker',
    type: 'dimension'
    name: 'Horsepower',
    type: 'measure',
    defAggFn: 'avg'
    name: 'Origin',
    type: 'dimension'

// Prepare the data
const data = [
    "Name": "chevrolet chevelle malibu",
    "Maker": "chevrolet",
    "Horsepower": 130,
    "Origin": "USA"
    "Name": "buick skylark 320",
    "Maker": "buick",
    "Horsepower": 165,
    "Origin": "USA"
    "Name": "datsun pl510",
    "Maker": "datsun",
    "Horsepower": 88,
    "Origin": "Japan"
  1. Pass the data and schema to DataModel and create a new DataModel instance:
const DataModel = muze.DataModel;
const dm = new DataModel(data, schema);
  1. Pass the DataModel instance to muze and create your first chart:
import muze from 'muze';
import 'muze/dist/muze.css';

// Create a global environment to share common configs across charts
const env = muze();
// Create a new canvas instance from the global environment
const canvas = env.canvas();
  .rows(["Horsepower"]) // Fields drawn on Y axis
  .columns(["Origin"]) // Fields drawn on X axis
  .mount("#chart"); // Specify an element to mount on using a CSS selector

See for more documentation!

You also can checkout our Yeoman Generator generator-muze to try out the muze through a boilerplate app.


You can find detailed tutorials, concepts and API references at


Please raise a Github issue here.


Please contribute to our public wishlist or upvote an existing feature at Muze Public Wishlist & Roadmap


Your PRs and stars are always welcome :). Checkout the Contributing guides.



You can’t perform that action at this time.