ちょっと面白いスクリプト!グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz

手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。

グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。

サイトのキャプチャ

roughViz.js -GitHub

roughViz.jsの特徴

roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsrough.jsをベースにしており、MITライセンスで利用できます。

グラフやチャートは、現在7種類に対応しています。

  • 棒グラフ(垂直)
  • 棒グラフ(水平)
  • ドーナツ
  • 折れ線グラフ
  • 円グラフ
  • 散布図
  • 垂直積み上げ棒グラフ
roughViz.jsで用意されているスタイル

roughViz.jsで用意されているスタイル

スタイルも豊富で、手描きのラフさ、線のスタイル、線の密度を調整できます。

roughViz.jsのデモ

roughViz.jsで作成したグラフやチャートは、デモページで楽しめます。スタイルも値を変更すると、反映されます。

サイトのキャプチャ

デモ: 棒グラフ(垂直)

サイトのキャプチャ

デモ: 棒グラフ(水平)

サイトのキャプチャ

デモ: ドーナツ

サイトのキャプチャ

デモ: 折れ線グラフ

サイトのキャプチャ

デモ: 円グラフ

サイトのキャプチャ

デモ: 散布図

サイトのキャプチャ

デモ: 垂直積み上げ棒グラフ

roughViz.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部として記述します。

npmでも利用できます。

Step 2: HTML

1つのグラフごとに1つのコンテナを用意します。
2つのグラフを設置する場合は、2つコンテナを用意します。

Step 3: JavaScript

JavaScriptで目的のコンテナを参照して、グラフを定義します。グラフの値は、外部.csvファイルでも、カンマ区切りのテキストでも対応しています。

sponsors

top of page

©2020 coliss