正確に書かれた図は見やすいものですが、かしこまった雰囲気が出てしまいます。モックアップのレベルであまり正確なものを作るとデザイン上の些細な部分にこだわりはじめてしまうのでお勧めできません。 そこで使ってみたいのがroughVizです。手で書いたような乱雑なグラフが描けるライブラリです。

roughVizの使い方

棒グラフ。

マウスオーバーで値を表示する機能もあります。

横棒グラフ。

ドーナツグラフ。

折れ線グラフ。

円グラフ。左側の円グラフはほとんど内容が分かりません。

散布図。

ラフさのレベルを上げるとこんな感じになります。

roughVizは多くのグラフに対応しつつ、その描画を乱雑に行います。乱雑さのレベルを上げると、もはや何のグラフかも分からなくなるでしょう。モックアップのデザインに埋め込むと面白そうです。

roughVizはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

jwilber/roughViz: Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.