muze Download - muze Source Code Download

muze

Website-Daten

v2.0.0

Herunterladen

Was ist Muze?

MUZE ist eine kostenlose Datenvisualisierungsbibliothek zum Erstellen von Explorationsdatenvisualisierungen (wie Tableau) im Browser mithilfe von WebAssembly. Es verwendet eine geschichtete Grammatik der Grafik (GOG), um eine komponierbare und interaktive Datenvisualisierung für das Web zu erstellen. Es ist ideal für die Verwendung in visuellen Analytics-Dashboards und Anwendungen, um hochdarstellende, interaktive, mehrdimensionale und komponierbare Visualisierungen zu erstellen.

Es verwendet einen Daten-ersten-Ansatz, um die Konstrukte und Ebenen des Diagramms zu definieren, automatisch eine interaktiven Interaktivität zu erzeugen und Ihnen alle Verhaltensweisen oder Interaktionen auf dem Diagramm zu übertreffen.

Muze verwendet ein In-Browser -Datamodel , um Daten zu speichern und zu transformieren und das Verhalten jeder Komponente in der Visualisierung zu steuern, wodurch er das Erstellen komplexer und vernetzter Diagramme ermöglicht wird.

Merkmale

? Erstellen Sie komplexe und interaktive Visualisierungen mithilfe von komponierbaren Schichtkonstrukten.
? Verwenden Sie reichhaltige Datenoperatoren , um Daten zu transformieren, visualisieren und interagieren.
? Definieren Sie benutzerdefinierte Interaktionen, indem Sie das physikalische Verhaltensmodell und Nebeneffekt konfigurieren.
✂️ Verwenden Sie CSS , um das Erscheinungsbild der Diagramme zu ändern.
☀️ haben eine einzige Quelle der Wahrheit für alle Ihre Visualisierung und Interaktion, die von Daten gesteuert wird.
? Integrieren Sie sich einfach in Ihre vorhandene Anwendung, indem Sie auf Bedarf Aktionen versenden .
Verwendet WebAssembly zum Umgang mit riesigen Datensätzen und für eine bessere Leistung .

Installation

CDN

Fügen Sie den Muze -Build und das erforderliche CSS in die <head> ein:

 < 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

Installieren Sie Muze von NPM:

$ npm install @chartshq/muze

Anschließend müssen Sie ein Webpack-Plugin-Kopie-Webpack-Plugin hinzufügen, um einige erforderliche MUZE-Dateien in Ihren Ausgangs dist oder build Ordner zu kopieren.

npm install [email protected] --save-dev

Und dann müssen Sie in Ihrem Webpack-Konfigurationsobjekt die copy-webpack-plugin in die Liste der Plugins hinzufügen, wie dies:

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

Sie können auch unsere Muze-App-Template überprüfen, um den Muze schnell durch eine Boilerplate-App auszuprobieren.

Erste Schritte

Sobald die Installation abgeschlossen ist, befolgen Sie bitte die folgenden Schritte:

Bereiten Sie die Daten und das entsprechende Schema vor:

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

Importieren Sie Muze wie folgt:

Wenn Sie das NPM -Paket verwenden, importieren Sie das Paket und seine CSS -Datei.

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

Wenn Sie CDN verwenden, verwenden Sie es wie folgt:

 const muze = window . muze ;

Erstellen Sie ein Datamodel und ein Basic -Diagramm:

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

Dokumentation

In unserer Dokumentation finden Sie detaillierte Tutorials, Konzepte und API -Referenzen.

Was hat sich geändert?

Muze 2.0.0 wird jetzt von WebAssembly mit Strom versorgt, was eine enorme Leistungsverbesserung gegenüber den vorherigen Versionen erzielt. Die JavaScript -Version wurde veraltet und in dieser Version findet keine aktive Entwicklung statt - aber wir werden kritische Fehler als und in GitHub beheben.

Diese Version von MUZE bringt die Kraft der WebAssembly für die Behandlung großer Datensätze sowie reibungslose Interaktion und Rendering in Kraft. Darüber hinaus ist der Datenladeteil der Daten in der WebAssembly -Version asynchron, anstatt in der JavaScript -Version synchron zu sein. Darüber hinaus ist die WebAssembly-Version kostenlos, aber nur als kompilierter binär erhältlich, während die JavaScript-Version kostenlos und Open-Source (MIT) ist.

Sie können die veraltete JavaScript-Version hier besuchen

Migrieren von früheren Versionen von MUZE

Jetzt wurde der Muze asynchron, anstatt in der vorherigen JavaScript -Version synchron zu sein.

APIs geändert

Umwelt schaffen

Muze veraltete Version:

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

Neueste Version:

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

Versandbehaviour

Muze veraltete Version:

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

Neueste Version:

In der aktuellen Version müssen die Bezeichner in Dimensionsobjekten oder Reichweite übergeben werden, wenn es sich um Maß oder ein zeitliches Feld handelt.

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