Sharing is caring!

Composable data visualization library for the web with a data-first approach




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 behavior 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 behavioral 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>:

<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"

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.