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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Yosuke Onoue
August 27, 2016
Technology
0
540
フロントエンド技術でデータビジュアライゼーション.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
8
6.9k
Think About Front-end Web Development with Rust
likr
2
570
Yewにおけるoff-the-main-thread
likr
1
810
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
260
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
6.1k
Introduction to Graph Drawing
likr
0
540
20190707Ionic_Meetup.pdf
likr
0
480
About the end of the web
likr
2
560
Other Decks in Technology
See All in Technology
JAWS Days 2026 楽しく学ぼう! 認証認可 入門/20260307-jaws-days-novice-lane-auth
opelab
2
900
トップマネジメントとコンピテンシーから考えるエンジニアリングマネジメント
zigorou
4
600
生成AIの利用とセキュリティ /gen-ai-and-security
mizutani
1
1.3k
ブラックボックス観測に基づくAI支援のプロトコルのリバースエンジニアリングと再現~AIを用いたリバースエンジニアリング~ @ SECCON 14 電脳会議 / Reverse Engineering and Reproduction of an AI-Assisted Protocol Based on Black-Box Observation @ SECCON 14 DENNO-KAIGI
chibiegg
0
150
Kiro のクレジットを使い切る!
otanikohei2023
0
120
AIエージェント・エコノミーの幕開け 〜 オープンプロトコルが変えるビジネスの未来 〜
shukob
0
100
問い合わせ自動化の技術的挑戦
recruitengineers
PRO
2
150
LLM のプロダクト導入における開発の裏側と技術的挑戦
recruitengineers
PRO
1
110
Lookerの最新バージョンv26.2がやばい話
waiwai2111
1
160
マルチロールEMが実践する「組織のレジリエンス」を高めるための組織構造と人材配置戦略
coconala_engineer
3
470
Webアクセシビリティ技術と実装の実際
tomokusaba
0
230
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
10k
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
Thoughts on Productivity
jonyablonski
75
5.1k
Designing Powerful Visuals for Engaging Learning
tmiket
0
260
Rebuilding a faster, lazier Slack
samanthasiow
85
9.4k
Bash Introduction
62gerente
615
210k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
A Soul's Torment
seathinner
5
2.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
130
Discover your Explorer Soul
emna__ayadi
2
1.1k
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Λ༻ • ϑΥϯτબͼʹ͕͔͔࣌ؒͬͨ(ଥڠͨ͠ ྫ͑ɺ