ちょっと面白いスクリプト！グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz
Post on:2019年12月18日
sponsors
手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。
グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。
roughViz.jsの特徴
roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。
グラフやチャートは、現在7種類に対応しています。
- 棒グラフ（垂直）
- 棒グラフ（水平）
- ドーナツ
- 折れ線グラフ
- 円グラフ
- 散布図
- 垂直積み上げ棒グラフ
roughViz.jsで用意されているスタイル
スタイルも豊富で、手描きのラフさ、線のスタイル、線の密度を調整できます。
roughViz.jsのデモ
roughViz.jsで作成したグラフやチャートは、デモページで楽しめます。スタイルも値を変更すると、反映されます。
roughViz.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部として記述します。
|
1 |
<script src="https://unpkg.com/rough-viz@1.0.5"></script> |
npmでも利用できます。
|
1 |
npm install rough-viz |
Step 2: HTML
1つのグラフごとに1つのコンテナを用意します。
2つのグラフを設置する場合は、2つコンテナを用意します。
|
1 2 |
<div id="viz0"></div> <div id="viz1"></div> |
Step 3: JavaScript
JavaScriptで目的のコンテナを参照して、グラフを定義します。グラフの値は、外部.csvファイルでも、カンマ区切りのテキストでも対応しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 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, } ); |
sponsors
