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>
:
NPM
Install muze from NPM:
$ npm install --save muze
Also import the required stylesheet:
;
Getting started
- Prepare the data and the corresponding schema using DataModel:
// Prepare the schema for dataconst schema = name: 'Name' type: 'dimension' name: 'Maker' type: 'dimension' name: 'Horsepower' type: 'measure' defAggFn: 'avg' name: 'Origin' type: 'dimension' // Prepare the dataconst 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 newDataModel
instance:
const DataModel = muzeDataModel;const dm = data schema;
- Pass the
DataModel
instance tomuze
and create your first chart:
;; // Create a global environment to share common configs across chartsconst env = ;// Create a new canvas instance from the global environmentconst canvas = env;canvas datadm rows"Horsepower" // Fields drawn on Y axis // Fields drawn on X axis ; // 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