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

参照元  コリス

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

参照URL  https://coliss.com/articles/build-websites/operation/javascript/javascript-library-for-hand-drawn-styled-charts.html

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

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

roughViz.js -GitHub

roughViz.jsの特徴

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

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

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

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

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

roughViz.jsのデモ

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

デモ: 棒グラフ(垂直)

デモ: 棒グラフ(水平)

デモ: ドーナツ

デモ: 折れ線グラフ

デモ: 円グラフ

デモ: 散布図

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

roughViz.jsの使い方

Step 1: 外部ファイル

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

<script src=“https://ift.tt/38LACXj”></script>

npmでも利用できます。

Step 2: HTML

1つのグラフごとに1つのコンテナを用意します。
2つのグラフを設置する場合は、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://ift.tt/2ttOZiY’,

    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,

  }

);

@memo

webデザイン

https://ift.tt/2EvypkR

December 18, 2019 at 09:28AM

Follow me!