bl.ocks.org に記事を投稿する

D3.js の作者 Mike Bostock 氏の最新サンプルが多数見られる bl.ocks.org ですが、GitHub アカウントを持っているユーザならば誰でも投稿が可能です。
http://bl.ocks.org/<GitHub id> にアクセスすれば、過去に自分の書いた gist を自動的に取ってきて表示されると思います。

自分も時々投稿しています。
http://bl.ocks.org/osoken

手順

1. public gist を新規に書く

• ファイルは何でもいいけど、index.html が良さそうです
• [Gist description] は記事のタイトルとして扱われます。blocks一覧に表示されるのと、blocksのタイトルとして使われます。

1. gist を clone します
2. readme.md と index.html と thumbnail.png をリポジトリ内に作って push します

• readme.md は blocks の iframe のすぐ下に説明文として表示されます
• index.html は blocks の iframe 内に展開されます。解像度は 960px*500px です（固定？）
• thumbnail.png は blocks 一覧の表示に使われます。解像度は 230px*120px です
• 同じ gist 内であれば、相対パスでアクセスできます。データを gist に一緒に置くことが多い
• 異なる gist のリソースにアクセスするには /<GitHub id>/raw/<gist id>/<リソース名> でできます

Tips

ローカルで blocks に似たディレクトリ構成を再現する

ローカル環境に bl.ocks.org と同じディレクトリ構成を作って localhost を立てるとデバグやサムネイルの生成が楽です。自分は gist/<GitHub id>/raw/ に gist を clone しています。自分の今のディレクトリ構成はこんな感じ。

gist/
  └ osoken/
      └ raw/
         ├ 8fd61d9bf581691a794a/
         |   ├ data.json
         |   ├ index.html
         |   ├ readme.md
         |   └ thumbnail.png
         ├ 9e5ec69346e972c54884/
         |   └ ...
         └ ...

そしてgistディレクトリが/になるようにlocalhostを立てています。

[osoken@somewhere gist]$ python -m SimpleHTTPServer

こうしておくと、他の gist のリソースのURLがblocks上でのURL, /<GitHub id>/raw/<gist id>/<リソース名> と一致します。例えば 8fd61d9bf581691a794a で使ったdata.jsonを他のgistでも使いたいときは /osoken/raw/8fd61d9bf581691a794a/data.json で利用できる、という感じです。

サムネイルの生成

phantomjsコマンド が便利です。Web ページのスクリーンショットを撮ってくれる rasterize.js というスクリプトが同梱されているので、それを使って960px*500pxで作ってからimagemagickのmogrifyコマンドで230px*120pxに縮小しています。

[osoken@somewhere gist]$ phantomjs rasterize.js http://localhost:8000/osoken/raw/8fd61d9bf581691a794a/ osoken/raw/8fd61d9bf581691a794a/thumbail.png  960px*500px
[osoken@somewhere gist]$ mogrify -resize 230x120 osoken/raw/8fd61d9bf581691a794a/thumbnail.png