具体例で学ぶ!情報可視化のテクニック

第6回 はてなブックマークの可視化(後編)

この記事を読むのに必要な時間:およそ 5 分

「実用系ブックマーク」「議論系ブックマーク」の色分け

はてなブックマークは,純粋にページを記録する目的に基づく「実用系ブックマーク」と,ページの内容についてユーザーが意見を述べ合うことを目的とした「議論系ブックマーク」の2つの側面を持っています。一般に,ブックマークエントリーのコメント率(コメントを記入しているユーザーの割合)が高いほど,⁠議論系ブックマーク」の傾向が強くなります。

ツリーマップ上で,この「実用系」または「議論系」の度合いを可視化することを考えましょう。ブックマークエントリーのコメント率に応じて,ツリーマップ領域の色合いを変化させます。今回は,コメント率が低いほど緑色,高いほど赤色に近い色で領域を描画するようにしてみます。こうすることで,緑色の領域は「実用系⁠⁠,赤色の領域は「議論系」のエントリーと視覚的に判断できるようになります図2⁠。

図2

図2

コメント率を求めるため,前回作成したBookmarkDetailクラスとHatenaBookmarkAPIクラスに以下の追加を行い,コメント情報を取得できるようにします。

リスト3 BookmarkDetail.java

public class BookmarkDetail {
    public int bookmarkCount;
    public List tags;
    public List comments;  // コメントの一覧
}

リスト4 HatenaBookmarkAPI.java(部分)

public class HatenaBookmarkAPI {
    public BookmarkDetail getDetail(String url) {
        ...
        detail.comments = new ArrayList();
        ...
        for (int i = 0; i < bookmarks.size(); i++) {
            JSONObject item = bookmarks.getJSONObject(i);
            JSONArray tags = item.getJSONArray("tags");
            for (int j = 0; j < tags.size(); j++) {
                detail.tags.add(tags.getString(j));
            }
            // 以下,追加分
            String comment = item.getString("comment");
            if (comment != null && comment.length() > 0) {
                detail.comments.add(comment);
            }
        }
        ...
    }
}

さらに,第4回で作成したBinaryTreeMapRendererクラスを以下のように修正します。コメント率に応じて,緑から赤までのグラデーションの中から色を決定し,ノード領域を塗りつぶすようにしています。なお,BinaryTreeMapRendererクラスには,ブックマークタイトルの描画など,他にも変更点があります。完全なソースコードはこちらをご覧ください。

リスト5 BinaryTreeMapRenderer.java(部分)

public class BinaryTreeMapRenderer implements TreeMapRenderer {
    ...

    private void doRender(Graphics2D g, Node node, Rectangle2D bounds, int depth) {
        if (node instanceof BookmarkItem) {
            BookmarkItem item = (BookmarkItem) node;
            g.setPaint(bookmarkToColor(item));
            g.fill(bounds);
        }
        ...
    }

    private Color bookmarkToColor(BookmarkItem item) {
        BookmarkDetail detail = item.getDetail();
        // コメント率を計算
        float commentRate = (float) detail.comments.size()
                / (float) detail.bookmarkCount;
        // 補正をかける
        commentRate = Math.min(2f * commentRate, 1f);
        // コメント率からRGB要素を決定
        float red = 0.2f + 0.4f * commentRate;
        float green = 0.2f + 0.4f * (1f - commentRate);
        float blue = 0.2f;
        return new Color(red, green, blue);
    }

    ...
}

著者プロフィール

浜本階生(はまもとかいせい)

1981年生まれ。栃木県出身。東京工業大学情報工学科卒業。技術やアイデアの組み合わせから面白いソフトウェアを生み出したいと日々考えている。現在,ブログの解析および視覚化の試みとして「TopHatenar」「Blogopolis」を開発,運用中。

URLhttp://d.hatena.ne.jp/kaiseh/