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

もっとデータ可視化をカジュアルに!OSSプロジェクト「E2D3」

 もっとデータ可視化をカジュアルに!OSSプロジェクト「E2D3」

GREE Tech Talk #10でE2D3プロジェクトについて発表した資料です。

Hideyuki Takeuchi

March 24, 2016
Tweet

More Decks by Hideyuki Takeuchi

Other Decks in Programming

Transcript

  1. ΋ͬͱσʔλՄࢹԽΛ
    ΧδϡΞϧʹʂ
    OSSϓϩδΣΫτʮE2D3ʯ
    ͚ͨ͏ͪɹͻͰΏ͖

    View Slide

  2. Data Visualization for ALL
    ఏɹڙ

    View Slide

  3. ͚ͨ͏ͪɹͻͰΏ͖
    @CHIMERAST
    גࣜձࣾϢʔβϕʔε
    ͳΜͰ΋԰

    View Slide

  4. ࠓ೔ͷ࿩͸
    ݸਓతʹ׆ಈ͍ͯ͠Δ
    OSSϓϩδΣΫτ
    E2D3ͷ͓࿩

    View Slide

  5. ͚ͨ͏ͪɹͻͰΏ͖
    @CHIMERAST
    E2D3ϓϩδΣΫτ
    ίΞγεςϜͷ։ൃΛ୲౰

    View Slide

  6. ͋
    ͷ

    ݟ
    ͨ
    σ

    λ
    Մ

    Խ
    ͷ


    Λ


    ͸
    ·
    ͩ
    ɹ

    Β
    ͳ
    ͍


    Մ

    Խ
    ό
    ε
    λ

    ζ
    ͨ
    ͚
    ͏
    ͪ
    ɹ
    ͻ
    Ͱ
    Ώ
    ͖

    View Slide

  7. View Slide

  8. σʔλՄࢹԽ
    σʔλ෼ੳͱ੾ͬͯ͸੾Εͳ͍΋ͷ

    View Slide

  9. etc…

    View Slide

  10. ͜ΕΒ΋
    σʔλՄࢹԽػೳΛ
    ͦͳ͍͑ͯ·͢

    View Slide

  11. ͔͠͠ɺ

    View Slide

  12. ී௨ͷਓʹͱͬͯ͸
    ෑډ͕ߴ͍

    View Slide

  13. ී௨ͷਓ͕
    ෼ੳʹ࢖͏ιϑτʁ

    View Slide

  14. Microsoft Excel

    View Slide

  15. View Slide

  16. Ͱ΋ੈͷதʹ͸
    ΋ͬͱछʑଟ࠼ͳ
    ՄࢹԽख๏͕͋Δʂ

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. ΋ͬͱ͍ΖΜͳ
    ՄࢹԽ͕Ͱ͖ͨΒ
    ָͦ͠͏ʂ

    View Slide

  22. Excel Ͱʂ

    View Slide

  23. શͯͷਓͷͨΊͷ
    σʔλՄࢹԽϓϥοτϑΥʔϜ

    View Slide

  24. View Slide

  25. View Slide

  26. ࢖͍ํ

    View Slide

  27. Excel 2013Ҏ߱ or Excel Online ͷ
    Office Store͔ΒʮE2D3ʯͰݕࡧʂ

    View Slide



  28. MacͰ΋
    Excel OnlineͰ
    ಈ͖·͢ʂ

    View Slide

  29. Ͱ͖Δ͜ͱ

    View Slide

  30. E2D3ʹొ࿥͞Εͨ
    ςϯϓϨʔτ
    Ϣʔβ͕ExcelͰ
    ೖྗͨ͠σʔλ
    URLΛൃߦ͠
    ϒϩάʹషΓ෇͚ͨΓ
    FB or TWͰγΣΞ
    Excel্Ͱ
    ΠϯλϥΫςΟϒͳ
    σʔλՄࢹԽ

    View Slide

  31. ςϯϓϨʔτͷ
    ࡞Γํ

    View Slide

  32. ςϯϓϨʔτ͸
    HTML+JSͰ࡞੒
    ͓޷ΈͷΤσΟλͰ։ൃʂ
    ؆

    View Slide

  33. D3.js΍Βthree.js΍Β
    ՄࢹԽϥΠϒϥϦΛ࢖ͬͯ
    ࡞ΕΔ

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. ςϯϓϨʔτ։ൃͷ
    ؀ڥߏங͸௒؆୯ʂ
    npmʹΑΔίϚϯυ׬උ

    View Slide

  39. ४උ
    node.js v5.3.0 Ҏ্Λ

    Πϯετʔϧ

    View Slide

  40. $ npm install -g e2d3

    View Slide

  41. $ git clone \
    https://github.com/e2d3/e2d3-contrib.git

    View Slide

  42. $ cd e2d3-contrib
    $ e2d3

    View Slide

  43. Webαʔό্ཱ͕͕ͪΓ
    LiveReloadػೳ΋ಈ͘
    ։ൃ؀ڥ͕੔͍·͢

    View Slide

  44. View Slide

  45. ͋ͱ͸GitHubͷWikiݟͭͭ
    ςϯϓϨʔτΛ։ൃͯ͠
    Pull RequestΛ౤͛Δ͚ͩ

    View Slide

  46. Pull Request͕Ϛʔδ͞Ε
    10෼͙Β͍ͨͭͱ
    Excelͷը໘ʹදࣔ͞Ε·͢

    View Slide

  47. ࠷ޙʹ

    View Slide

  48. E2D3͸OSSͱָͯ͘͠͠
    ׆ಈ͍ͯ͠·͢

    View Slide

  49. ʮσʔλͬͯ໘ന͍ʂʯ
    ͱݴͬͯ͘ΕΔਓΛ૿΍͢
    ϓϩδΣΫτͰ͢

    View Slide

  50. σʔλαΠΤϯςΟετ
    ΞφϦετ
    Ӧۀ
    ϚʔέςΟϯά
    ඇΤϯδχΞ
    Ұൠࣄ຿һ
    খɺதɺߴੜ
    σʔλͬͯ໘ന͍ʂ
    σʔλՄࢹԽͷ݁Ռɺ

    View Slide

  51. ʮσʔλͬͯ໘ന͍ʂʯͱօ͕ݴ͏
    ʮσʔλϦςϥγʔʯΛօ͕͍࣋ͬͯΔ
    ʮσʔλͷྗʯΛօ͕׆༻Ͱ͖Δ
    E2D3Ͱ࡞Γ͍ͨະདྷ

    View Slide

  52. ޿ใ׆ಈɿड৆ྺ12ճΒ͍͠

    View Slide

  53. ༷ʑͳॴଐɾ৬छͷਓͨͪ
    60ਓ͙Β͍ͰӡӦͯ͠·͢

    View Slide

  54. ݄̍Ͱ
    σʔλϏδϡΞϥΠθʔγϣϯ
    ຖ݄΋͘΋͘ձ
    ΛӡӦ͍ͯ͠·͢

    View Slide

  55. ςϯϓϨʔτͷ਺͸
    ίϯτϦϏϡʔλཔΈ


    View Slide

  56. ίΞγεςϜΛ
    Ұॹʹ։ൃͯ͘͠ΕΔ
    ਓΛ୳͍ͯ͠·͢


    View Slide

  57. ίΞͰࠓޙ΍Γ͍ͨ͜ͱ
    gist͔ΒςϯϓϨʔτొ࿥
    ςϯϓϨʔτݕࡧ
    UI/UX࡮৽

    View Slide

  58. ٻΉʂίϯτϦϏϡʔλ
    http://e2d3.org/
    https://github.com/e2d3/e2d3
    ςϯϓϨʔτ։ൃ
    ίΞγεςϜ։ൃ
    ΋͘΋͘ձӡӦ
    ޿ใ׆ಈ
    ւ֎ల։
    ͦͷଞॾʑ

    View Slide

  59. Data Visualization for ALL
    ఏɹڙ

    View Slide

  60. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ

    View Slide