Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser

Overview



muzejs




Free License NPM version Contributors

What is Muze?

Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser, using WebAssembly. It uses a layered Grammar of Graphics (GoG) to create composable and interactive data visualization for web. It is ideal for use in visual analytics dashboards & applications to create highly performant, interactive, multi-dimensional, and composable visualizations.

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.

  • 🚀 Uses WebAssembly for handling huge datasets and for better performance.

Installation

CDN

Insert the muze build and the required CSS into the :

">
<link href="https://cdn.jsdelivr.net/npm/@chartshq/[email protected]/dist/muze.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@chartshq/[email protected]/dist/muze.js" type="text/javascript">script>

NPM

Install muze from NPM:

$ npm install @chartshq/muze

Then you need to add a webpack plugin copy-webpack-plugin to copy some required muze files to your output dist or build folder.

npm install [email protected] --save-dev

And then within your webpack configuration object, you'll need to add the copy-webpack-plugin to the list of plugins, like so:

", "@chartshq/muze/dist"), to: '.' }, ]), ] } ">
const path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        // Provide your node_modules path where @chartshq/muze
        // package is installed.
        from: path.resolve("", "@chartshq/muze/dist"),
        to: '.'
      },
    ]),
  ]
}

You also can checkout our muze-app-template to try out the Muze quickly through a boilerplate app.

Getting Started

Once the installation is done, please follow the steps below:

  1. Prepare the data and the corresponding schema:
// 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. Import muze as follows:

If you are using the npm package, import the package and its CSS file.

import muze from '@chartshq/muze';
import "@chartshq/muze/dist/muze.css";

If you are using CDN, use it as follows:

const muze = window.muze;
  1. Create a DataModel and a basic chart:
// As the muze and DataModel are asynchronous, so we need to
// use async-await syntax.
async function myAsyncFn() {
  // Load the DataModel module.
  const DataModel = await muze.DataModel.onReady();
  
  // Converts the raw data into a format
  // which DataModel can consume.
  const formattedData = await DataModel.loadData(data, schema);

  // Create a new DataModel instance with
  // the formatted data.
  let dm = new DataModel(formattedData);
  
  // Create a global environment to share common configs across charts.
  const env = await muze();
 
  // Create a new canvas instance from the global
  // environment to render chart on.
  const canvas = env.canvas();

  canvas
  .data(dm) // Set data to the chart.
  .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.
}

myAsyncFn()
  .catch(console.error.bind(console));

Documentation

You can find detailed tutorials, concepts and API references at our Documentation.

What has changed?

Muze 2.0.0 is now powered by WebAssembly bringing in huge performance improvement over the previous versions. The JavaScript version has been deprecated and no active development will take place in that version - but we'll fix critical bugs as and when raised in GitHub.

This version of Muze brings in power of WebAssembly for handling large datasets with ease, along with frictionless interaction and rendering. In addition, the data loading part in WebAssembly version is asynchronous, as opposed to being synchronous in the JavaScript version. Further, the WebAssembly version is free but only available as a compiled binary, whereas the JavaScript version is free and open-source (MIT).

You can visit the deprecated JavaScript version here https://github.com/chartshq/muze-deprecated

Migrating from previous versions of Muze

Now the Muze became asynchronous as opposed to being synchronous in the previous JavaScript version.

Changed APIs

  • Creating Env

    Muze deprecated version:

    const env = muze();
    const canvas = env.canvas();

    Latest version:

    (async function () {
      const env = await muze();
      const canvas = env.canvas();
    })();
  • dispatchBehaviour

    Muze deprecated version:

    canvas.firebolt().dispatchBehaviour('highlight', {
      criteria: {
        Maker: ['ford']
      }
    });

    Latest version :

    In the current version, the identifiers needs to be passed in dimensions object or range object if it is measure or temporal field.

    // Dispatch highlight behaviour on data plots having maker as ford
    canvas.firebolt().dispatchBehaviour('highlight', {
      criteria: {
        dimensions: {
          Maker: ['ford']
        }
      }
    });
    
    // Dispatch highlight behaviour on data plots having Acceleration
    // between 20 and 50.
    canvas.firebolt().dispatchBehaviour('highlight', {
      criteria: {
        range: {
          Acceleration: [20, 50]
        }
      }
    });

Support

Please raise a Github issue here.

Roadmap

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

License

Custom License (Free to use)

Issues
  • Uncaught TypeError: v is not a function on bar hover without any tooltip config

    Uncaught TypeError: v is not a function on bar hover without any tooltip config

    Do you want to request a feature or report a bug? Bug

    What is the current behavior? Console.errors with Uncaught TypeError: v is not a function when you hover over a bar in a bar chart without any tooltip config.

    What is the expected behavior? No errors

    Which versions of MuzeJS, and which browser/OS are affected by this issue? Did this work in previous versions of MuzeJS? 1.0.3 Chrome

    bug 
    opened by swapsCAPS 6
  • Simple number display and table on canvas.

    Simple number display and table on canvas.

    Hello,

    is it currently possible to render a simple number display for example to present a KPI? If we take the car dataset imagine creating a dashboards with multiple visuals. I want to display a measure at the top with title "Cars with more than 50 Horsepower: 67". It would be nice if this box which just displays the number also allows interactivity so that when you click on the 67 all charts e.g. "Cars by Origin Barchart" now show only this subset.

    Can I do that with a text layer? Similarly would this number display work in a pivot table like in the crosstab example: https://www.charts.com/muze/examples/view/microcharts-in-table-using-crosstab

    I was able to remove the bars in each cell, but now I have no elements to click on. If that is not the case I would open the feature request in the feedback.

    Thanks!

    Tim

    enhancement 
    opened by timjp87 5
  • Using tickFormat in axes configuration breaks rendering of temporal field

    Using tickFormat in axes configuration breaks rendering of temporal field

    Do you want to request a feature or report a bug?

    • bug

    What is the current behavior? If the tick format config for axes is used to change the appearance of numeric fields, the rendering of temporal fields breaks and shows the complete JS Date string.

    Before changing tickFormat the temporal axis shows properly and the y-axis shows numbers as is. image

    After changing the tickFormat to render numbers as a local string (ex 10000 becomes 10,000) date time values are rendered as date strings. image

    The tickFormat configuration is as follows: axes: { x: { tickFormat: (value) => { if (typeof value === 'number') { return new Intl.NumberFormat().format(value); } return value; }, }, y: { tickFormat: (value) => { if (typeof value === 'number') { return new Intl.NumberFormat().format(value); } return value; }, }, }, You can see the behaviour in this fiddle.

    https://jsfiddle.net/kv8g1q92/

    What is the expected behavior? Date strings should not be broken by specifying tick format.

    Which versions of MuzeJS, and which browser/OS are affected by this issue? Did this work in previous versions of MuzeJS?

    • latest
    bug 
    opened by sushrut141 4
  • Feature/#34 legend item texts not aligned

    Feature/#34 legend item texts not aligned

    Issues Fixed 1.) fixed the text alignment issue with the legend title when the width of legend labels is greater than the container width. 2.) fixed the title overflowing issue, if the length of the title is longer than the width of the container or if the title is multi-word. 3.) Fixed the legend item text alignment issue, now legend texts are coming in a single line. 4.) Legend item text alignment issue in size encoding fixed.

    opened by sanjaymahto 3
  • Datamodel Sort broken in 1.3.1

    Datamodel Sort broken in 1.3.1

    Do you want to request a feature or report a bug? Reporting a bug.

    What is the current behavior? Using data model sort function used to work in version 1.2.1 but is broken in version 1.3.1.

    If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code. You can either a scale down sample, JSFiddle or JSBin link

    What is the expected behavior? A bar chart with sorting enabled (e.g. percentage) should sort the columns according to a dimension:

                let dm = new DataModel(data, schema);
                dm = dm.sort([
                  ['percentage', 'ASC'],
                ]);
    

    Now regardless the way we specify, it disregard the sort.

    Screen Shot 2020-02-12 at 16 26 49

    Which versions of MuzeJS, and which browser/OS are affected by this issue? Did this work in previous versions of MuzeJS? Muze 1.3.1, macOS 10.15.3, Chrome 79.0.3945.130

    bug 
    opened by rodmaz 3
  • Legend header and body spacing not appropriate

    Legend header and body spacing not appropriate

    When legend is positioned at bottom, the spacing between header and body is too large which makes the header of legend feel like a part of axis.

    Config

    canvas
        .data(dm)
        .width(600)
        .height(400)
        .rows(['Displacement'])
        .columns(['Horsepower'])
        .color('Origin')
        .detail(['Name'])
        .config({
            legend: {
                position: 'bottom'
            }
        })
        .mount(node) /* Attaching the canvas to DOM element */```
    bug 
    opened by adotg 3
  • Show timestamps in x axis

    Show timestamps in x axis

    There is no distinct bifurcation between the 1st and the 2nd tick when timestamps are shown on the x-axis (id: TC-fe476a2b848bc0ba930668346f517495). tick-issue

    opened by swamu 3
  • Trustworthy - Reliable - to be or not to be?

    Trustworthy - Reliable - to be or not to be?

    Hey out there from @chartshq-eng

    First of all - thanks for opening this cool tool and library for free usage to all! That is great stuff.

    But let's move on to concerns ...

    In times where are a lot of trojans, viruses and others are out in the wild - it is very important to be "trustworthy" - especially when developing software for customers and deploying that to a number of clients. For that kind IMHO there is nothing else than "Open Source" (see what you get).

    Now I ask myself how to thrust a WebAssembly which is not allowed to get reverse engineerd by license but free to use. How to trust that piece of "closed" code.

    I am looking forward to your answer - how to solve that.

    Cheers, Tom

    opened by TomFreudenberg 3
  • Sorting a groupedBy DataModel does not render in a chart

    Sorting a groupedBy DataModel does not render in a chart

    Do you want to request a feature or report a bug? Bug

    What is the current behavior? Sorting a groupedBy DataModel does not work. screenshot

    Example

    import _    from "underscore"
    import m    from "moment"
    import muze from "muze"
    
    { DataModel }     = muze
    { groupBy, sort } = DataModel.Operators
    
    schema = [
    	{
    		name:     "total"
    		type:     "measure"
    		defAggFn: "avg"
    	}
    	{
    		name:    "start"
    		type:    "dimension"
    		subtype: "temporal"
    	}
    	{
    		name:    "day"
    		type:    "dimension"
    		subtype: "datetime"
    		format:  "%d"
    	}
    ]
    
    data = [
    	{ total: 5, start: m().subtract(1, "days") }
    	{ total: 4, start: m().subtract(4, "days") }
    	{ total: 9, start: m().subtract(1, "days") }
    	{ total: 1, start: m().subtract(4, "days") }
    	{ total: 8, start: m().subtract(3, "days") }
    	{ total: 6, start: m().subtract(2, "days") }
    	{ total: 2, start: m().subtract(3, "days") }
    	{ total: 3, start: m().subtract(2, "days") }
    ]
    
    data = _.map data, (d) ->
    	_.extend {}, d,
    		start: +d.start
    		day:   m(d.start).format "DD"
    
    # data = _.sortBy data, "day" # Sorting dataset here first gives expected result
    
    groupFn = groupBy ["day"], total: "avg"
    sortFn  = sort    [ "day", "ASC" ]
    
    dm = new DataModel data, schema
    
    dm = groupFn sortFn dm # Switching these around doesn't work either
    
    canvas
    	.data    dm
    	.width   600
    	.height  450
    	.rows    [ "total" ]
    	.columns [ "day" ]
    	.mount   "#chart-container"
    

    What is the expected behavior? screenshot_deux

    Which versions of MuzeJS, and which browser/OS are affected by this issue? Did this work in previous versions of MuzeJS? 1.0.3 Chrome

    Also is it possible to use the DataModel to group by date range? It's vaguely mentioned in the docs but I couldn't find anything about it. Is adding a key like I do above the correct approach? Cheers!

    bug 
    opened by swapsCAPS 3
  • Incorrect Scroll behaviour

    Incorrect Scroll behaviour

    bug

    • Scroll visible where it is not necessary
    • chrome default scroll bar visible above axis.

    Replicate

    canvas.rows(["Maker"]) // Year goes in X axis
      .columns(['Acceleration']) // Acceleration goes in Y axis
      .data(dm).color({
        field: 'Acceleration', // A measure in color encoding channel creates gradient legend
        stops: 3, // 3 stops with interpolated value
        range: ['#eaeaea', '#258e47'] // range could be either set of color or predefined palletes
      }).config({
        autoGroupBy: { // Turn off internal grouping of data because data has order wich needs to be maintained
          disabled: true
        }
      }).width(600) // Set the chart width
      .height(400) // Set the chart height
      .title('The car acceleration respective to origin', { position: 'bottom', align: 'center' })
      //.title('Bar chart with gradient legend', { position: 'bottom', align: 'right', })
      .subtitle('Change of acceleration over the years colored with Horsepower', { position: 'bottom', align: 'right' }).mount('#chart'); // Render on a dom element
    

    Expected Scroll should not appear when enough space is allocated. Default Scroll should never appear.

    screenshot 2019-01-31 at 1 10 02 pm bug 
    opened by UD-UD 2
  • create-react-app application throws webassembly error after page refresh

    create-react-app application throws webassembly error after page refresh

    I have a react application generated by create-react-app. I have followed the instructions on how to integrate muze js in react app from the official documentation. I have used craco to override webpack copyplugin. When I start my application it generates the muze chart. but when I refresh the page, It throws an uncaught webassembly error. image

    Here is the craco config file content:

    const CopyWebpackPlugin = require('copy-webpack-plugin');
    const path = require('path');
    module.exports = {
      style: {
        postcss: {
          plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
          ],
        },
      },
      webpack: {
        plugins: [
          new CopyWebpackPlugin([
            {
              from: path.resolve("node_modules", "@chartshq/muze/dist"),
              to: '.'
            },
          ])
        ]
      }
    }
    

    Also, I have noticed that after integrating muze js, tailwindcss is not working properly. Can anyone point me where is the problem. From my guess the copyWebPlugin seems not working after page refresh.

    opened by ahashans 0
  • Stack/Group by more than 1 dimension or measure

    Stack/Group by more than 1 dimension or measure

    Hi guys,

    I'm checking Muze to integrate it with cube js REST API and it looks awesome so far.

    The only thing I can't figure out is how to create charts stacked or grouped by more than 1 dimension or measure. All the examples I have seen so far group or stack by one single property (color)

    This is a very important use case for us. For example:

    measure 1: water from rain measure 2: water from sea

    We would like to display a bar that stacks both measures and total is the sum of both.

    Is this possible?

    Thanks

    opened by javichi 1
  • Give width and height in Getting Started code in README.md

    Give width and height in Getting Started code in README.md

    Use width and height in Getting started code in Readme.md file as follows:

      canvas
      .data(dm) // Set data to the chart.
      .rows(["Horsepower"]) // Fields drawn on Y axis.
      .columns(["Origin"]) // Fields drawn on X axis.
      .width(600)
      .height(700)
      .mount("#chart"); // Specify an element to mount on using a CSS selector.
    
    bug 
    opened by rousan 0
Owner
Charts.com
Data is meaningless without the ability to visualize, consume & act on it. We build libraries & tools to achieve this goal.
Charts.com
React SDK for Muze charting Library

React-Muze is a React wrapper over the core Muze library. It provides React bindings for Muze and makes it easier to create charts using Muze for your React applications.

Charts.com 14 Sep 22, 2021
Reactochart is a library of React components for creating data visualization charts and graphs.

Reactochart is a library of React components for creating data visualization charts and graphs. Components include line chart, bar chart, area chart, heat maps, scatterplot, histogram, pie chart, sankey diagram, and tree map.

Spotify 478 Dec 9, 2021
A collection of composable React components for building interactive data visualizations

an ecosystem of composable React components for building interactive data visualizations. Victory Contents Getting Started Victory Native API Document

Formidable 9.3k Jan 13, 2022
🕸 Node-based Visualizations for React

?? reaflow Node-based Visualizations for React REAFLOW is a modular diagram engine for build static or interactive editors. The library is feature ric

REAVIZ 865 Jan 14, 2022
React components for d3plus visualizations.

d3plus-react React components for d3plus visualizations. Installing Use npm install d3plus-react -S to install the package as a dependency. Configurat

D3plus 23 Jan 12, 2022
📊 Data visualization library for React based on D3

Data visualization library for React based on D3js REAVIZ is a modular chart component library that leverages React natively for rendering the compone

REAVIZ 525 Jan 18, 2022
BizCharts - Powerful data visualization library based on G2 and React.

New charting and visualization library has been released: http://bizcharts.net/products/bizCharts. More details about BizCharts Features Rea

Alibaba 5.8k Jan 13, 2022
Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Uber Open Source 8.1k Jan 16, 2022
A data visualization framework combining React & D3

Semiotic is a data visualization framework combining React & D3 Interactive Documentation API Docs on the wiki Examples Installation npm i semiotic E

nteract 2.2k Jan 20, 2022
Data Visualization Component

react-charty This component was born from the Telegram programming contest where I took one of the prize places. A big thanks to the Telegram team and

Aleksandr Telegin 54 Jan 13, 2022
Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Uber Open Source 8.1k Jan 13, 2022
Reactive Polyomino Packing for Interactive Data visualization

Reactive Polymino Packing (RPP) Reactive Polymino Packing algorithm is developed to introduced interactivity within a packed layout of arbitrarily sha

Sarah Abdelkhalek 7 Oct 25, 2021
This is React Signals Plot component for geophysical data visualization.

React Signals Plot This is React Signals Plot component for geophysical data visualization. The component supports 'on the fly' data compression. That

Roman Guseinov 0 Jun 27, 2020
Casual data visualization framework, built on top of D3.js

d3 wrapper for casual data visualization Status v0.1.0 (alpha release), the npm package is available. The static bundle file is not supplied at now. I

Suzume Nomura 2 Dec 9, 2021
React component for Globe Data Visualization using ThreeJS/WebGL

react-globe.gl React bindings for the globe.gl UI component. A React component to represent data visualization layers on a 3-dimensional globe in a sp

Vasco Asturiano 324 Jan 17, 2022
js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart

Why? While I've been working on Under-the-hood-ReactJS I spent enormous amount of time on creating schemes. Each change in code or flowchart affects a

Bohdan Liashenko 6.3k Jan 14, 2022
🐯 visx | visualization components

visx visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefi

Airbnb 14.7k Jan 21, 2022
A thin, typed, React wrapper over Google Charts Visualization and Charts API.

React Google Charts A thin, typed, React wrapper for Google Charts. Docs and examples. React Google Charts Docs and examples. Installation Quick Start

Rakan Nimer 1.1k Jan 14, 2022
visx is a collection of reusable low-level visualization components.

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

Airbnb 14.6k Jan 13, 2022