SlideShare a Scribd company logo
1 of 22
Download to read offline
AngularJSでデータビジュアライゼーションがしたい
おのうえ (@_likr)
2015/11/22 ng-kyoto Angular Meetup #3
自己紹介
• おのうえ ( @_likr )
• 可視化の研究とかやってる
• ng-kyotoとGDG Kobeでスタッフやってる
• D3.js、AngularJS、Reactとかやってる
D3.js
• http://d3js.org/
• データビジュアライゼーションで流行のライブラリ
• SVGを生成することでグラフィックスを表現
• Selection APIでデータをHTML要素に結びつける
SVG
• ベクターグラフィックス
• マークアップでグラフィックスを定義する
• circle、rect、text、path、…
1 var data = [
2 {x: 20, y: 50, label: 'A'},
3 {x: 50, y: 20, label: 'B'},
4 {x: 80, y: 70, label: 'C'}
5 ];
6
7 var width = 500, height = 500;
8 var r = 5;
9 var xScale = d3.scale.linear()
10 .domain([0, 100])
11 .range([0, width]);
12 var yScale = d3.scale.linear()
13 .domain([0, 100])
14 .range([height, 0]);
15 var color = d3.scale.category10();
16 var translate = function (x, y) {
17 return 'translate(' + xScale(x) + ','
+ yScale(y) + ')';
18 };
19
20 var svg = d3.select('svg')
21 .attr({
22 width: width,
23 height: height
24 });
25
26 var points = svg.selectAll('g.point')
27 .data(data)
28 .enter()
29 .append('g')
30 .classed('point', true)
31 .attr({
32 transform: function (d) {
33 return translate(d.x, d.y);
34 },
35 fill: function (d) {
36 return color(d.label);
37 }
38 });
39
40 points.append('circle')
41 .attr('r', r);
42
43 points.append('text')
44 .text(function (d) {
45 return d.label;
46 })
47 .attr({
48 x: r,
49 y: r
50 });
https://jsfiddle.net/mfw6e2z6/
D3.jsで実装
結果
1 <svg height="500" width="500">
2 <g fill="#1f77b4" transform="translate(100,250)" class="point">
3 <circle r="5"></circle>
4 <text y="5" x="5">A</text>
5 </g>
6 <g fill="#ff7f0e" transform="translate(250,400)" class="point">
7 <circle r="5"></circle>
8 <text y="5" x="5">B</text>
9 </g>
10 <g fill="#2ca02c" transform="translate(400,150.00000000000003)" class="point">
11 <circle r="5"></circle>
12 <text y="5" x="5">C</text>
13 </g>
14 </svg>
1 <div ng-app="app">
2 <div ng-controller="ChartController">
3 <svg ng-attr-width="{{width}}" ng-attr-height="{{height}}">
4 <g
5 class="point"
6 ng-attr-transform="{{translate(item.x, item.y)}}"
7 ng-attr-fill="{{color(item.label)}}"
8 ng-repeat="item in data">
9 <circle ng-attr-r="{{r}}"></circle>
10 <text ng-attr-x="{{r}}" ng-attr-y="{{r}}">{{item.label}}</text>
11 </g>
12 </svg>
13 </div>
14 </div>
AngularJSのテンプレートに置き換えてみる
1 angular.module('app', []).controller('ChartController', function ($scope) {
2 $scope.data = [
3 {x: 20, y: 50, label: 'A'},
4 {x: 50, y: 20, label: 'B'},
5 {x: 80, y: 70, label: 'C'}
6 ];
7
8 $scope.width = 500;
9 $scope.height = 500;
10 $scope.r = 5;
11
12 var xScale = d3.scale.linear()
13 .domain([0, 100])
14 .range([0, $scope.width]);
15 var yScale = d3.scale.linear()
16 .domain([0, 100])
17 .range([$scope.height, 0]);
18 $scope.translate = function (x, y) {
19 return 'translate(' + xScale(x) + ',' + yScale(y) + ')';
20 };
21 $scope.color = d3.scale.category10();
22 });
AngularJSで実装
https://jsfiddle.net/tgzpsq8f/
AngularJSでSVG
• データバインディングと表示の分離
• ng-attr-hoge="{{value}}" を使う
• d3.scaleなどのユーティリティは共存可能
• テンプレートで宣言的にSVGを書くことで

構造の理解が容易、メンテもしやすい
双方向データバインディング
• バインディングされた値はSVGにも即座に反映
• https://jsfiddle.net/d5toyxps/
おしまい?
課題:Transition
Transitionの手段
• requestAnimationFrame等でがんばる (D3.js)
• SMIL (animate要素)
• CSS Transitions
• Web Animations
今日はこれを紹介
CSS Transition
• CSSのtransition-propertyを使用
• SVG属性ではなくてStyleで指定する
• transform, fill, stroke, stroke-widthなどが対応
• delay、durationを指定可能
1 g.point {
2 transition-property: transform;
3 transition-duration: 1s;
4 transition-delay: 1s;
5 }
6 <svg ng-attr-width="{{width}}" ng-attr-height="{{height}}">
7 <g
8 class="point"
9 ng-style="pointStyle(item)"
10 ng-attr-fill="{{color(item.label)}}"
11 ng-repeat="item in data">
12 <circle ng-attr-r="{{r}}"></circle>
13 <text ng-attr-x="{{r}}" ng-attr-y="{{r}}">{{item.label}}</text>
14 </g>
15 </svg>
https://jsfiddle.net/sk69x3mb/
19 var translate = function (x, y) {
20 return 'translate(' + xScale(x) + 'px,' + yScale(y) + 'px)';
21 };
22 $scope.pointStyle = function (item) {
23 return {
24 transform: translate(item.x, item[$scope.yKey])
25 };
26 };
ng-styleに変更
translateの単位が必要(px)
CSS Transitions
• 利点
• JSコードの追加なしでTransitionできる
• 欠点
• CSSプロパティのみが対象で

一部のSVG属性に対応できない

(pathのd属性など)
SMIL
• アニメーションの動作をanimate要素で定義
• attributeName、

from、to、

begin、end
• 1回のTransitionよりも繰り返しのアニメーション向け
1 <circle cy="250" cx="250">
2 <animate
3 attributeName="cx"
4 dur="0.5s"
5 fill="freeze"
6 from="250"
7 to="300"
8 begin="0"
9 end="0.5"/>
10 <animate
11 attributeName="cy"
12 dur="0.5s"
13 fill="freeze"
14 from="250"
15 to="300"
16 begin="0"
17 end="0.5"/>
18 </circle>
ヘルパー作った
• shinsekai.js
• SVG属性をAngularJSのDirectiveとして実装
• https://shinsekai-example.firebaseapp.com/
• https://jsfiddle.net/9mdjvh1o/
使い方
1 <!-- Normal SVG -->
2 <circle r="5" cx="50" cy="50"/>
3
4 <!-- SVG with data binding -->
5 <circle ss-r="ctrl.r" ss-cx="ctrl.cx" ss-cy="ctrl.cy"/>
6
7 <!-- SVG with data binding and animation -->
8 <circle ss-r="ctrl.r" ss-cx="ctrl.cx" ss-cy="ctrl.cy" ss-dur="0.3" ss-delay="0.2"/>
1 var angular = require('angular'),
2 shinsekai = require('shinsekai');
3
4 angular.module('example', [shinsekai]);
SMIL
• 利点
• 多くのSVG属性に対応可能
• 欠点
• Transition目的では実装が手間
• Chromeで将来的に廃止予定

http://blog.chromium.org/2015/07/chrome-45-beta-new-es2015-features.html
まとめ
• SVGもモダンなJSフレームワークで書こう
• データ処理、レイアウトではD3.jsも使おう
• TransitionにはCSS Transitionなどが使える

More Related Content

What's hot

Reading Self-descriptive FizzBuzz
Reading Self-descriptive FizzBuzzReading Self-descriptive FizzBuzz
Reading Self-descriptive FizzBuzz
Hiroyuki Morita
 
はじめてのCouch db
はじめてのCouch dbはじめてのCouch db
はじめてのCouch db
Eiji Kuroda
 
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
Masami Yabushita
 
シェーダープログラムを無限に生成するガチャつくってみた PCD2019
シェーダープログラムを無限に生成するガチャつくってみた PCD2019シェーダープログラムを無限に生成するガチャつくってみた PCD2019
シェーダープログラムを無限に生成するガチャつくってみた PCD2019
Masaru Mizuochi
 

What's hot (19)

Perl for visualization
Perl for visualizationPerl for visualization
Perl for visualization
 
swooleを試してみた
swooleを試してみたswooleを試してみた
swooleを試してみた
 
ロールオーバーのいろいろなやり方
ロールオーバーのいろいろなやり方ロールオーバーのいろいろなやり方
ロールオーバーのいろいろなやり方
 
⑱jQueryをおぼえよう!その4
⑱jQueryをおぼえよう!その4⑱jQueryをおぼえよう!その4
⑱jQueryをおぼえよう!その4
 
第一回Miim勉強会
第一回Miim勉強会第一回Miim勉強会
第一回Miim勉強会
 
Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎
 
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
 
Reading Self-descriptive FizzBuzz
Reading Self-descriptive FizzBuzzReading Self-descriptive FizzBuzz
Reading Self-descriptive FizzBuzz
 
BPStudy32 CouchDB 再入門
BPStudy32 CouchDB 再入門BPStudy32 CouchDB 再入門
BPStudy32 CouchDB 再入門
 
はじめてのCouch db
はじめてのCouch dbはじめてのCouch db
はじめてのCouch db
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
 
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
 
Monadicプログラミング マニアックス
Monadicプログラミング マニアックスMonadicプログラミング マニアックス
Monadicプログラミング マニアックス
 
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
 
jQuery超入門編
jQuery超入門編jQuery超入門編
jQuery超入門編
 
IaaS を活用した 情報セキュリティ演習環境の設計と実装
IaaS を活用した情報セキュリティ演習環境の設計と実装IaaS を活用した情報セキュリティ演習環境の設計と実装
IaaS を活用した 情報セキュリティ演習環境の設計と実装
 
JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工
 
シェーダープログラムを無限に生成するガチャつくってみた PCD2019
シェーダープログラムを無限に生成するガチャつくってみた PCD2019シェーダープログラムを無限に生成するガチャつくってみた PCD2019
シェーダープログラムを無限に生成するガチャつくってみた PCD2019
 
物理エンジンを使って 3Dに息を吹き込む
物理エンジンを使って 3Dに息を吹き込む物理エンジンを使って 3Dに息を吹き込む
物理エンジンを使って 3Dに息を吹き込む
 

Viewers also liked

GPGPU Seminar (PyCUDA)
GPGPU Seminar (PyCUDA)GPGPU Seminar (PyCUDA)
GPGPU Seminar (PyCUDA)
智啓 出川
 
GPGPU deいろんな問題解いてみた
GPGPU deいろんな問題解いてみたGPGPU deいろんな問題解いてみた
GPGPU deいろんな問題解いてみた
Ryo Sakamoto
 
CUDA 6の話@関西GPGPU勉強会#5
CUDA 6の話@関西GPGPU勉強会#5CUDA 6の話@関西GPGPU勉強会#5
CUDA 6の話@関西GPGPU勉強会#5
Yosuke Onoue
 
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
Yosuke Onoue
 
Rsa暗号で彼女が出来るらしい
Rsa暗号で彼女が出来るらしいRsa暗号で彼女が出来るらしい
Rsa暗号で彼女が出来るらしい
Yosuke Onoue
 

Viewers also liked (20)

Web開発の 今までとこれから
Web開発の 今までとこれからWeb開発の 今までとこれから
Web開発の 今までとこれから
 
Polymerやってみた
PolymerやってみたPolymerやってみた
Polymerやってみた
 
Angular 2のRenderer
Angular 2のRendererAngular 2のRenderer
Angular 2のRenderer
 
GDG DevFest Kobe Firebaseハンズオン勉強会
GDG DevFest Kobe Firebaseハンズオン勉強会GDG DevFest Kobe Firebaseハンズオン勉強会
GDG DevFest Kobe Firebaseハンズオン勉強会
 
アニメーション(のためのパフォーマンス)の基礎知識
アニメーション(のためのパフォーマンス)の基礎知識アニメーション(のためのパフォーマンス)の基礎知識
アニメーション(のためのパフォーマンス)の基礎知識
 
GPGPU Seminar (PyCUDA)
GPGPU Seminar (PyCUDA)GPGPU Seminar (PyCUDA)
GPGPU Seminar (PyCUDA)
 
AngularFireで楽々バックエンド
AngularFireで楽々バックエンドAngularFireで楽々バックエンド
AngularFireで楽々バックエンド
 
PyCUDAの紹介
PyCUDAの紹介PyCUDAの紹介
PyCUDAの紹介
 
GPGPU deいろんな問題解いてみた
GPGPU deいろんな問題解いてみたGPGPU deいろんな問題解いてみた
GPGPU deいろんな問題解いてみた
 
x86x64 SSE4.2 POPCNT
x86x64 SSE4.2 POPCNTx86x64 SSE4.2 POPCNT
x86x64 SSE4.2 POPCNT
 
AVX2時代の正規表現マッチング 〜半群でぐんぐん!〜
AVX2時代の正規表現マッチング 〜半群でぐんぐん!〜AVX2時代の正規表現マッチング 〜半群でぐんぐん!〜
AVX2時代の正規表現マッチング 〜半群でぐんぐん!〜
 
Popcntによるハミング距離計算
Popcntによるハミング距離計算Popcntによるハミング距離計算
Popcntによるハミング距離計算
 
GPUが100倍速いという神話をぶち殺せたらいいな ver.2013
GPUが100倍速いという神話をぶち殺せたらいいな ver.2013GPUが100倍速いという神話をぶち殺せたらいいな ver.2013
GPUが100倍速いという神話をぶち殺せたらいいな ver.2013
 
Jetson TK1でSemi-Global Matching
Jetson TK1でSemi-Global MatchingJetson TK1でSemi-Global Matching
Jetson TK1でSemi-Global Matching
 
CUDA 6の話@関西GPGPU勉強会#5
CUDA 6の話@関西GPGPU勉強会#5CUDA 6の話@関西GPGPU勉強会#5
CUDA 6の話@関西GPGPU勉強会#5
 
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
 
教育機関でのJetsonの活用の可能性
教育機関でのJetsonの活用の可能性教育機関でのJetsonの活用の可能性
教育機関でのJetsonの活用の可能性
 
Rsa暗号で彼女が出来るらしい
Rsa暗号で彼女が出来るらしいRsa暗号で彼女が出来るらしい
Rsa暗号で彼女が出来るらしい
 
Cuda fortranの利便性を高めるfortran言語の機能
Cuda fortranの利便性を高めるfortran言語の機能Cuda fortranの利便性を高めるfortran言語の機能
Cuda fortranの利便性を高めるfortran言語の機能
 
GPGPU Education at Nagaoka University of Technology: A Trial Run
GPGPU Education at Nagaoka University of Technology: A Trial RunGPGPU Education at Nagaoka University of Technology: A Trial Run
GPGPU Education at Nagaoka University of Technology: A Trial Run
 

Similar to AngularJSでデータビジュアライゼーションがしたい

D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
Takuya Ueda
 
20110714 j queryベーシック
20110714 j queryベーシック20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
 
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングWebデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Atsushi Tadokoro
 
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
AdvancedTechNight
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
 

Similar to AngularJSでデータビジュアライゼーションがしたい (20)

Angular js はまりどころ
Angular js はまりどころAngular js はまりどころ
Angular js はまりどころ
 
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」
2015年7月期AITC女子会「D3.js/Highchartsによるデータの可視化」
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
 
D3.js で LOD を Visualization
D3.js で LOD を VisualizationD3.js で LOD を Visualization
D3.js で LOD を Visualization
 
20110714 j queryベーシック
20110714 j queryベーシック20110714 j queryベーシック
20110714 j queryベーシック
 
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
 
IgChart 入門編
IgChart 入門編IgChart 入門編
IgChart 入門編
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングWebデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
 
Tamabi media131118
Tamabi media131118Tamabi media131118
Tamabi media131118
 
Aaなゲームをjsで
AaなゲームをjsでAaなゲームをjsで
Aaなゲームをjsで
 
20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介
20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介
20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介
 
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションSVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
 
R入門とgoogle map +α
R入門とgoogle map +αR入門とgoogle map +α
R入門とgoogle map +α
 
Arctic.js
Arctic.jsArctic.js
Arctic.js
 
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
 

More from Yosuke Onoue (9)

asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
 
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
 
社会的決定とAHP
社会的決定とAHP社会的決定とAHP
社会的決定とAHP
 
Anaconda & NumbaPro 使ってみた
Anaconda & NumbaPro 使ってみたAnaconda & NumbaPro 使ってみた
Anaconda & NumbaPro 使ってみた
 
PythonistaがOCamlを実用する方法
PythonistaがOCamlを実用する方法PythonistaがOCamlを実用する方法
PythonistaがOCamlを実用する方法
 
What's New In Python 3.3をざっと眺める
What's New In Python 3.3をざっと眺めるWhat's New In Python 3.3をざっと眺める
What's New In Python 3.3をざっと眺める
 
PyOpenCLによるGPGPU入門
PyOpenCLによるGPGPU入門PyOpenCLによるGPGPU入門
PyOpenCLによるGPGPU入門
 
数理最適化とPython
数理最適化とPython数理最適化とPython
数理最適化とPython
 
201010ksmap
201010ksmap201010ksmap
201010ksmap
 

Recently uploaded

研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
atsushi061452
 

Recently uploaded (14)

Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
 
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
 

AngularJSでデータビジュアライゼーションがしたい