Descarga de muze - Descarga del código fuente muze

muze

Datos del sitio web

v2.0.0

Descargar

¿Qué es Muze?

Muze es una biblioteca de visualización de datos gratuita para crear visualizaciones de datos exploratorios (como Tableau) en el navegador, utilizando WebAssembly. Utiliza una gramática en capas de gráficos (GOG) para crear una visualización de datos compuestas e interactivas para la web. Es ideal para su uso en paneles y aplicaciones de Visual Analytics para crear visualizaciones altamente performadores, interactivas, multidimensionales y compuestas.

Utiliza un enfoque de primer dato para definir las construcciones y capas del gráfico, genera automáticamente la interactividad de los gráficos y le permite superar cualquier comportamiento o interacción en el gráfico.

Muze utiliza un DataModel en el navegador para almacenar y transformar datos, y controlar el comportamiento de cada componente en la visualización, lo que permite la creación de gráficos complejos y conectados cruzados.

Características

? Construya visualizaciones complejas e interactivas mediante el uso de construcciones de capa compuestas .
? Use operadores de datos ricos para transformar, visualizar e interactuar con los datos.
? Definir interacciones personalizadas configurando el modelo de comportamiento físico y el efecto secundario .
✂️ Use CSS para cambiar la apariencia de los gráficos.
☀️ tiene una sola fuente de verdad para toda su visualización e interacción controlada a partir de datos.
? Integre fácilmente con su aplicación existente enviando acciones a pedido.
Utiliza WebAssembly para manejar enormes conjuntos de datos y para un mejor rendimiento .

Instalación

CDN

Inserte la compilación de Muze y el CSS requerido en la <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 Muze desde NPM:

$ npm install @chartshq/muze

Luego, debe agregar un complemento Webpack Copy-Webpack-Plugin para copiar algunos archivos MUZE requeridos a su dist de salida o carpeta build .

npm install [email protected] --save-dev

Y luego, dentro de su objeto de configuración de Webpack, deberá agregar el copy-webpack-plugin a la lista de complementos, como así:

 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 : '.'
      } ,
    ] ) ,
  ]
}

También puede revisar nuestra plantilla de Muze-App para probar el Muze rápidamente a través de una aplicación Boilerplate.

Empezando

Una vez que se realice la instalación, siga los pasos a continuación:

Prepare los datos y el esquema correspondiente:

 // 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 de la siguiente manera:

Si está utilizando el paquete NPM, importe el paquete y su archivo CSS.

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

Si está utilizando CDN, úselo de la siguiente manera:

 const muze = window . muze ;

Cree un DataModel y un 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 ) ) ;

Documentación

Puede encontrar tutoriales detallados, conceptos y referencias de API en nuestra documentación.

¿Qué ha cambiado?

Muze 2.0.0 ahora está impulsado por WebAssembly que brinda una gran mejora del rendimiento sobre las versiones anteriores. La versión de JavaScript se ha desactivado y no se llevará a cabo un desarrollo activo en esa versión, pero solucionaremos errores críticos cuando se recauden en GitHub.

Esta versión de Muze trae en el poder del websembly para manejar grandes conjuntos de datos con facilidad, junto con interacción y representación sin fricción. Además, la parte de carga de datos en la versión WebAssembly es asíncrona, en lugar de ser sincrónico en la versión de JavaScript. Además, la versión de WebAssembly es gratuita pero solo está disponible como un binario compilado, mientras que la versión de JavaScript es gratuita y de código abierto (MIT).

Puede visitar la versión de JavaScript en desordenado aquí https://github.com/chartshq/muze-depreced

Migrar de versiones anteriores de Muze

Ahora el Muze se volvió asíncrono en lugar de ser sincrónico en la versión anterior de JavaScript.

API cambiadas

Creando envé

Versión desaprobada de Muze:

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

Última versión:

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

despacharbehaviour

Versión desaprobada de Muze:

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

Última versión:

En la versión actual, los identificadores deben pasar en el objeto de dimensiones o objeto de rango si es un campo de medida o 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 ]
    }
  }
} ) ;