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

サイト構築 -JavaScript

Post on:2019年12月18日

roughViz.jsの特徴

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

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

棒グラフ（垂直）
棒グラフ（水平）
ドーナツ
折れ線グラフ
円グラフ
散布図
垂直積み上げ棒グラフ

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

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

roughViz.jsのデモ

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

roughViz.jsの使い方

Step 1: 外部ファイル

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

<script src="https://unpkg.com/rough-viz@1.0.5"></script>

1	<script src="https://unpkg.com/rough-viz@1.0.5"></script>

npmでも利用できます。

npm install rough-viz

1	npm install rough-viz

Step 2: HTML

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

<div id="viz0"></div>
<div id="viz1"></div>

1 2	<div id="viz0"></div> <div id="viz1"></div>

Step 3: JavaScript

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

// csvファイルから棒グラフを作成
 new roughViz.Bar({
    element: '#vis0', // container selection
    data: 'https://raw.githubusercontent.com/jwilber/random_data/master/flavors.csv',
    labels: 'flavor',
    values: 'price'
});

// データを使用してドーナツチャートを作成
new roughViz.Donut(
  {
    element: '#vis1',
    data: {
      labels: ['North', 'South', 'East', 'West'],
      values: [10, 5, 8, 3]
    },
    title: "Regions",
    width: window.innerWidth / 4,
    roughness: 8,
    colors: ['red', 'orange', 'blue', 'skyblue'],
    stroke: 'black',
    strokeWidth: 3,
    fillStyle: 'cross-hatch',
    fillWeight: 3.5,
  }
);