Hexbyte Hacker News Computers Muze

Hexbyte Hacker News Computers

Redefining how you create visualizations for the web

Muze comes with handy features to create visualizations

Hexbyte  Hacker News  Computers ComposableComposable

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

Hexbyte  Hacker News  Computers Data FirstData 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

Hexbyte  Hacker News  Computers Data OperatorsData 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

Hexbyte  Hacker News  Computers Developer First APIDeveloper 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 ? '' : `

Country: ${originVal}

`}
${cylVal} Cylinders cars with an average power of ${hpVal} HP
`; tooltipContent += '
'; }); 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.

Read More