How to Commit Graphs to E2D3 for Mac Users

こんにちは E2D3のContributerの大曽根です。 今回は、はじめてのグラフをcommitする 環境は、Mac(バージョン 10.10.2) + Chrome(バージョン 41.0.*)です。 まずこちらを参考にして、E2D3のソースを持ってきます。 https://github.com/e2d3/e2d3/wiki/Getting-Started npm start をしてhttp://localhost:8000/index.htmlにアクセスすると、下記のような画面を見ることができます。               ここにグラフを追加することができます。 今回は、bubble-chartを追加したいと思います。 cloneしてきたままですと、masterのbranchにいますので、まず、branchをきってそこに移ります。 今回はbubble-chartなので、branch名もbubble-chartにします。 $ git checkout -b bubble-chart まずは、contribディレクトリ直下に”bubble-chart”というディレクトリを作成します。 その中に data.csv main.css main.js README.md thumbnail.png というファイルを作成します。 ※今回はサンプルのbarchart-javascriptから持ってきてしまいました。   主にmain.jsをいじってグラフを作成していきます。 今回はbubble chartということで3つのメトリックをそれぞれ、x軸とy軸および円の大きさにプロットします。 こんな感じに作ってみました。   次に、サムネイルの設定をしていこうと思います。好きな画像をディレクトリ内に入れて thumbnail.pngという名前で保存すればよいのですが、E2D3の”Save Image”の機能を使って作成してみようかと思います。 先ほどの画像の右上の”Save Image”のボタンを押下し、.png形式で保存します。 その後、bubble-chartのディレクトリにthumbnail.pngという名前で保存すれば完了です。 一覧に表示されるようになります。   最後に、READMEを編集しましょう。README.mdを編集することで、Indexのグラフのサムネイルをマウスオーバーした際の表示を変更することができます。下の図がその例になります。 できましたら、commitして、 $…