Recommended
More Related Content
Similar to 今日から始めるC3.js
Similar to 今日から始めるC3.js (20)
Recently uploaded
Recently uploaded (9)
今日から始めるC3.js
- 2. @wn_seko • Wataru Nakaseko • ピコもん株式会社 WebApp Engineer • Javascriptでフロントエンド、バックエンド、バッチ、 業務ツ ールの開発などをしてる • 機械学習やセマンテックの研究のためにPythonを触り始めた • 休日はボードゲームとか音ゲーとか、最近はX-WINGのゲーム にハマってる
- 3. ピコもん株式会社
- 7. 導入経緯
- 8. すべてはD3から始まった
- 13. D3.jsを使用して起きた問題点 • 単純な折れ線グラフや棒グラフの作成にしては記述 量が多い • そもそも折れ線と棒グラフくらいしか使わないのに D3.jsはオーバースペック • コピペが横行してバグ発生の原因になった • コードの見通しを良くするためにWrapperが欲しい
- 16. What’s C3.js
- 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. 学習コストが低い
- 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
- 51. Bar 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で提供されていないと辛い • ドキュメントから機能を逆引きし辛い • ドキュメントに機能についての説明が無い
- 67. - FIN -