ビジュアライズ忘年会（C3.jsで大きな文字を表示してみた）

弊社では、今年の忘年会でビンゴゲームを行いました:tada:

通常ルールの個人戦だけでは当たった人が飽きてしまうので、その対策としてチーム戦を導入することにしました。

ひとつ困ったことが。
集計したチーム戦の結果をどう発表するか！？

手書きの画用紙やパワーポイントも検討しましたが、**見やすさ**と**運営の手軽さ**を追求した結果、Webページでグラフを描画する方法を取りました。

結果発表でスクリーンに映したWebページには、ビジュアル分析ツール「[loghouse](https://log-house.jp/)」で活用している**C3.js**を使いました。

#作ったもの
![94f82885-623b-4dd4-fbf4-143242d8c7cf.png](https://qiita-image-store.s3.amazonaws.com/0/119568/553f0b89-6bb4-903e-4fe3-149d1d2296c9.png)
※数字は適当です

```html:bingo.html
<div id="chart"></div>
```

```css:bingo.css
.c3 svg {
	font-size: 26px;
}
.c3-text {
	font-size: 55px;
}
.c3-axis-x {
    font-size: 80px;
}
```

```js:bingo-C3.js
var chart = c3.generate({
    bindto: '#chart',
    size: {
        height: 600
    },
    padding: {
  		bottom: 100
	},
    data: {
    	x : 'x',
        columns: [
            ['x', 'A', 'B', 'C', 'D', 'E', 'F'],
            ['data1', 200, 280, 300, 320, 260, 250]
        ],
        type: 'bar',
        labels: true,
         colors: {
            data1: function(d) {
            	var color = '#000000';
            	switch (d.index){
            		case 0:
            		    color = 'rgb(255, 40, 0)';
            		    break;
            		case 1:
	            		color = 'rgb(0, 65, 255)';
	            		break;
            		case 2:
	            		color = 'rgb(250, 153, 0)';
	            		break;
	            	case 3:
	            		color = 'rgb(53, 161, 107)';
	            		break;
	            	case 4:
	            		color = 'rgb(255 ,153 ,160)';
	            		break;
	            	case 5:
	            		color = 'rgb(102, 51, 0)';
	            		break;
            	} 
                return  color;
            }
        }
    },
    legend: {
       show: false
    },
    axis: {
        x: {
            type: 'category'
        }
    }
});
```
# C3.jsとは？
C3.jsは、**チャートに特化した**JavaScriptビジュアライゼーションライブラリで、ウェブブラウザで動的コンテンツを描画する**可視化**ライブラリD3.jsのラッパーライブラリです。

# セットアップ

## ダウンロード
C3　https://github.com/c3js/c3/releases/latest
D3　https://github.com/d3/d3/releases?after=v4.0.0

C3はD3がv4だと動かないので、**D3はv3を選択しましょう**。

## ヘッダーに追加

```html:bingo.html
<!-- Load c3.css -->
<link href="/path/to/c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>
```

# 基本形
```html:bingo.html
<div id="chart"></div>
```

```js:bingo-C3.js
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 200, 280, 300, 320, 260, 250]
        ],
        type: 'bar'
    }
});
```

<img width="1078" alt="4dc2536a-4192-9e83-9785-7387ee2147e4.png" src="https://qiita-image-store.s3.amazonaws.com/0/119568/bd73462e-2d63-1776-7626-03db48d27124.png">

6個の棒グラフが並んでいるグラフができました。
このグラフに対して次の効果を追加していきます。

- X軸の凡例を非表示にする
- チーム名を付ける
- チーム名ごとに棒グラフの色を変える
- チーム名の文字サイズを大きくする
- 得点の文字サイズを大きくする
- 棒グラフの上に得点を表示する
- 棒グラフの上に表示した得点の文字サイズを大きくする

# 効果を追加する

## X軸の凡例を非表示にする
```js:bingo-C3.js
legend: {
   show: false
}
```

## チーム名を付ける
```js:bingo-C3.js
data: {
	x : 'x',
    columns: [
        ['x', 'A', 'B', 'C', 'D', 'E', 'F'],
    ],
},
axis: {
    x: {
        type: 'category'
    }
}
```

## チーム名ごとに棒グラフの色を変える
```js:bingo-C3.js
data: {
     colors: {
        data1: function(d) {
        	var color = '#000000';
        	switch (d.index){
        		case 0:
        		    color = 'rgb(255, 40, 0)';
        		    break;
        		case 1:
            		color = 'rgb(0, 65, 255)';
            		break;
        		case 2:
            		color = 'rgb(250, 153, 0)';
            		break;
            	case 3:
            		color = 'rgb(53, 161, 107)';
            		break;
            	case 4:
            		color = 'rgb(255 ,153 ,160)';
            		break;
            	case 5:
            		color = 'rgb(102, 51, 0)';
            		break;
        	} 
            return  color;
        }
    }
}
```

## 棒グラフの上に得点を表示する
```js:bingo-C3.js
data: {
    labels: true
}
```

## 得点の文字サイズを大きくする
```css:bingo.css
.c3 svg{
	font-size: 26px;
}
```
これですべての文字に対して文字サイズが大きくなりますが、さらに大きくしたい箇所があるので別途指定します。

## 棒グラフの上に表示した得点の文字サイズを大きくする
```css:bingo.css
.c3-text {
	font-size: 55px;
}
```

## チーム名の文字サイズを大きくする
```css:bingo.css
.c3-axis-x {
    font-size: 80px;
}
```

# チーム名が切れないようにSVGを調整
![515b30ef-dcb8-b012-6397-e18883e3e3e8.png](https://qiita-image-store.s3.amazonaws.com/0/119568/8d4fcedd-d3b7-f176-f9b8-76fd5bbc0dad.png)


文字サイズが大きいため、X軸の値が切れてしまいました。
SVGのpaddingを指定します。

```js:bingo-C3.js
padding: {
    bottom: 100
}
```

これで完成です:relaxed: