Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンド技術でデータビジュアライゼーション.pdf
Search
Yosuke Onoue
August 27, 2016
Technology
0
510
フロントエンド技術でデータビジュアライゼーション.pdf
Grand Frontend Osaka 2016 Day 1での紹介資料です。
Yosuke Onoue
August 27, 2016
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
ネットワーク可視化の世界
likr
7
6.1k
Think About Front-end Web Development with Rust
likr
2
510
Yewにおけるoff-the-main-thread
likr
1
730
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
210
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.6k
Introduction to Graph Drawing
likr
0
470
20190707Ionic_Meetup.pdf
likr
0
400
About the end of the web
likr
2
510
Other Decks in Technology
See All in Technology
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
800
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
130
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
190
OPENLOGI Company Profile for engineer
hr01
1
20k
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
160
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.3k
データモデルYANGの処理系を再発明した話
tjmtrhs
0
240
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
560
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
370
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.7k
手を動かしてレベルアップしよう!
maruto
0
250
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
180
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Faster Mobile Websites
deanohume
306
31k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
4 Signs Your Business is Dying
shpigford
183
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Bash Introduction
62gerente
611
210k
Adopting Sorbet at Scale
ufuk
75
9.2k
It's Worth the Effort
3n
184
28k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Music & Morning Musume
bryan
46
6.4k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Transcript
ϑϩϯτΤϯυٕज़Ͱ σʔλϏδϡΞϥΠθʔγϣϯ Grand Frontend Osaka 2016 Day 1
ࣗݾհ • ͓ͷ͏͑ (@_likr) • ژେֶ ֶࡍ༥߹ڭҭݚڀਪਐηϯλʔ ࡦͷͨΊͷՊֶϢχοτ ಛఆॿڭ •
ng-kyotoΦʔΨφΠβʔɺGDGਆށελοϑ • ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ • WebϑϩϯτΤϯυ։ൃ
ϏδϡΞϥΠθʔγϣϯͷྫ ֶ؍ͷՄࢹԽ େنσʔλ͔ΒͷҼՌநग़ ٿڥใͷՄࢹԽ ҼՌάϥϑͷՄࢹԽ
ϏδϡΞϥΠθʔγϣϯͱ • ՄࢹԽɺݟ͑ΔԽɺ… • "to see the unseen" • ਓ͕ؒʮσʔλʯ͔ΒʮใʯΛݟग़͠
ཧղ͢Δ͜ͱΛଅਐ͢Δ ใ ࣝ ਓؒ ʴ ՄࢹԽ ཧղ σʔλ
ՄࢹԽͷϓϩηε ʮ͋Δ͖ՄࢹԽ૾ʯΛ ࣮ݱ͢ΔͨΊͷٕज़ ʮ͋Δ͖ՄࢹԽ૾ʯΛఆΊΔ ʮ͋Δ͖ՄࢹԽ૾ʯ͕ ୡͰ͖͔ͨͷධՁ σʔλ ͋Δ͖ՄࢹԽ૾
ϑϩϯτΤϯυٕज़ͱϏδϡΞϥΠθʔγϣϯ • ϒϥβͷඋ͑ΔάϥϑΟοΫεAPIΛར༻ • CanvasɺWebGLɺSVG • Webඪ४ٕज़ (HTMLɺCSSɺJavaScript)Ͱ࣮ • ๛ͳϏδϡΞϥΠθʔγϣϯϥΠϒϥϦ
• D3.js - https://d3js.org/ • Three.js - http://threejs.org/ • Cesium.js - https://cesiumjs.org/ • …
Φʔϓϯσʔλ • ૯ল౷ܭہ http://www.stat.go.jp/data/index.htm • ҐஔࢀরใμϯϩʔυαʔϏε http://nlftp.mlit.go.jp/isj/index.html • େࡕࢢΦʔϓϯσʔλ http://www.city.osaka.lg.jp/toshikeikaku/page/
0000250227.html • ؾிσʔλ (OPeNDAP) http://database.rish.kyoto-u.ac.jp/arch/jmadata/
Vis Kyoto (Ծ) • ϏδϡΞϥΠθʔγϣϯΛςʔϚʹ (͜Ε͔Β)׆ಈ͢ΔίϛϡχςΟ • ͘͘ձɺษڧձɺϋοΧιϯΛاըத • Կ͔ͷϏδϡΞϥΠθʔγϣϯͬͯΈΔ
• ৽͍͠ϥΠϒϥϦΛ͞ΘͬͯΈΔ • ໘ന͍ϏδϡΞϥΠθʔγϣϯΛڞ༗ͯ͠ΈΔ • ίϥϘϨʔγϣϯͯ͘͠ΕΔίϛϡχςΟܴʂ • connpassͰΠϕϯτใΛνΣοΫʂ http://vis-kyoto.connpass.com/
ϋοΫλΠϜ / ϒʔεϋϯζΦϯ • ϏδϡΞϥΠθʔγϣϯͷ͋Ε͜Ε͓ख͍͠·͢ʂ • HTMLɺCSSɺJavaScriptͷॻ͖ํ • ϥΠϒϥϦͷ͍ํ •
σʔλͷݟ͚ͭํ • ϏδϡΞϥΠθʔγϣϯͷσβΠϯ • ࢀߟਤॻ༻ҙ͍ͯ͠·͢
• ఱߖตԼͷ͓ؾ࣋ͪWordCloud • D3.jsɺd3-wordcloudɺReactΛ༻ • ϑΥϯτબͼʹ͕͔͔࣌ؒͬͨ(ଥڠͨ͠ ྫ͑ɺ