わかりやすいグラフを作ろう

ng-kyoto Angular Meetup #8 での LT発表資料です。
https://ng-kyoto.connpass.com/event/100685/

Transcript

1. Θ͔Γ΍͍͢άϥϑΛ࡞Ζ͏
   OHLZPUP"OHVMBS.FFUVQc0DU
   

   View Slide

2. ஫ҙɿ"OHVMBSͷ࿩͸Ұ੾ग़͖ͯ·ͤΜ
   
   

   View Slide

3. ਆอՅल
   !KNCMPH
   ͡Μ΅ɹΑ͠ͻͰ
   

   View Slide

4. View Slide

5. View Slide

6. Θ͔Γ΍͍͢άϥϑΛ࡞Δͷ͸ɺҙ֎ͱ೉͍͠
   

   View Slide

7. σʔλ άϥϑ
   Τϯίʔυ
   ޮՌతͳΤϯίʔσΟϯάͷςΫχοΫΛ
   ஌͓ͬͯ͘͜ͱ͕େ੾
   

   View Slide

8. Θ͔Γ΍͍͢άϥϑΛ࡞੒͢ΔͨΊͷखॱ
   ԿΛ఻͍͑ͨͷ͔໌֬ʹ͢Δ
   ఻ΘΓ΍͍͢දݱΛબͿ
   ݟӫ͑ΛσβΠϯ͢Δ
   

   View Slide

9. Θ͔Γ΍͍͢άϥϑΛ࡞੒͢ΔͨΊͷखॱ
   ԿΛ఻͍͑ͨͷ͔໌֬ʹ͢Δ
   ఻ΘΓ΍͍͢දݱΛબͿ
   ݟӫ͑ΛσβΠϯ͢Δ
   

   View Slide

10. Α͋͘Δέʔε
    ۤ࿑ͯ͠৘ใΛಡΈऔΒͳ͚Ε͹ͳΒͳ͍άϥϑ
    ఻͍͑ͨ͜ͱʹϑΥʔΧεͰ͖͍ͯͳ͍ɻ
    ݴ͍͍ͨ͜ͱ͕఻Θ͍ͬͯͳ͍ɻ
    

    View Slide

11. ఻͍͑ͨʮϝοηʔδʯΛ͔ͭͭʹߜΓࠐΉɻ
    ͜ΕΛΘ͔Γ΍͘͢఻͑Δ͜ͱʹϑΥʔΧε͢Δ
    1PXFS1PJOUΛ։͘લʹ
    

    View Slide

12. Θ͔Γ΍͍͢άϥϑΛ࡞੒͢ΔͨΊͷखॱ
    ԿΛ఻͍͑ͨͷ͔໌֬ʹ͢Δ
    ఻ΘΓ΍͍͢දݱΛબͿ
    ݟӫ͑ΛσβΠϯ͢Δ
    

    View Slide

13. View Slide

14. ࢖͏ͷ͸ආ͚͍ͨάϥϑ
    ԁάϥϑ %άϥϑ ࣠άϥϑ
    
    ಡΈʹ͍͘
    ͕ࠩݟ෼͚ͮΒ͍
    ಡΈʹ͍͘
    ͕ࠩݟ෼͚ͮΒ͍
    ࠨӈʹॎ͕࣠͋Δͱ
    ಡΈʹ͘͘
    ͕͔͔࣌ؒΔ
    

    View Slide

15. ࢖ͬͯ҆৺ͳجຊͷάϥϑ
    ఺άϥϑ ๮άϥϑ ઢάϥϑ
    
    ࢄ෍ਤ
    ॎ๮άϥϑ
    ԣ๮άϥϑ
    ੵΈ্͛๮άϥϑ
    ંΕઢάϥϑ
    εϩʔϓάϥϑ
    

    View Slide

16. Θ͔Γ΍͍͢άϥϑΛ࡞੒͢ΔͨΊͷखॱ
    ԿΛ఻͍͑ͨͷ͔໌֬ʹ͢Δ
    ఻ΘΓ΍͍͢දݱΛબͿ
    ݟӫ͑ΛσβΠϯ͢Δ
    

    View Slide

17. ෆඞཁͳཁૉΛऔΓͷͧ͘
    ૬खͷ஫ҙΛແҙࣝతʹͻ͖͚ͭΔ
    ৺͕͚Δ΂͖ͭͷϙΠϯτ
    

    View Slide

18. ਅͬനͳը໘ʹཁૉΛͭ௥Ճ͢Δ͝ͱʹɺ

    ೝ஌తෛՙ͸૿͍͑ͯ͘ɻ
    ඞཁ࠷খݶ·ͰɺཁૉΛऔΓͷ͍͍ͧͯ͘ɻ
    ෆඞཁͳཁૉΛऔΓͷͧ͘
    

    View Slide

19. View Slide

20. View Slide

21. ૬ख͕ʮೝࣝ͢Δલʯʹݟ͍ͤͨ΋ͷΛݟͤΔ
    ࢹઢͷಈ͖Λҙࣝͯ͠ཁૉΛ഑ஔ͢Δ
    ૬खͷ஫ҙΛແҙࣝతʹͻ͖͚ͭΔ
    

    View Slide

22. 
    
    
    
    ʮʯͷ਺Λ਺͍͑ͯͩ͘͞
    

    View Slide

23. ҙࣝతʹݟΑ͏ͱ͠ͳͯ͘΋ɺ
    ʮʯ͕ࣗવͱ໨ʹඈͼࠐΜͰ͖·ͤΜͰ͔ͨ͠ʁ
    
    
    
    
    

    View Slide

24. ແҙࣝతࢹ֮৘ใ QSFBUUFOUJWFBUUSJCVUFT
    
    
    
    
    
    
    
    
    c
    
    
    
    ޲͖ ܗ ઢͷ௕͞ ઢͷ෯
    αΠζ ࿷ۂ ௥Ճ ғΈ
    ৭ ೱ͞ Ґஔ ಈ͖
    

    View Slide

25. ਓ͸
    ʮ;ܕʯʹ
    ࢹઢΛ
    ಈ͔͢
    

    View Slide

26. 5IFUJUMFJTJNQPSUBOU
    5IFOPUFUFYUJTOPUTPJNQPSUBOU
    

    View Slide

27. ࣮ફྫ
    

    View Slide

28. ԿΛ఻͍͑ͨͷ͔໌֬ʹ͢Δ
    

    View Slide

29. ԿΛ఻͑Δ͔
    աڈ೥ؒͷେࡕࢢͷؾ৅σʔλΛ෼ੳͨ݁͠Ռɺ
    ೥͕࠷΋೤ଳ໷ͷଟ͍೥ͩͬͨ͜ͱ͕Θ͔ͬͨɻ
    ಛʹ೥ͱൺֱ͢Δͱഒͷ͕ࠩ͋ͬͨɻ
    ͜ͷ఺Λ఻͑Δɻ
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೤ଳ໷ͷ೔਺
    

    View Slide

30. ఻ΘΓ΍͍͢දݱΛબͿ
    

    View Slide

31. දΛ࢖͏ͷ΋͋Γ
    ೤ଳ໷ͷ೔਺
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ͜ͷఔ౓ͷσʔλͰ͋Ε͹ѱ͘ͳ͍ɻ

    

    ʮແҙࣝతࢹ֮৘ใʯΛར༻͢Ε͹ɺ
    Θ͔Γ΍͘͢఻͑ΒΕΔɻ
    ͨͩ͠ɺ΄͔ͷ೥ͱͲΕ͙Β͍ͷ͕ࠩ
    ͋ͬͨͷ͔͸ɺදΛʮಡΉʯඞཁ͕͋Γ
    ͕͔͔࣌ؒΔɻ
    

    View Slide

32. ંΕઢάϥϑʹͯ͠ΈΔ
    ೥ؒͷมԽͷ܏޲Λ఻͍͑ͨͷͰ͋Ε͹
    ͪΐ͏Ͳ͍͍ɻ
    ͨͩ͠ɺͲΕ͕࠷΋େ͖͘ɺ

    ͲΕ͕࠷΋খ͍͞ͷ͔ͱ͍͏͜ͱʹ
    ϑΥʔΧε͍ͤͨ͞৔߹ʹ͸
    ͋·Γ޲͍͍ͯͳ͍ɻ
    
    
    
    
    
    ೥ ೥ ೥ ೥ ೥ ೥ ೥ ೥ ೥ ೥
    

    View Slide

33. ॎ๮άϥϑʹͯ͠ΈΔ
    
    
    
    
    
    ೥ ೥ ೥ ೥ ೥ ೥ ೥ ೥ ೥ ೥
    ͲΕ͕࠷΋େ͖͘ɺͲΕ͕࠷΋খ͍͔͞ɺ
    ೝࣝ͠΍͍͢͠ɺ೥͝ͱͷࠩ΋

    ͻͱ໨Ͱ෼͔Δɻ
    

    View Slide

34. ԣ๮άϥϑʹͯ͠ΈΔ
    ॎ๮άϥϑͱಉ༷ɺͪ͜Β΋Θ͔Γ΍͍͢ɻ
    ͞Βʹʮ;ܕʯͷࢹઢͷಈ͖Λߟ͑Δͱɺ
    ·ͣϥϕϧʢ೥ʣΛݟͯɺͦΕ͔ΒσʔλΛ
    ݟΔͷͰɺॎ๮άϥϑΑΓ΋ಡΈ΍͍͢ɻ
    ʢॎ๮άϥϑͷ৔߹͸ɺ্Լʹ໨Λಈ͔ͯ͠
    σʔλͱϥϕϧΛݟൺ΂Δඞཁ͕͋Δɻʣ
    ࠓճ͸͜ΕΛ࠾༻ɻ
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    
    

    View Slide

35. ݟӫ͑ΛσβΠϯ͢Δ
    

    View Slide

36. ෆඞཁͳཁૉΛऔΓͷ͍͍ͧͯ͘
    

    View Slide

37. աڈ೥ؒͷେࡕࢢͷ೤ଳ໷ͷ೔਺
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    
    

    View Slide

38. աڈ೥ؒͷେࡕࢢͷ೤ଳ໷ͷ೔਺
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    
    ৭Λͳ͘͢ʢάϨʔεέʔϧʹ͢Δʣ
    

    View Slide

39. աڈ೥ؒͷେࡕࢢͷ೤ଳ໷ͷ೔਺
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    
    ғΈઢͱܩઢΛফ͢
    

    View Slide

40. աڈ೥ؒͷେࡕࢢͷ೤ଳ໷ͷ೔਺
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    9࣠ͷϥϕϧΛফ͢
    

    View Slide

41. ૬खͷ஫ҙΛແҙࣝతʹͻ͖͚ͭΔ
    

    View Slide

42. ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    λΠτϧΛࠨ্ʹஔ͍ͯڧௐ͢Δ
    աڈ೥ؒͷେࡕࢢͷ೤ଳ໷ͷ೔਺
    

    View Slide

43. ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ʮ৭ʯͰ஫ҙΛҾ͖͚ͭΔ
    աڈ೥ؒͷେࡕࢢͷ೤ଳ໷ͷ೔਺
    

    View Slide

44. ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೔
    ೔
    ݟͯ΄͍͠೥ʹ͚ͩ೔਺Λදࣔ͢Δ
    աڈ೥ؒͷେࡕࢢͷ೤ଳ໷ͷ೔਺
    

    View Slide

45. աڈ೥ؒͷେࡕࢢͷ೤ଳ໷ͷ೔਺
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    
    मਖ਼લ
    

    View Slide

46. मਖ਼ޙ
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೥
    ೔
    ೔
    աڈ೥ؒͷେࡕࢢͷ೤ଳ໷ͷ೔਺
    

    View Slide

47. ·ͱΊ
    

    View Slide

48. ʮσʔλΛͨͩݟͤΔ͚ͩʯͰऴΘΒͳ͍άϥϑΛ࡞Ζ͏
    

    View Slide