muze Download - muze Source Code Download

muze

Données du site Web

v2.0.0

Télécharger

Qu'est-ce que Muze?

Muze est une bibliothèque de visualisation de données gratuite pour la création de visualisations de données exploratoires (comme Tableau) dans le navigateur, en utilisant WebAssembly. Il utilise une grammaire en couches de graphiques (GOG) pour créer une visualisation de données composable et interactive pour le Web. Il est idéal pour une utilisation dans des tableaux de bord et des applications d'analyse visuelle pour créer des visualisations hautement performantes, interactives, multidimensionnelles et composables.

Il utilise une approche axée sur les données pour définir les constructions et les couches du graphique, génère automatiquement l'interactivité du diagramme et vous permet de sur-ride tout comportement ou interaction sur le graphique.

Muze utilise un DataModel dans le navigateur pour stocker et transformer des données, et contrôler le comportement de chaque composant de la visualisation, permettant ainsi la création de graphiques complexes et transversaux.

Caractéristiques

? Construisez des visualisations complexes et interactives en utilisant des constructions de calques composables .
? Utilisez de riches opérateurs de données pour transformer, visualiser et interagir avec les données.
? Définissez les interactions personnalisées en configurant le modèle comportemental physique et l'effet secondaire .
✂️ Utilisez CSS pour changer l'apparence et la sensation des graphiques.
☀️ Ayez une seule source de vérité pour toutes vos visualisation et interaction contrôlées à partir des données.
? Intégrez facilement à votre application existante en envoyant des actions à la demande.
Utilise WebAssembly pour gérer d'énormes ensembles de données et pour de meilleures performances .

Installation

Monnaie

Insérez la construction de muze et le CSS requis dans le <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

Installer Muze à partir de NPM:

$ npm install @chartshq/muze

Ensuite, vous devez ajouter un plugin WebPack Copy-Webpack-Plugin pour copier certains fichiers Muze requis dans votre dossier de sortie dist ou build .

npm install [email protected] --save-dev

Et puis dans votre objet de configuration WebPack, vous devrez ajouter la copy-webpack-plugin à la liste des plugins, comme ainsi:

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

Vous pouvez également consulter notre modèle Muze-App-Template pour essayer rapidement le Muze via une application de passe-partout.

Commencer

Une fois l'installation terminée, veuillez suivre les étapes ci-dessous:

Préparez les données et le schéma correspondant:

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

Importer du muze comme suit:

Si vous utilisez le package NPM, importez le package et son fichier CSS.

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

Si vous utilisez CDN, utilisez-le comme suit:

 const muze = window . muze ;

Créez un DataModel et un graphique de base:

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

Documentation

Vous pouvez trouver des tutoriels détaillés, des concepts et des références API dans notre documentation.

Qu'est-ce qui a changé?

Muze 2.0.0 est maintenant alimenté par WebAssembly apportant une énorme amélioration des performances par rapport aux versions précédentes. La version JavaScript a été obsolète et aucun développement actif n'aura lieu dans cette version - mais nous allons corriger les bogues critiques au fur et à mesure de la hausse dans GitHub.

Cette version de Muze apporte la puissance de WebAssembly pour gérer les grands ensembles de données avec facilité, ainsi qu'une interaction sans friction et un rendu. De plus, la partie de chargement de données dans la version WebAssembly est asynchrone, au lieu d'être synchrone dans la version JavaScript. De plus, la version WebAssembly est gratuite mais uniquement disponible en tant que binaire compilé, tandis que la version JavaScript est gratuite et open-source (MIT).

Vous pouvez visiter la version JavaScript dépréciée ici https://github.com/chartshq/muze-deprecated

Migration des versions précédentes de Muze

Maintenant, le muze est devenu asynchrone plutôt que d'être synchrone dans la version JavaScript précédente.

API modifiée

Création d'env

Muze Version dépréciée:

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

Dernière version:

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

dépasser

Muze Version dépréciée:

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

Dernière version:

Dans la version actuelle, les identificateurs doivent être passés dans l'objet Dimensions ou l'objet de plage s'il est mesure ou champ temporel.

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