muze: A JavaScript repository from BlackGanglion

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.

Features

🚀 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.

Installation

CDN

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

<link href="https://cdn.muzejs.org/lib/muze/core/latest/themes/muze.css" rel="stylesheet">
<script src="https://cdn.muzejs.org/lib/muze/core/latest/muze.js" type="text/javascript"></script>

NPM

Install muze from NPM:

$ npm install --save muze

Also import the required stylesheet:

import 'muze/dist/muze.css';

Getting started

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

Pass the data and schema to DataModel and create a new DataModel instance:

const DataModel = muze.DataModel;
const dm = new DataModel(data, schema);

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();
canvas
  .data(dm) 
  .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 muzejs.org/docs for more documentation!

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

Documentation

You can find detailed tutorials, concepts and API references at muzejs.org/docs.

Support

Please raise a Github issue here.

Roadmap

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

Contributing

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

License

MIT

BlackGanglion/muze