Submit Search
Upload
今日から始めるC3.js
•
Download as PPTX, PDF
•
2 likes
•
4,610 views
W
Wataru Nakaseko
Follow
D3のラッパーライブラリであるC3.jsの紹介
Read less
Read more
Technology
Report
Share
Report
Share
1 of 67
Download now
Recommended
データセンターのエネルギーコントロールの仕組み
データセンターのエネルギーコントロールの仕組み
IIJ
老害について
老害について
Ken SASAKI
Live2Dライクなオープンソースソフトウェアの開発
Live2Dライクなオープンソースソフトウェアの開発
yuki540
【初心者向】ロジカルシンキングをゼロからはじめる
【初心者向】ロジカルシンキングをゼロからはじめる
Ryosuke Ishii
ソフトウェアパターン概論およびパターンを活用したアーキテクチャ設計
ソフトウェアパターン概論およびパターンを活用したアーキテクチャ設計
Hironori Washizaki
PFNのオンプレ計算機クラスタの取り組み_第55回情報科学若手の会
PFNのオンプレ計算機クラスタの取り組み_第55回情報科学若手の会
Preferred Networks
逆説のスタートアップ思考
逆説のスタートアップ思考
Takaaki Umada
IIJmio meeting 31 SIMフリースマホの昔と今
IIJmio meeting 31 SIMフリースマホの昔と今
techlog (Internet Initiative Japan Inc.)
Recommended
データセンターのエネルギーコントロールの仕組み
データセンターのエネルギーコントロールの仕組み
IIJ
老害について
老害について
Ken SASAKI
Live2Dライクなオープンソースソフトウェアの開発
Live2Dライクなオープンソースソフトウェアの開発
yuki540
【初心者向】ロジカルシンキングをゼロからはじめる
【初心者向】ロジカルシンキングをゼロからはじめる
Ryosuke Ishii
ソフトウェアパターン概論およびパターンを活用したアーキテクチャ設計
ソフトウェアパターン概論およびパターンを活用したアーキテクチャ設計
Hironori Washizaki
PFNのオンプレ計算機クラスタの取り組み_第55回情報科学若手の会
PFNのオンプレ計算機クラスタの取り組み_第55回情報科学若手の会
Preferred Networks
逆説のスタートアップ思考
逆説のスタートアップ思考
Takaaki Umada
IIJmio meeting 31 SIMフリースマホの昔と今
IIJmio meeting 31 SIMフリースマホの昔と今
techlog (Internet Initiative Japan Inc.)
LEANSTARTUPアンチパターン #devlove #leanstartup
LEANSTARTUPアンチパターン #devlove #leanstartup
Itsuki Kuroda
リクルートライフスタイルが考える、万人に使ってもらえる分析基盤の作り方
リクルートライフスタイルが考える、万人に使ってもらえる分析基盤の作り方
Yu Yamada
「クックパッドとZaimのグロースハックについて」
「クックパッドとZaimのグロースハックについて」
Kato Kyosuke
5分でわかる良いスライドのつくりかた
5分でわかる良いスライドのつくりかた
Koki Kaku
君にグロースハックはいらない
君にグロースハックはいらない
Takaaki Umada
Keycloak & midPoint の紹介
Keycloak & midPoint の紹介
Hiroyuki Wada
パスキーでリードする: NGINXとKeycloakによる効率的な認証・認可
パスキーでリードする: NGINXとKeycloakによる効率的な認証・認可
Hitachi, Ltd. OSS Solution Center.
リーンスタートアップにおける良い仮説、悪い仮説
リーンスタートアップにおける良い仮説、悪い仮説
Takaaki Umada
Design Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについて
Takaaki Umada
アクセンチュア株式会社採用案内 2022/03
アクセンチュア株式会社採用案内 2022/03
Accenture Japan
20130426 慶応大学での講義
20130426 慶応大学での講義
東証ソーシャルかぶコン
paizaのオンラインジャッジを支えるDockerとその周辺
paizaのオンラインジャッジを支えるDockerとその周辺
paiza
ベイジ流マネジメント術~デザイナーをマネジメントするための私たちの考え方と取り組み
ベイジ流マネジメント術~デザイナーをマネジメントするための私たちの考え方と取り組み
Tsutomu Sogitani
ゼロからはじめるプロダクトマネージャー生活
ゼロからはじめるプロダクトマネージャー生活
Takaaki Umada
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Yahoo!デベロッパーネットワーク
Node js 入門
Node js 入門
Satoshi Takami
KYC and identity on blockchain
KYC and identity on blockchain
mosa siru
Let's design MVP #devlove #leanstartup
Let's design MVP #devlove #leanstartup
Itsuki Kuroda
今なら間に合う分散型IDとEntra Verified ID
今なら間に合う分散型IDとEntra Verified ID
Naohiro Fujie
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
Masahito Zembutsu
HTML5から始まる技術革新
HTML5から始まる技術革新
Wakasa Masao
More Related Content
What's hot
LEANSTARTUPアンチパターン #devlove #leanstartup
LEANSTARTUPアンチパターン #devlove #leanstartup
Itsuki Kuroda
リクルートライフスタイルが考える、万人に使ってもらえる分析基盤の作り方
リクルートライフスタイルが考える、万人に使ってもらえる分析基盤の作り方
Yu Yamada
「クックパッドとZaimのグロースハックについて」
「クックパッドとZaimのグロースハックについて」
Kato Kyosuke
5分でわかる良いスライドのつくりかた
5分でわかる良いスライドのつくりかた
Koki Kaku
君にグロースハックはいらない
君にグロースハックはいらない
Takaaki Umada
Keycloak & midPoint の紹介
Keycloak & midPoint の紹介
Hiroyuki Wada
パスキーでリードする: NGINXとKeycloakによる効率的な認証・認可
パスキーでリードする: NGINXとKeycloakによる効率的な認証・認可
Hitachi, Ltd. OSS Solution Center.
リーンスタートアップにおける良い仮説、悪い仮説
リーンスタートアップにおける良い仮説、悪い仮説
Takaaki Umada
Design Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについて
Takaaki Umada
アクセンチュア株式会社採用案内 2022/03
アクセンチュア株式会社採用案内 2022/03
Accenture Japan
20130426 慶応大学での講義
20130426 慶応大学での講義
東証ソーシャルかぶコン
paizaのオンラインジャッジを支えるDockerとその周辺
paizaのオンラインジャッジを支えるDockerとその周辺
paiza
ベイジ流マネジメント術~デザイナーをマネジメントするための私たちの考え方と取り組み
ベイジ流マネジメント術~デザイナーをマネジメントするための私たちの考え方と取り組み
Tsutomu Sogitani
ゼロからはじめるプロダクトマネージャー生活
ゼロからはじめるプロダクトマネージャー生活
Takaaki Umada
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Yahoo!デベロッパーネットワーク
Node js 入門
Node js 入門
Satoshi Takami
KYC and identity on blockchain
KYC and identity on blockchain
mosa siru
Let's design MVP #devlove #leanstartup
Let's design MVP #devlove #leanstartup
Itsuki Kuroda
今なら間に合う分散型IDとEntra Verified ID
今なら間に合う分散型IDとEntra Verified ID
Naohiro Fujie
What's hot
(20)
LEANSTARTUPアンチパターン #devlove #leanstartup
LEANSTARTUPアンチパターン #devlove #leanstartup
リクルートライフスタイルが考える、万人に使ってもらえる分析基盤の作り方
リクルートライフスタイルが考える、万人に使ってもらえる分析基盤の作り方
「クックパッドとZaimのグロースハックについて」
「クックパッドとZaimのグロースハックについて」
5分でわかる良いスライドのつくりかた
5分でわかる良いスライドのつくりかた
君にグロースハックはいらない
君にグロースハックはいらない
Keycloak & midPoint の紹介
Keycloak & midPoint の紹介
パスキーでリードする: NGINXとKeycloakによる効率的な認証・認可
パスキーでリードする: NGINXとKeycloakによる効率的な認証・認可
リーンスタートアップにおける良い仮説、悪い仮説
リーンスタートアップにおける良い仮説、悪い仮説
Design Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについて
アクセンチュア株式会社採用案内 2022/03
アクセンチュア株式会社採用案内 2022/03
20130426 慶応大学での講義
20130426 慶応大学での講義
paizaのオンラインジャッジを支えるDockerとその周辺
paizaのオンラインジャッジを支えるDockerとその周辺
ベイジ流マネジメント術~デザイナーをマネジメントするための私たちの考え方と取り組み
ベイジ流マネジメント術~デザイナーをマネジメントするための私たちの考え方と取り組み
ゼロからはじめるプロダクトマネージャー生活
ゼロからはじめるプロダクトマネージャー生活
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Node js 入門
Node js 入門
KYC and identity on blockchain
KYC and identity on blockchain
Let's design MVP #devlove #leanstartup
Let's design MVP #devlove #leanstartup
今なら間に合う分散型IDとEntra Verified ID
今なら間に合う分散型IDとEntra Verified ID
Similar to 今日から始めるC3.js
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
Masahito Zembutsu
HTML5から始まる技術革新
HTML5から始まる技術革新
Wakasa Masao
皆さん!ふくてんが来ましたよ!!
皆さん!ふくてんが来ましたよ!!
ru pic
Docker meetup tokyo_public_r001
Docker meetup tokyo_public_r001
cyberblack28 Ichikawa
世界最安値!? 鯖江産コンピューターIchigoJam 〜福井技術者の集い その2〜
世界最安値!? 鯖江産コンピューターIchigoJam 〜福井技術者の集い その2〜
Taisuke Fukuno
データセンター事業と関連業界のご紹介
データセンター事業と関連業界のご紹介
SAKURA Internet Inc.
What is tmcn for isit
What is tmcn for isit
Yukihiro Kimura
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
Masakazu Muraoka
Django で始める PyCharm 入門
Django で始める PyCharm 入門
kashew_nuts
Pythonを始めよう
Pythonを始めよう
shouta yoshikai
Inside CyberAgent's Game Development
Inside CyberAgent's Game Development
Suguru Shirai
Beatroboでのハードウェアプロトタイピング
Beatroboでのハードウェアプロトタイピング
Hideyuki TAKEI
Sakura infini band-20180424
Sakura infini band-20180424
さくらインターネット株式会社
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
Takuro Wada
PWA+WebARをECサイトで使ってみたい
PWA+WebARをECサイトで使ってみたい
Daisuke Yamashita
My portfolio
My portfolio
ssuserc2210b
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
Yoshinori OHTA
Cybozu lt2017
Cybozu lt2017
Imaoka Micihihiro
さくらのIoT Platformを使ってみよう ~Developers in KOBE編~
さくらのIoT Platformを使ってみよう ~Developers in KOBE編~
法林浩之
さくらのクラウドの研究活用
さくらのクラウドの研究活用
さくらインターネット株式会社
Similar to 今日から始めるC3.js
(20)
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
HTML5から始まる技術革新
HTML5から始まる技術革新
皆さん!ふくてんが来ましたよ!!
皆さん!ふくてんが来ましたよ!!
Docker meetup tokyo_public_r001
Docker meetup tokyo_public_r001
世界最安値!? 鯖江産コンピューターIchigoJam 〜福井技術者の集い その2〜
世界最安値!? 鯖江産コンピューターIchigoJam 〜福井技術者の集い その2〜
データセンター事業と関連業界のご紹介
データセンター事業と関連業界のご紹介
What is tmcn for isit
What is tmcn for isit
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
Django で始める PyCharm 入門
Django で始める PyCharm 入門
Pythonを始めよう
Pythonを始めよう
Inside CyberAgent's Game Development
Inside CyberAgent's Game Development
Beatroboでのハードウェアプロトタイピング
Beatroboでのハードウェアプロトタイピング
Sakura infini band-20180424
Sakura infini band-20180424
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
PWA+WebARをECサイトで使ってみたい
PWA+WebARをECサイトで使ってみたい
My portfolio
My portfolio
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
Cybozu lt2017
Cybozu lt2017
さくらのIoT Platformを使ってみよう ~Developers in KOBE編~
さくらのIoT Platformを使ってみよう ~Developers in KOBE編~
さくらのクラウドの研究活用
さくらのクラウドの研究活用
Recently uploaded
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Recently uploaded
(10)
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
今日から始める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.
こんな感じのかっこいい 折れ線グラフが作れる!!
11.
12.
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 -
Download now