Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
フロントエンド技術でデータビジュアライゼーション.pdf
Yosuke Onoue
August 27, 2016
Technology
0
360
フロントエンド技術でデータビジュアライゼーション.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
2
320
likr
1
320
likr
1
92
likr
23
9.6k
likr
4
3.4k
likr
0
150
likr
0
210
likr
2
360
likr
15
5.8k
Other Decks in Technology
See All in Technology
myajiri
0
320
binarymist
0
1.3k
torisoup
11
5.9k
oracle4engineer
0
3.6k
1027kg
0
200
lmi
3
1.1k
imdigitallab
0
230
miura55
0
310
lancers_pr
4
1.5k
ocise
1
1.8k
nisshii0313
1
160
shirayanagiryuji
1
270
Featured
See All Featured
jponch
103
5k
schacon
145
6.6k
colly
188
14k
addyosmani
311
21k
samlambert
237
10k
tammielis
237
23k
keavy
107
14k
sstephenson
145
12k
jonyablonski
19
1.2k
thoeni
3
610
marcelosomers
221
15k
morganepeng
18
1.2k
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Λ༻ • ϑΥϯτબͼʹ͕͔͔࣌ؒͬͨ(ଥڠͨ͠ ྫ͑ɺ