bl.ocks.orgって何?

このサービスはD3.jsの開発者 Mike Bostock が作成したもので、
Gistに投稿されたHTMLコードを解析して、簡易に表示するものです。
公式サイトはこちら

D3.jsのグラフに限らず、一般公開したいHTMLをGistに投稿するだけで、
bl.ocks.orgから見れるようになります。

ちなみに、私のblocksはこちらから見れます。
Gistのコードが一覧で表示されています。

とても簡単な使い方

blocksの使い方はとても簡単です。

  1. GistでHTMLのコードを作成する
  2. index.htmlというファイル名で公開

これだけです。その後、http://bl.ocks.org/(githubのアカウント名)にアクセスします。

Gistの一覧が表示されるので、作ったファイルを選択(見当たらない場合はしばらく待って更新)すると、結果が表示されます。
例えばこんな感じ サンプル

より詳しい使い方

以下の3つのファイルを加えると、より詳細なblocksに仕上がる。

  • index.html
  • README.md
  • thumbnail.png

READMEはMarkdownで書かれたコードの説明。
thumbnailはblocksのGist一覧で表示される画像。
大きさは230×120にすると調子が良さそう。

(pngの画像は、git cloneしてから画像を追加し、git pushしないと入りません)

試しに作ってみた

更新する度に表示が変わるバブルチャートを作ってみました。
ランダムバブルチャート

グラフの描画もコードの説明も、うまく表示されてますね!

描画領域は960×500ピクセルなので、その範囲に収まればグラフに限らず何でも表示されます。

ちょっとしたHTMLの共有に、使ってみてはいかがでしょうか。

CATEGORIES