Download to read offline
今日から始めるC3.js
- 1.
- 2. @wn_seko • Wataru Nakaseko •ピコもん株式会社 WebApp Engineer • Javascriptでフロントエンド、バックエンド、バッチ、 業務ツ ールの開発などをしてる • 機械学習やセマンテックの研究のためにPythonを触り始めた • 休日はボードゲームとか音ゲーとか、最近はX-WINGのゲーム にハマってる
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 13. D3.jsを使用して起きた問題点 • 単純な折れ線グラフや棒グラフの作成にしては記述 量が多い • そもそも折れ線と棒グラフくらいしか使わないのに D3.jsはオーバースペック •コピペが横行してバグ発生の原因になった • コードの見通しを良くするためにWrapperが欲しい
- 14.
- 15.
- 16.
- 17.
- 18. What’s C3.js • チャート作成に特化したビジュアライゼーションラ イブラリ •D3.jsをベースにチャート描画に必要なコードをラッ プしている • 依存モジュールはD3.jsとjQueryのみ • APIを通じてグラフの書き換えや操作ができる
- 19. What’s C3.js 依存モジュール D3.js, jQuery 動作環境 HTML5が動くデバイス（IEは9以上） AndroidchromeやiOS safariでも動作する
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. インタラクティブなUI • 設定なしで凡例・ツールチップを出せる • 凡例はマウスオーバーでグラフの強調、クリッ クでグラフの表示切り替えができる •グラフをマウスオーバーするとツールチップが でてくる • これらの機能はオン・オフや拡張が可能
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. Graphes • Line Chart •Bar Chart • Pie Chart • Scatter Prot
- 41.
- 42. Data • X軸には数値、日付、カテゴリを使用できる • ヘッダ付きCSV,JSONを読み込み可能 • URLを指定するとリモートのCSVまたはJSON ファイルを取得してグラフ描画する • ローカルのファイルの読み込みには工夫がい る
- 43. ローカルファイルの読み込み方 CORSの関係上Ajaxではfile://で始まるURLを読み込む ことができない • DropboxやAmazon S3などのクラウドサービスにア ップロードする •サーバーをたてる • HTML5のFile APIを利用する
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63. C3を導入して良かった点 • 実装時間が大幅に短縮された • ソースコードの保守性が上がった •グラフ作成タスクへの抵抗感がなくなった • グラフごとの個別実装がなくなりUIが統一さ れた
- 64. C3で困った点 • やりたいことがAPIで提供されていないと辛い • ドキュメントから機能を逆引きし辛い •ドキュメントに機能についての説明が無い
- 65.
- 66.
- 67.