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
520
フロントエンド技術でデータビジュアライゼーション.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.5k
Think About Front-end Web Development with Rust
likr
2
530
Yewにおけるoff-the-main-thread
likr
1
750
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
220
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.8k
Introduction to Graph Drawing
likr
0
500
20190707Ionic_Meetup.pdf
likr
0
440
About the end of the web
likr
2
530
Other Decks in Technology
See All in Technology
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
30
11k
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
740
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
270
GitHub Copilot の概要
tomokusaba
1
140
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
230
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
A2Aのクライアントを自作する
rynsuke
1
190
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
230
エンジニア向け技術スタック情報
kauche
1
270
Welcome to the LLM Club
koic
0
190
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
48
14k
Navigating Team Friction
lara
187
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
220
Agile that works and the tools we love
rasmusluckow
329
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Side Projects
sachag
455
42k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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Λ༻ • ϑΥϯτબͼʹ͕͔͔࣌ؒͬͨ(ଥڠͨ͠ ྫ͑ɺ