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

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Λ࢖༻ • ϑΥϯτબͼʹ͕͔͔࣌ؒͬͨ(ଥڠͨ͠ ྫ͑͹ɺ