Download muze - Download do código -fonte muze

muze

Dados do site

v2.0.0

Baixar

O que é Muze?

A Muze é uma biblioteca de visualização de dados gratuita para criar visualizações exploratórias de dados (como o Tableau) no navegador, usando o WebAssembly. Ele usa uma gramática em camadas de gráficos (GOG) para criar visualização de dados composável e interativa para a Web. É ideal para uso em painéis e aplicativos do Visual Analytics para criar visualizações altamente executivas, interativas, multidimensionais e compostas.

Ele usa uma abordagem de dados de dados para definir os construtos e camadas do gráfico, gera automaticamente a interatividade cruzada e permite que você aproveite demais qualquer comportamento ou interação no gráfico.

A Muze usa um datamodel no navegador para armazenar e transformar dados e controlar o comportamento de todos os componentes na visualização, permitindo a criação de gráficos complexos e cruzados.

Características

? Construa visualizações complexas e interativas usando construções de camadas composíveis .
? Use operadores de dados ricos para transformar, visualizar e interagir com dados.
? Defina as interações personalizadas configurando o modelo comportamental físico e o efeito colateral .
✂️ Use CSS para alterar a aparência e a sensação dos gráficos.
☀️ ter uma única fonte de verdade para toda a sua visualização e interação controladas a partir de dados.
? Integrar -se facilmente ao seu aplicativo existente, enviando ações sob demanda.
Usa a WebAssembly para lidar com enormes conjuntos de dados e para melhor desempenho .

Instalação

CDN

Insira a construção do Muze e o CSS necessário no <head> :

 < 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

Instale o Muze do NPM:

$ npm install @chartshq/muze

Em seguida, você precisa adicionar um plug-in do Webpack, copy-webpack-plugin para copiar alguns arquivos Muze necessários para sua pasta de dist ou build .

npm install [email protected] --save-dev

E então, no seu objeto de configuração do Webpack, você precisará adicionar o copy-webpack-plugin à lista de plugins, assim:

 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 ( "<your_node_modules_path>" , "@chartshq/muze/dist" ) ,
        to : '.'
      } ,
    ] ) ,
  ]
}

Você também pode fazer o check-out nosso modelo de mancha de App para experimentar o Muze rapidamente através de um aplicativo Boilerplate.

Começando

Depois que a instalação estiver concluída, siga as etapas abaixo:

Prepare os dados e o esquema correspondente:

 // 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"
  }
]

Importar Muze da seguinte maneira:

Se você estiver usando o pacote NPM, importe o pacote e seu arquivo CSS.

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

Se você estiver usando CDN, use -a da seguinte forma:

 const muze = window . muze ;

Crie um datamodel e um gráfico básico:

 // 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 ) ) ;

Documentação

Você pode encontrar tutoriais, conceitos e referências de API detalhados em nossa documentação.

O que mudou?

O Muze 2.0.0 agora é alimentado pela WebAssembly trazendo uma enorme melhoria de desempenho em relação às versões anteriores. A versão JavaScript foi preterida e nenhum desenvolvimento ativo ocorrerá nessa versão - mas corrigiremos bugs críticos como e quando criados no GitHub.

Esta versão do Muze traz o poder do WebAssembly para lidar com grandes conjuntos de dados com facilidade, juntamente com a interação e a renderização sem atrito. Além disso, a peça de carregamento de dados na versão WebAssembly é assíncrona, em vez de ser síncrona na versão JavaScript. Além disso, a versão WebAssembly é gratuita, mas disponível apenas como um binário compilado, enquanto a versão JavaScript é gratuita e de código aberto (MIT).

Você pode visitar a versão JavaScript depreciada aqui https://github.com/Chartshq/muze-deprecated

Migrando de versões anteriores de Muze

Agora, o Muze se tornou assíncrono em vez de ser síncrono na versão anterior JavaScript.

APIs alteradas

Criando env

Versão depreciada Muze:

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

Versão mais recente:

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

Dispatchbehaviour

Versão depreciada Muze:

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

Versão mais recente:

Na versão atual, os identificadores precisam ser passados no objeto de dimensões ou no objeto de intervalo se for medido ou campo temporal.

 // 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 ]
    }
  }
} ) ;