Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=128

Yosuke Onoue

August 27, 2016
Tweet

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