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 full-size slide

  2. Data Visualization for ALL
    ఏɹڙ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. ͋
    ͷ

    ݟ
    ͨ
    σ

    λ
    Մ

    Խ
    ͷ


    Λ


    ͸
    ·
    ͩ
    ɹ

    Β
    ͳ
    ͍


    Մ

    Խ
    ό
    ε
    λ

    ζ
    ͨ
    ͚
    ͏
    ͪ
    ɹ
    ͻ
    Ͱ
    Ώ
    ͖

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Microsoft Excel

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide



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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    Πϯετʔϧ

    View full-size slide

  23. $ npm install -g e2d3

    View full-size slide

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

    View full-size slide

  25. $ cd e2d3-contrib
    $ e2d3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Data Visualization for ALL
    ఏɹڙ

    View full-size slide

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

    View full-size slide