Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
今日から始めるC3.js
WACODE 4th
@nw_seko
@wn_seko
• Wataru Nakaseko
• ピコもん株式会社 WebApp Engineer
• Javascriptでフロントエンド、バックエンド、バッチ、 業務ツ
ールの開発などをしてる
• 機械学習やセマンテックの研究のため...
ピコもん株式会社
ピコもん株式会社
Webサイトの案内人として、ピコもん導入サイ
ト上でキャラクターを動かし、訪問ユーザとコ
ミュニケーションを取りながらユーザが求めて
いる情報へと誘導するサービスを提供している
http://www.picomon.jp
ピコもん株式会社
トークスクリプト
アクセスログ
バッチ処理
DB
Big Query
解析データ
ピコもん株式会社
解析ページ全般でC3.jsを導入している
導入経緯
すべてはD3から始まった
• https://d3js.org/
• データドリブンなビジュアライゼーションラ
イブラリ
こんな感じのかっこいい
折れ線グラフが作れる!!
D3.jsを使用して起きた問題点
• 単純な折れ線グラフや棒グラフの作成にしては記述
量が多い
• そもそも折れ線と棒グラフくらいしか使わないのに
D3.jsはオーバースペック
• コピペが横行してバグ発生の原因になった
• コードの見通しを良...
D3.jsの代替品を探す
• 学習や実装にコストがかからないライブラリ
• 既存のグラフと共存させるためにD3のグラフ
とデザインやUIがかけ離れないこと
D3.jsの代替品を探す
• 学習や実装にコストがかからないライブラリ
• 既存のグラフと共存させるためにD3のグラフ
とデザインやUIがかけ離れないこと
C3.jsというものがあるらしい…
What’s C3.js
What’s C3.js
http://c3js.org
What’s C3.js
• チャート作成に特化したビジュアライゼーションラ
イブラリ
• D3.jsをベースにチャート描画に必要なコードをラッ
プしている
• 依存モジュールはD3.jsとjQueryのみ
• APIを通じてグラフの書き換えや...
What’s C3.js
依存モジュール
D3.js, jQuery
動作環境
HTML5が動くデバイス(IEは9以上)
Android chromeやiOS safariでも動作する
Feature
Feature
• 学習コストが低い
• インタラクティブなUI
• 動かせるサンプル
学習コストが低い
学習コストが低い
学習コストが低い
学習コストが低い
学習コストが低い
学習コストが低い
学習コストが低い
• 10行程度でグラフが書ける
• 必要なプロパティをConfigとして扱える
インタラクティブなUI
インタラクティブなUI
インタラクティブなUI
インタラクティブなUI
インタラクティブなUI
インタラクティブなUI
• 設定なしで凡例・ツールチップを出せる
• 凡例はマウスオーバーでグラフの強調、クリッ
クでグラフの表示切り替えができる
• グラフをマウスオーバーするとツールチップが
でてくる
• これらの機能はオン・オフや拡張が可能
動かせるサンプル
動かせるサンプル
動かせるサンプル
動かせるサンプル
Graphes
Graphes
• Line Chart
• Bar Chart
• Pie Chart
• Scatter Prot
Data
Data
• X軸には数値、日付、カテゴリを使用できる
• ヘッダ付きCSV, JSONを読み込み可能
• URLを指定するとリモートのCSVまたはJSON
ファイルを取得してグラフ描画する
• ローカルのファイルの読み込みには工夫がい
る
ローカルファイルの読み込み方
CORSの関係上Ajaxではfile://で始まるURLを読み込む
ことができない
• DropboxやAmazon S3などのクラウドサービスにア
ップロードする
• サーバーをたてる
• HTML5のFile ...
Examples
Line Chart
Spline Chart
Step Chart
Area Chart
Area Chart (Spline)
Area Chart (step)
Bar Chart
Stacked Bar Chart
Bar Chart (rotated)
Combination Chart
Pie Chart
Donut Chart
Gauge Chart
Gauge Chart
Gauge Chart
Gauge Chart
Scatter Plot
雑感・まとめ
C3を導入して良かった点
• 実装時間が大幅に短縮された
• ソースコードの保守性が上がった
• グラフ作成タスクへの抵抗感がなくなった
• グラフごとの個別実装がなくなりUIが統一さ
れた
C3で困った点
• やりたいことがAPIで提供されていないと辛い
• ドキュメントから機能を逆引きし辛い
• ドキュメントに機能についての説明が無い
まとめ
• C3.jsを使用すると学習コストをかけずにグラ
フの作成ができる
• 作成したグラフをインタラクティブに触るこ
とができる
たまには息抜きにJavascript
でもいかがでしょうか?
- FIN -
今日から始めるC3.js
今日から始めるC3.js
Upcoming SlideShare
Loading in …5
×

今日から始めるC3.js

3,156 views

Published on

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

Published in: Technology
  • Be the first to comment

今日から始めるC3.js

  1. 1. 今日から始めるC3.js WACODE 4th @nw_seko
  2. 2. @wn_seko • Wataru Nakaseko • ピコもん株式会社 WebApp Engineer • Javascriptでフロントエンド、バックエンド、バッチ、 業務ツ ールの開発などをしてる • 機械学習やセマンテックの研究のためにPythonを触り始めた • 休日はボードゲームとか音ゲーとか、最近はX-WINGのゲーム にハマってる
  3. 3. ピコもん株式会社
  4. 4. ピコもん株式会社 Webサイトの案内人として、ピコもん導入サイ ト上でキャラクターを動かし、訪問ユーザとコ ミュニケーションを取りながらユーザが求めて いる情報へと誘導するサービスを提供している http://www.picomon.jp
  5. 5. ピコもん株式会社 トークスクリプト アクセスログ バッチ処理 DB Big Query 解析データ
  6. 6. ピコもん株式会社 解析ページ全般でC3.jsを導入している
  7. 7. 導入経緯
  8. 8. すべてはD3から始まった
  9. 9. • https://d3js.org/ • データドリブンなビジュアライゼーションラ イブラリ
  10. 10. こんな感じのかっこいい 折れ線グラフが作れる!!
  11. 11. D3.jsを使用して起きた問題点 • 単純な折れ線グラフや棒グラフの作成にしては記述 量が多い • そもそも折れ線と棒グラフくらいしか使わないのに D3.jsはオーバースペック • コピペが横行してバグ発生の原因になった • コードの見通しを良くするためにWrapperが欲しい
  12. 12. D3.jsの代替品を探す • 学習や実装にコストがかからないライブラリ • 既存のグラフと共存させるためにD3のグラフ とデザインやUIがかけ離れないこと
  13. 13. D3.jsの代替品を探す • 学習や実装にコストがかからないライブラリ • 既存のグラフと共存させるためにD3のグラフ とデザインやUIがかけ離れないこと C3.jsというものがあるらしい…
  14. 14. What’s C3.js
  15. 15. What’s C3.js http://c3js.org
  16. 16. What’s C3.js • チャート作成に特化したビジュアライゼーションラ イブラリ • D3.jsをベースにチャート描画に必要なコードをラッ プしている • 依存モジュールはD3.jsとjQueryのみ • APIを通じてグラフの書き換えや操作ができる
  17. 17. What’s C3.js 依存モジュール D3.js, jQuery 動作環境 HTML5が動くデバイス(IEは9以上) Android chromeやiOS safariでも動作する
  18. 18. Feature
  19. 19. Feature • 学習コストが低い • インタラクティブなUI • 動かせるサンプル
  20. 20. 学習コストが低い
  21. 21. 学習コストが低い
  22. 22. 学習コストが低い
  23. 23. 学習コストが低い
  24. 24. 学習コストが低い
  25. 25. 学習コストが低い
  26. 26. 学習コストが低い • 10行程度でグラフが書ける • 必要なプロパティをConfigとして扱える
  27. 27. インタラクティブなUI
  28. 28. インタラクティブなUI
  29. 29. インタラクティブなUI
  30. 30. インタラクティブなUI
  31. 31. インタラクティブなUI
  32. 32. インタラクティブなUI • 設定なしで凡例・ツールチップを出せる • 凡例はマウスオーバーでグラフの強調、クリッ クでグラフの表示切り替えができる • グラフをマウスオーバーするとツールチップが でてくる • これらの機能はオン・オフや拡張が可能
  33. 33. 動かせるサンプル
  34. 34. 動かせるサンプル
  35. 35. 動かせるサンプル
  36. 36. 動かせるサンプル
  37. 37. Graphes
  38. 38. Graphes • Line Chart • Bar Chart • Pie Chart • Scatter Prot
  39. 39. Data
  40. 40. Data • X軸には数値、日付、カテゴリを使用できる • ヘッダ付きCSV, JSONを読み込み可能 • URLを指定するとリモートのCSVまたはJSON ファイルを取得してグラフ描画する • ローカルのファイルの読み込みには工夫がい る
  41. 41. ローカルファイルの読み込み方 CORSの関係上Ajaxではfile://で始まるURLを読み込む ことができない • DropboxやAmazon S3などのクラウドサービスにア ップロードする • サーバーをたてる • HTML5のFile APIを利用する
  42. 42. Examples
  43. 43. Line Chart
  44. 44. Spline Chart
  45. 45. Step Chart
  46. 46. Area Chart
  47. 47. Area Chart (Spline)
  48. 48. Area Chart (step)
  49. 49. Bar Chart
  50. 50. Stacked Bar Chart
  51. 51. Bar Chart (rotated)
  52. 52. Combination Chart
  53. 53. Pie Chart
  54. 54. Donut Chart
  55. 55. Gauge Chart
  56. 56. Gauge Chart
  57. 57. Gauge Chart
  58. 58. Gauge Chart
  59. 59. Scatter Plot
  60. 60. 雑感・まとめ
  61. 61. C3を導入して良かった点 • 実装時間が大幅に短縮された • ソースコードの保守性が上がった • グラフ作成タスクへの抵抗感がなくなった • グラフごとの個別実装がなくなりUIが統一さ れた
  62. 62. C3で困った点 • やりたいことがAPIで提供されていないと辛い • ドキュメントから機能を逆引きし辛い • ドキュメントに機能についての説明が無い
  63. 63. まとめ • C3.jsを使用すると学習コストをかけずにグラ フの作成ができる • 作成したグラフをインタラクティブに触るこ とができる
  64. 64. たまには息抜きにJavascript でもいかがでしょうか?
  65. 65. - FIN -

×