D3のラッパーライブラリであるC3.jsの紹介

1. 今日から始めるC3.js
WACODE 4th
@nw_seko

2. @wn_seko
• Wataru Nakaseko
• ピコもん株式会社 WebApp Engineer
• Javascriptでフロントエンド、バックエンド、バッチ、 業務ツ
ールの開発などをしてる
• 機械学習やセマンテックの研究のためにPythonを触り始めた
• 休日はボードゲームとか音ゲーとか、最近はX-WINGのゲーム
にハマってる

3. ピコもん株式会社

4. ピコもん株式会社
Webサイトの案内人として、ピコもん導入サイ
ト上でキャラクターを動かし、訪問ユーザとコ
ミュニケーションを取りながらユーザが求めて
いる情報へと誘導するサービスを提供している
http://www.picomon.jp

5. ピコもん株式会社
トークスクリプト
アクセスログ
バッチ処理
DB
Big Query
解析データ

6. ピコもん株式会社
解析ページ全般でC3.jsを導入している

7. 導入経緯

8. すべてはD3から始まった

9. • https://d3js.org/
• データドリブンなビジュアライゼーションラ
イブラリ

10. こんな感じのかっこいい
折れ線グラフが作れる！！

13. D3.jsを使用して起きた問題点
• 単純な折れ線グラフや棒グラフの作成にしては記述
量が多い
• そもそも折れ線と棒グラフくらいしか使わないのに
D3.jsはオーバースペック
• コピペが横行してバグ発生の原因になった
• コードの見通しを良くするためにWrapperが欲しい

14. D3.jsの代替品を探す
• 学習や実装にコストがかからないライブラリ
• 既存のグラフと共存させるためにD3のグラフ
とデザインやUIがかけ離れないこと

15. D3.jsの代替品を探す
• 学習や実装にコストがかからないライブラリ
• 既存のグラフと共存させるためにD3のグラフ
とデザインやUIがかけ離れないこと
C3.jsというものがあるらしい…

16. What’s C3.js

17. What’s C3.js
http://c3js.org

18. What’s C3.js
• チャート作成に特化したビジュアライゼーションラ
イブラリ
• D3.jsをベースにチャート描画に必要なコードをラッ
プしている
• 依存モジュールはD3.jsとjQueryのみ
• APIを通じてグラフの書き換えや操作ができる

19. What’s C3.js
依存モジュール
D3.js, jQuery
動作環境
HTML5が動くデバイス（IEは9以上）
Android chromeやiOS safariでも動作する

20. Feature

21. Feature
• 学習コストが低い
• インタラクティブなUI
• 動かせるサンプル

22. 学習コストが低い

23. 学習コストが低い

24. 学習コストが低い

25. 学習コストが低い

26. 学習コストが低い

27. 学習コストが低い

28. 学習コストが低い
• 10行程度でグラフが書ける
• 必要なプロパティをConfigとして扱える

29. インタラクティブなUI

30. インタラクティブなUI

31. インタラクティブなUI

32. インタラクティブなUI

33. インタラクティブなUI

34. インタラクティブなUI
• 設定なしで凡例・ツールチップを出せる
• 凡例はマウスオーバーでグラフの強調、クリッ
クでグラフの表示切り替えができる
• グラフをマウスオーバーするとツールチップが
でてくる
• これらの機能はオン・オフや拡張が可能

35. 動かせるサンプル

36. 動かせるサンプル

37. 動かせるサンプル

38. 動かせるサンプル

39. Graphes

40. Graphes
• Line Chart
• Bar Chart
• Pie Chart
• Scatter Prot

41. Data

42. Data
• X軸には数値、日付、カテゴリを使用できる
• ヘッダ付きCSV, JSONを読み込み可能
• URLを指定するとリモートのCSVまたはJSON
ファイルを取得してグラフ描画する
• ローカルのファイルの読み込みには工夫がい
る

43. ローカルファイルの読み込み方
CORSの関係上Ajaxではfile://で始まるURLを読み込む
ことができない
• DropboxやAmazon S3などのクラウドサービスにア
ップロードする
• サーバーをたてる
• HTML5のFile APIを利用する

44. Examples

45. Line Chart

46. Spline Chart

47. Step Chart

48. Area Chart

49. Area Chart (Spline)

50. Area Chart (step)

51. Bar Chart

52. Stacked Bar Chart

53. Bar Chart (rotated)

54. Combination Chart

55. Pie Chart

56. Donut Chart

57. Gauge Chart

58. Gauge Chart

59. Gauge Chart

60. Gauge Chart

61. Scatter Plot

62. 雑感・まとめ

63. C3を導入して良かった点
• 実装時間が大幅に短縮された
• ソースコードの保守性が上がった
• グラフ作成タスクへの抵抗感がなくなった
• グラフごとの個別実装がなくなりUIが統一さ
れた

64. C3で困った点
• やりたいことがAPIで提供されていないと辛い
• ドキュメントから機能を逆引きし辛い
• ドキュメントに機能についての説明が無い

65. まとめ
• C3.jsを使用すると学習コストをかけずにグラ
フの作成ができる
• 作成したグラフをインタラクティブに触るこ
とができる

66. たまには息抜きにJavascript
でもいかがでしょうか？

67. - FIN -