Getting Started

Muze enables you to create composable, complex & interactive data visualizations in JavaScript easily. If you've not already checked out what you can build using Muze, explore examples here.

Installing Muze for your app or project

You can install Muze from NPM, directly use from our CDN, or get it from Github. In addition, you can also download the JavaScript files locally and include it in your application.

NPM

  1. Copy the following command and paste it in the terminal

    npm install --save muze 
    
  2. Import the relevant components in your app or project:

    import { DataModel }, muze from 'muze';
    
  3. Import the Muze CSS file to apply theme to all the visualizations:

    import 'muze/dist/muze.css'
    

If you don't have a node project to start with, you can use this seed project with yeoman generator to setup boilerplate.

CDN

  1. Include the script tag in your html page to load muze.js from our CDN

     <script type="text/javascript" src="https://cdn.charts.com/lib/muze/core/latest/muze.js"></script>
    
  2. Include the Muze CSS file to apply theme to all the visualizations:

    <link href="https://cdn.charts.com/lib/muze/core/latest/themes/muze.css" rel="stylesheet">
    
  3. In your page, use the components available under the namespace object muze:

    const DataModel = muze.DataModel;
    

Github

If you want to build from source, head to Github and follow the instructions there. You can get started by downloading/cloning the repository and running Muze using:

npm run start

If you download or clone the repository, you must build Muze to generate the build files which you can find in the dist folder.

That completes the installation of Muze for your app or project.

Getting started with Muze

Since Muze is a composable visualization library, you can either use our existing implementations (samples) and build on them, compose your own using our building blocks, or even extend the core JavaScript library to achieve any custom requirements. As such, we've divided the documentation into four sections as below:

Tutorials

For a guided explanation on creating different types of visualizations, head to the tutorials section. All the tutorials are editable, with a step by step interactive guide. You can make changes to the code and see live changes on the same page.

Concepts

Muze is powered by two core components: Muze (the composable visualization library) and DataModel (in-memory tabular data store with data operators). If you're looking to compose your own visualizations from ground up, we recommend going through the concepts of these first. It does has a slight learning curve, but once you know the concepts, you can build your own composable & complex visualizations. This section also introduces you to powerful features like rendering custom interaction element, stacking multiple canvas with common elements, etc.

API

Head to API reference for concise explanations of all modules and member functions.

Support, Licensing and Contribution

Supported browsers & devices

Muze supports modern browsers like IE 11, Firefox, Safari, Chrome, and modern touch devices.

Why is Muze free & open-source?

We're a strong team who work on Muze full-time. Our goal is to have an open-core for Muze, and monetize priority support, custom development and build additional products around Muze.

Contribute to our public roadmap

We have a backlog of features that we are going to add to Muze in future releases. You can contribute to the request a feature to be added to roadmap or upvote an existing feature requested by someone else.

Get Support

While we're constantly trying to evolve and improve Muze, there could be instances where you run into an issue, despite our best efforts. For all those cases please raise a Github issue or contact us directly at muze@charts.com. We will pick it up as soon as possible.

If you need priority support, custom visualizations or enterprise support please mail to us at muze@charts.com

Licensing

Muze and DataModel are available under the MIT license.