muze
v2.0.0
Muzeは、WebAssemblyを使用して、ブラウザで探索的データの視覚化（Tableauなど）を作成するための無料のデータ視覚化ライブラリです。グラフィックス（GOG）の階層化された文法を使用して、Web用の構成可能でインタラクティブなデータ視覚化を作成します。視覚的な分析ダッシュボードとアプリケーションで使用して、非常にパフォーマンス、インタラクティブ、多次元、および構成可能な視覚化を作成するのに最適です。
データファーストアプローチを使用して、チャートのコンストラクトとレイヤーを定義し、クロスチャートの対話性を自動的に生成し、チャート上の動作や相互作用をオーバーライドできます。
Muzeは、ブラウザー内のデータモデルを使用してデータを保存および変換し、視覚化のすべてのコンポーネントの動作を制御し、それにより複雑でクロス接続されたチャートの作成を可能にします。
？構成可能な層コンストラクトを使用して、複雑でインタラクティブな視覚化を構築します。
？リッチなデータ演算子を使用して、データを変換、視覚化、対話します。
？物理的な行動モデルと副作用を構成して、カスタムインタラクションを定義します。
CSSを使用して、チャートのルックアンドフィールを変更します。
dataデータから制御されたすべての視覚化と相互作用のために、単一の真実の源を持っています。
？オンデマンドでアクションを発送することにより、既存のアプリケーションと簡単に統合します。
WebAssemblyを使用して、巨大なデータセットを処理し、パフォーマンスを向上させます。
Muze Buildと必要なCSSを<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からMuzeをインストールする：
$ npm install @chartshq/muze次に、WebPackプラグインのコピーWebpack-Pluginを追加して、必要なMuzeファイルをdistまたはbuildフォルダーにコピーする必要があります。
npm install [email protected] --save-dev次に、WebPack Configurationオブジェクト内で、 copy-webpack-pluginプラグインのリストに追加する必要があります。
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 : '.'
} ,
] ) ,
]
}また、Muze-App-Templateをチェックアウトして、ボイラープレートアプリを介してMuzeをすばやく試してみることもできます。
インストールが完了したら、以下の手順に従ってください。
// 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"
}
]NPMパッケージを使用している場合は、パッケージとそのCSSファイルをインポートします。
import muze from '@chartshq/muze' ;
import "@chartshq/muze/dist/muze.css" ;CDNを使用している場合は、次のように使用してください。
const muze = window . muze ; // 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 ) ) ; 詳細なチュートリアル、概念、API参照をドキュメントで見つけることができます。
Muze 2.0.0は、以前のバージョンでパフォーマンスを大幅に改善するWebAssemblyを搭載しています。 JavaScriptバージョンは非推奨であり、そのバージョンではアクティブな開発は行われませんが、GitHubで掲載されたときに重要なバグを修正します。
このバージョンのMuzeは、摩擦のない相互作用とレンダリングとともに、大規模なデータセットを簡単に処理するためのWebAssemblyの力をもたらします。さらに、JavaScriptバージョンで同期するのではなく、WebAssemblyバージョンのデータロードパーツは非同期です。さらに、WebAssemblyバージョンは無料ですが、コンパイルされたバイナリとしてのみ利用可能ですが、JavaScriptバージョンは無料でオープンソース（MIT）です。
削除されたJavaScriptバージョンは、こちらhttps://github.com/chartshq/muze-deprecatedにアクセスできます
これで、以前のJavaScriptバージョンで同期するのではなく、ミューズは非同期になりました。
env
Muze Deprecatedバージョン：
const env = muze ( ) ;
const canvas = env . canvas ( ) ;最新バージョン：
( async function ( ) {
const env = await muze ( ) ;
const canvas = env . canvas ( ) ;
} ) ( ) ;DispatchBehaviour
Muze Deprecatedバージョン：
canvas . firebolt ( ) . dispatchBehaviour ( 'highlight' , {
criteria : {
Maker : [ 'ford' ]
}
} ) ;最新バージョン：
現在のバージョンでは、測定または時間的フィールドである場合、識別子は寸法オブジェクトまたは範囲オブジェクトに渡す必要があります。
// 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 ]
}
}
} ) ; ここでgithubの問題を提起してください。
Public Wishlistに貢献するか、Muze Public Wishlist＆Roadmapの既存の機能を昇進させてください。
カスタムライセンス（無料で使用できます）
