Tableau-Like Data Visualizations in JavaScript

Composable

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

Data First

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

Data Operators

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

Developer First API

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.