フロントエンド技術でデータビジュアライゼーション.pdf

Grand Frontend Osaka 2016 Day 1での紹介資料です。

Transcript

1. ϑϩϯτΤϯυٕज़Ͱ
 σʔλϏδϡΞϥΠθʔγϣϯ Grand Frontend Osaka 2016 Day 1
2. ࣗݾ঺հ • ͓ͷ͏͑ (@_likr) • ژ౎େֶ ֶࡍ༥߹ڭҭݚڀਪਐηϯλʔ
 ੓ࡦͷͨΊͷՊֶϢχοτ ಛఆॿڭ • ng-kyotoΦʔΨφΠβʔɺGDGਆށελοϑ • ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ • WebϑϩϯτΤϯυ։ൃ
3. ϏδϡΞϥΠθʔγϣϯͷྫ ֶ໰؍ͷՄࢹԽ େن໛σʔλ͔ΒͷҼՌநग़ ஍ٿ؀ڥ৘ใͷՄࢹԽ ҼՌάϥϑͷՄࢹԽ
4. ϏδϡΞϥΠθʔγϣϯͱ͸ • ՄࢹԽɺݟ͑ΔԽɺ… • "to see the unseen" • ਓ͕ؒʮσʔλʯ͔Βʮ৘ใʯΛݟग़͠
 ཧղ͢Δ͜ͱΛଅਐ͢Δ ৘ใ ஌ࣝ ਓؒ ʴ ՄࢹԽ ཧղ σʔλ
5. ՄࢹԽͷϓϩηε ʮ͋Δ΂͖ՄࢹԽ૾ʯΛ
 ࣮ݱ͢ΔͨΊͷٕज़ ʮ͋Δ΂͖ՄࢹԽ૾ʯΛఆΊΔ ʮ͋Δ΂͖ՄࢹԽ૾ʯ͕
 ୡ੒Ͱ͖͔ͨͷධՁ σʔλ ͋Δ΂͖ՄࢹԽ૾
6. ϑϩϯτΤϯυٕज़ͱϏδϡΞϥΠθʔγϣϯ • ϒϥ΢βͷඋ͑ΔάϥϑΟοΫεAPIΛར༻ • CanvasɺWebGLɺSVG • Webඪ४ٕज़ (HTMLɺCSSɺJavaScript)Ͱ࣮૷ • ๛෋ͳϏδϡΞϥΠθʔγϣϯϥΠϒϥϦ • D3.js - https://d3js.org/ • Three.js - http://threejs.org/ • Cesium.js - https://cesiumjs.org/ • …
7. Φʔϓϯσʔλ • ૯຿ল౷ܭہ
 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/
8. Vis Kyoto (Ծ) • ϏδϡΞϥΠθʔγϣϯΛςʔϚʹ
 (͜Ε͔Β)׆ಈ͢ΔίϛϡχςΟ • ΋͘΋͘ձɺษڧձɺϋοΧιϯΛاըத • Կ͔ͷϏδϡΞϥΠθʔγϣϯ΍ͬͯΈΔ • ৽͍͠ϥΠϒϥϦΛ͞ΘͬͯΈΔ • ໘ന͍ϏδϡΞϥΠθʔγϣϯΛڞ༗ͯ͠ΈΔ • ίϥϘϨʔγϣϯͯ͘͠ΕΔίϛϡχςΟ΋׻ܴʂ • connpassͰΠϕϯτ৘ใΛνΣοΫʂ http://vis-kyoto.connpass.com/
9. ϋοΫλΠϜ / ϒʔεϋϯζΦϯ • ϏδϡΞϥΠθʔγϣϯͷ͋Ε͜Ε͓ख఻͍͠·͢ʂ • HTMLɺCSSɺJavaScriptͷॻ͖ํ • ϥΠϒϥϦͷ࢖͍ํ • σʔλͷݟ͚ͭํ • ϏδϡΞϥΠθʔγϣϯͷσβΠϯ • ࢀߟਤॻ΋༻ҙ͍ͯ͠·͢
10. • ఱߖตԼͷ͓ؾ࣋ͪWordCloud • D3.jsɺd3-wordcloudɺReactΛ࢖༻ • ϑΥϯτબͼʹ͕͔͔࣌ؒͬͨ(ଥڠͨ͠ ྫ͑͹ɺ