YT: muze

, ,

YouTube

chartshq/muze

https://github.com/chartshq/muze

why?

今回もStackShareの Weekly メールから。

StackShareから送られてきたのはExploreというExcelやCSVなどをvisualizeしてくれるサービスの紹介だったけど、 そこからリンクを辿るとサービス提供元のCharts.comという会社が chartshq/muze という チャート系のJavascriptライブラリを公開しているっぽかったので、Exploreの中で使われてるのもこれかなと思い、興味があった。

Web上にチャートをレンダリングする系のライブラリはたくさんあるけど、何か違うところがあるのかちょっと気になった感じ。

what?

YouTubeの方でも最後の方で気づいたけど、Javascript製かと思ったらWASM製らしい。 以前のバージョンはJavascript製でMITライセンスで公開されていたけど、去年の夏頃にリリースされた v2 系からWASMライブラリになり、合わせてライセンスも変更されコードも公開されなくなった模様。 v2 リリースから半年ほどリポジトリに動きもないので、今あるリポジトリは歴史的経緯で残ってるだけであり、SaaSに完全にシフトしたっぽいからOSSとしての発展はもうなさそう。残念。

WASM製になって性能が改善されたと言っているし、Web上でもWASMでのチャートライブラリはあまり聞いたことがない（ちゃんと調べてもないけど）ので、そこら辺を武器に戦っていこうという判断があったんだろうなと推察。

とりあえずWASMの方を少しだけ動かしてみたけど、データと一緒に自分で作ったデータに対するスキーマを読ませるのが面白そうな感じ。チャートもまぁ普通にレンダリングできそう。

How?

公式ドキュメントの Getting Started 通りにデモを動かしてみた。

https://github.com/chartshq/muze#getting-started

まずはデータに対するスキーマを作っておいて、

const schema = [
  {
    name: 'Name',
    type: 'dimension'
  },
  {
    name: 'Maker',
    type: 'dimension'
  },
  {
    name: 'Horsepower',
    type: 'measure',
    defAggFn: 'avg'
  },
  {
    name: 'Origin',
    type: 'dimension'
  }
]

そのスキーマに対するデータを作って読み込ませる。

const data = [
   {
    "Name": "chevrolet chevelle malibu",
    "Maker": "chevrolet",
    "Horsepower": 130,
    "Origin": "USA"
  },
  {
    "Name": "buick skylark 320",
    "Maker": "buick",
    "Horsepower": 165,
    "Origin": "USA"
  },
  ...
]

スキーマにある defAggFn は、同一のスキーマに関するデータが複数あった場合の集約関数を指定するものらしい。

...
  {
    name: 'Horsepower',
    type: 'measure',
    defAggFn: 'avg'
  },
...

avg なら平均だし、maxなら最大値、みたいな。

データの読み出しは下記のような感じ。

  
  const muze = window.muze;
  const DataModel = await muze.DataModel.onReady();
  const formattedData = await DataModel.loadData(data, schema);

  let dm = new DataModel(formattedData);

DataModel.loadData(data, schema) で、スキーマと一緒にデータを読み込んでる感じ。へ〜。 muzeやDataModelがオブジェクトとして使われたり関数として使われたりするので、頭がこんがらがりそう。

データを読み込ませたらキャンバスを作って #chart 要素に割り当てる。ここら辺は、まぁそんな感じだろうなという感じ。

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

  canvas
    .data(dm)
    .rows(["Horsepower"]) 
    .columns(["Origin"]) 
    .mount("#chart");

レンダリングされるのは以下のようなチャート。(画像は後で貼る)

https://youtu.be/MXxGL_8GSIY?t=1031 chart sample

棒グラフだけでなく、もちろん折れ線グラフなどもレンダリング可能。

https://youtu.be/MXxGL_8GSIY?t=1485 chart sample2

Impression

スキーマと一緒にデータを読み込ませて、データの型付けをするのは面白い。 ただ、もうオープンソースではないので今後使うことはないだろう。

Contribute

特になし（オープンソースではない）

comments powered by Disqus