トップ > 手書き風グラフを描いてくれるJavaScriptライブラリroughViz.js

手書き風グラフを描いてくれるJavaScriptライブラリroughViz.js

手書き風グラフを描いてくれるJavaScriptライブラリroughViz.js@1.0.6の備忘録です。

Note1

線グラフでX軸の項目は、
xに文字列なり数値なりを配列で指定することで設定可能なようです。
後述のSampleでは線グラフのX軸の項目に数値を表示させています。

Note2

各種グラフのX軸とY軸の項目のフォーマットは、
xValueFormatとyValueFormatに文字列で指定することで設定可能なようです。
指定する文字列はd3.formatのフォーマットのようです。
後述のSampleでは棒グラフのY軸と線グラフのY軸の項目に、
','を指定して数値を3桁のカンマ区切りにしています。

Note3

後述のSampleとResultの配色ははてなブログのテーマの影響です。

Link:roughViz

https://github.com/jwilber/roughViz
https://www.webopixel.net/javascript/1576.html
https://www.webcreatorbox.com/tech/hand-drawing-library

Link:d3-format

https://github.com/d3/d3-format
https://observablehq.com/@harada32/d3-format
https://qiita.com/tkosuga@github/items/ec3a36d5bcd26c822304

Sample:Bar

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="vis1"></div>
</body>
<script src="https://unpkg.com/rough-viz@1.0.6"></script>
<script type="text/javascript">
new roughViz.Bar({
    element: '#vis1',
    data: {
        labels: ['Apple', 'Banana', 'Grape', 'Lemon', 'Orange', 'Peach'],
        values: [3500, 4300, 1600, 800, 3200, 1800],
    },
    width:   800,
    height:  800,
    stroke: '#666',
    strokeWidth: 2,
    color: '#4FBAFA',
    fillWeight: 1,
    padding: .3,
    roughness: 6,
    axisFontSize:  '2rem',
    labelFontSize: '2rem',
    xLabel: 'FRUITS',
    yLabel: 'YEN',
  //xValueFormat: ',',
    yValueFormat: ',',
    margin: {top: 50, left: 200, right: 20, bottom: 250},
});
</script>
</html>

Sample:Donut

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="vis2"></div>
</body>
<script src="https://unpkg.com/rough-viz@1.0.6"></script>
<script type="text/javascript">
new roughViz.Donut({
    element: '#vis2',
    data: {
        labels: ['Apple', 'Banana', 'Grape', 'Lemon', 'Orange', 'Peach'],
        values: [3500, 4300, 1600, 800, 3200, 1800],
    },
    width:   800,
    height:  800,
    roughness: 2,
    margin: {top: 100, left: 100, right: 100, bottom: 100},
});
</script>
</html>

Sample:Line

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="vis3"></div>
</body>
<script src="https://unpkg.com/rough-viz@1.0.6"></script>
<script type="text/javascript">
new roughViz.Line({
    element: '#vis3',
    data: {
        Apple:  [1500, 1200,  800],
        Banana: [1200, 1800, 1300],
        Grape:  [ 300,  600,  700],
        Lemon:  [ 200,  400,  200],
        Orange: [1300, 1000,  900],
        Peach:  [ 600,  600,  600],
    },
    x: [2022.04, 2022.05, 2022.06],
    width:   800,
    height:  800,
    strokeWidth: 2,
    roughness: 1,
    axisFontSize:  '2rem',
    labelFontSize: '2rem',
    xLabel: 'YEAR.MONTH',
    yLabel: 'YEN',
  //xValueFormat: ',',
    yValueFormat: ',',
    margin: {top: 50, left: 300, right: 20, bottom: 200},
});
</script>
</html>

Sample-Result:Bar

Sample-Result:Donut

Sample-Result:Line