Redefining how you create visualizations for the web

Muze comes with handy features to create visualizations
layerFactory.composeLayers('referenceLine', [
   {
       name: 'averageLine',
       mark: 'tick',
       source: 'calulatedAverage',
       className: 'averageLine',
       encoding: {
           y: 'referenceLine.encoding.y',
           x: null,
           color: { value: () => '#414141' }
       },
   },
   {
       name: 'averageText',
       mark: 'text',
       source: 'calulatedAverage',
       className: 'averageText',
       encoding: {
           y: 'referenceLine.encoding.y',
           text: 'referenceLine.encoding.text',
           color: { value: () => '#414141' },
       },
   }
]); 
Visualizations in Muze are composed of layers that can be used to create complex constructs. Each layer can be developed to house a different geometry or chart type coupled with the data source. Multiple layers can then be composed into single view to create insightful visualizations.

GO TO DOCS

canvas
   .rows(['Horsepower'])
   .columns(['Year'])
   .data(rootData)
   .transform({ calulatedAverage: (dt) => dt.groupBy([''], { Miles_per_Gallon: 'avg' }) })
   .layers([
       { mark: 'bar' }, 
       {
           mark: 'referenceLine',
           encoding: {
               text: {
                   field: 'Horsepower',
                   formatter: value => `Average Horsepower: ${Math.round(value)}`
               }
           }
       }
   ])
   .mount('#chart-container');

Muze introduces the DataModel that provides a consistent interface for all visualizations to react to changes in data. Having a single source of truth for all connected visualizations allows us to build charts that are cross connected by default without you having to configure anything.

GO TO DOCS

const dm = new DataModel(data, schema); /* Creating new DataModel */
const compose = DataModel.Operators.compose; /* Getting the compose operator */
const select = DataModel.Operators.select;  /* Getting the project operator */
const project = DataModel.Operators.project; /* Getting the project operator */

//Apply selection function to filter out cars from 1970
const carsFrom1970 = compose(
 select(fields => +fields.Year.value === +new Date(1970, 0, 1)),
 project(['Name'])
);

const outputDM = carsFrom1970(dm); 
The DataModel provides operators which can be used to wrangle data in an intuitive manner so that you can focus on building your visualizations. These same group of Operators is used to encode information in visualization.

GO TO DOCS

canvas
   .data(dm)
   .config({
       interaction: {
           tooltip: {
               formatter: (dataModel, context) => {
                   const colorAxis = context.axes.color[0];
                   const tooltipData = dataModel.getData().data;
                   const fieldConfig = dataModel.getFieldsConfig();

                   let tooltipContent = '';
                   tooltipData.forEach((dataArray, i) => {
                       const originVal = dataArray[fieldConfig.Origin.index];
                       const hpVal = dataArray[fieldConfig.Horsepower.index];
                       const cylVal = dataArray[fieldConfig.Cylinders.index];
                       const l = colorAxis.getRawColor(cylVal)[2];
                       tooltipContent += `
                           ${i ? '' : `<h3 style="background-color:#EAEAEA">Country: ${originVal}</h3>`}
                           <div style="background: ${colorAxis.getColor(cylVal)}; padding: 4px 8px; color: ${l > 0.45 ? 'black' : 'white' };">
                               <u>${cylVal} Cylinders</u> cars with an average power of <b>${hpVal} HP</b>
                           </div>
                           `;
                       tooltipContent += '<br>';
                   });
                   return html`${tooltipContent}`;
               });

Built for developers by developers. We know the challenges of using an unwieldy API so we have taken great care to ensure you have a seamless experience integrating Muze into your development workflow.

Going beyond vanilla charting

Muze supports all the features commonly provided by charting libraries, and then a lot more

Tabular Dataformat

Supports multiple data formats like CSV, JSON and 2D arrays.

Auto Connections and Cross Filtering

Visualizations with the same data source are cross connected.

CSS Theming

Use the range of default themes or over-ride the CSS classes to create your own.

Stacking Layout

Use the Layout modules to stack visualizations on top of each other.

Dynamic binding of reactions

Dynamically bind reactions to any kind of event to invoke elements like tootip, selection box or to add layers dynamically.

Pseudo Immutability

All the data model operations are pseudo immutable for easy reasoning.