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

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

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