Webページにfacetsを埋め込む

データ可視化したいよね!?

htmlもjavascriptもよくわからないけど、とりあえず可視化したいってことありますよね?
そんな中見つけた(?)のがこれ

Facets - Visualizations for ML datasets

見た目もカッコイイし、なんとコンポーネントとしてWebページに埋め込めるらしい!!
ということで、Webフロントなんて右も左もわからない中、とりあえずデータを表示出来るhtmlの作成を目指して見ました。

結論

これでいける!!(かもしれない。。。)

jsfiddle.net

やっていること

  • webcomponents-lite.jsを読み込む
  • facets.htmlをimport
  • データを整形して facets-overview オブジェクト?に渡す(javascriptとデータは丸パクリ)

その他どうでもいいこと

Polymerとは何なのか(**Polymerについての説明はありません**)

facetsのgithubには「Polymer Componentとして作られているよ」と書いてあります。
よってPolymerなるものを使えば、簡単に使えるんじゃないか。そう思っていた時期が僕にもありました。。。

試行錯誤の結果、Polymerの使用は諦めました。
(そもそもPolymerの部品(custom elements)として使うものではないんじゃない?)

ビルドで躓く(結局使わなかった。。。)

facetsのビルドはbazel使うらしいですね。
(そもそもhtmlとjavascriptのビルドとは何なのかよく知りませんが。。。)
ビルドが成功するとfacets.htmlが生成されます。

Bazel - a fast, scalable, multi-language and extensible build system" - Bazel

bazelを使ったビルドもなかなか上手く動いてくれません

ちなみにbuildするためのコマンドは下記の通りです。
(issueに書いてあったが、bazelユーザーにとってはREADMEに書くまでもないことなのだろうか?。)
How to load and view your data? · Issue #15 · PAIR-code/facets · GitHub

bazel build facets:facets

まとめというか感想

  • とりあえずissue見ろし
  • Webフロントエンド開発は分かる人に聞くか丸投げしたい
  • 簡単に動くと思ってはいけない(これ重要!)
  • 依存関係がコンフリクトして埋め込めないかもね
  • 記事が見づらくても気にしない。。。
  • chrome以外で表示出来るかどうかは知らない