Unduh muze - Unduh Kode Sumber muze

muze

Data situs web

v2.0.0

Unduh

Apa itu Muze?

Muze adalah pustaka visualisasi data gratis untuk membuat visualisasi data eksplorasi (seperti Tableau) di browser, menggunakan WebAssembly. Ini menggunakan tata bahasa grafik berlapis (GOG) untuk membuat visualisasi data yang dapat dikomposisi dan interaktif untuk Web. Ini sangat ideal untuk digunakan dalam dasbor & aplikasi analisis visual untuk membuat visualisasi yang sangat berkinerja, interaktif, multi-dimensi, dan komposisi.

Ini menggunakan pendekatan data-pertama untuk menentukan konstruksi dan lapisan bagan, secara otomatis menghasilkan interaktivitas silang, dan memungkinkan Anda untuk mengatasi perilaku atau interaksi apa pun pada bagan.

Muze menggunakan datamodel in-browser untuk menyimpan dan mengubah data, dan mengontrol perilaku setiap komponen dalam visualisasi, sehingga memungkinkan pembuatan grafik yang kompleks dan terhubung silang.

Fitur

? Bangun visualisasi yang kompleks dan interaktif dengan menggunakan konstruksi lapisan yang dapat dikomposisi .
? Gunakan operator data yang kaya untuk mengubah, memvisualisasikan, dan berinteraksi dengan data.
? Tentukan interaksi khusus dengan mengonfigurasi model perilaku fisik dan efek samping .
✂️ Gunakan CSS untuk mengubah tampilan dan nuansa grafik.
☀️ memiliki satu sumber kebenaran tunggal untuk semua visualisasi dan interaksi Anda yang dikendalikan dari data.
? Integrasi dengan mudah dengan aplikasi Anda yang ada dengan mengirimkan tindakan berdasarkan permintaan.
Menggunakan WebAssembly untuk menangani set data besar dan untuk kinerja yang lebih baik .

Instalasi

CDN

Masukkan Muze Build dan CSS yang diperlukan ke dalam <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

Instal Muze dari NPM:

$ npm install @chartshq/muze

Maka Anda perlu menambahkan plugin webpack copy-webpack-plugin untuk menyalin beberapa file muze yang diperlukan ke folder dist output atau build Anda.

npm install [email protected] --save-dev

Dan kemudian di dalam objek konfigurasi webpack Anda, Anda harus menambahkan copy-webpack-plugin ke daftar plugin, seperti itu:

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

Anda juga dapat memeriksa muze-appplate kami untuk mencoba Muze dengan cepat melalui aplikasi boilerplate.

Memulai

Setelah instalasi selesai, silakan ikuti langkah -langkah di bawah ini:

Siapkan data dan skema yang sesuai:

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

Impor Muze sebagai berikut:

Jika Anda menggunakan paket NPM, impor paket dan file CSS -nya.

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

Jika Anda menggunakan CDN, gunakan sebagai berikut:

 const muze = window . muze ;

Buat datamodel dan bagan dasar:

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

Dokumentasi

Anda dapat menemukan tutorial terperinci, konsep, dan referensi API di dokumentasi kami.

Apa yang telah berubah?

Muze 2.0.0 sekarang ditenagai oleh WebAssembly yang membawa peningkatan kinerja yang sangat besar dibandingkan versi sebelumnya. Versi JavaScript telah sudah usang dan tidak ada pengembangan aktif yang akan terjadi dalam versi itu - tetapi kami akan memperbaiki bug kritis saat dan ketika dinaikkan di GitHub.

Versi Muze ini membawa kekuatan WebAssembly untuk menangani kumpulan data besar dengan mudah, bersama dengan interaksi dan rendering tanpa gesekan. Selain itu, bagian pemuatan data dalam versi WebAssembly tidak sinkron, yang bertentangan dengan sinkron dalam versi JavaScript. Lebih lanjut, versi WebAssembly gratis tetapi hanya tersedia sebagai biner yang dikompilasi, sedangkan versi JavaScript gratis dan open-source (MIT).

Anda dapat mengunjungi versi javascript yang sudah usang di sini https://github.com/chartshq/muze-deprecated

Bermigrasi dari versi muze sebelumnya

Sekarang Muze menjadi tidak sinkron dan bukan sinkron dalam versi JavaScript sebelumnya.

API yang diubah

Membuat env

Versi Muze Terpusat:

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

Versi Terbaru:

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

DispatchBehaviour

Versi Muze Terpusat:

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

Versi Terbaru:

Dalam versi saat ini, pengidentifikasi perlu diteruskan dalam dimensi objek atau objek rentang jika diukur atau bidang 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 ]
    }
  }
} ) ;