Data Studio Community Visualizationを触ってみた

FukuokaJS #9 で発表した資料です。
Google データポータルでは、オリジナルのグラフが作成できます。
Data Studio Community Visualizationという機能を使い、JSでグラフを作る方法を紹介します。
作業の全てを網羅するものではありません。
ご自身で開発する際は公式のドキュメントをご覧になることを推奨します。

サンプルデータ
https://github.com/m-yoshiro/data-studio-community-visualization-sample

Transcript

1. ՆٳΈͷ॓୊
   %BUB4UVEJP$PNNVOJUZ
   7JTVBMJ[BUJPOΛ৮ͬͯΈͨ
   'VLVPLB+4
   দຊ๕࿠!CFOOLZPVHJSBJ
   

   View Slide

2. দຊ๕࿠
   σβΠφʔ
   (.0ϖύϘגࣜձࣾ
   !CFOOLZPVHJSBJ
   

   View Slide

3. (PPHMFσʔλϙʔλϧͰ
   ΦϦδφϧͷάϥϑΛ࡞੒͢Δ
   ͜ͷ࿩ͷ಺༰
   

   View Slide

4. (PPHMFσʔλϙʔλϧ
   w (PPHMF4IFFU΍ΞφϦςΟΫε౳ͷσʔλ
   Λݩʹɺάϥϑ΍දͰՄࢹԽ͕ߦ͑Δɻ
   w ӈਤͷΑ͏ͳμογϡϘʔυͷ࡞੒͕Ͱ͖
   Δɻ
   

   View Slide

5. (PPHMF%BUB4UVEJP$PNNVOJUZ7JTVBMJ[BUJPO
   w σʔλϙʔλϧͰಠࣗͷάϥϑΛ௥ՃͰ͖
   Δػೳ
   w +4ͰಠࣗͷάϥϑΛ࡞੒Ͱ͖Δ
   https://developers.google.com/datastudio/visualization/
   

   View Slide

6. ެࣜͷαϯϓϧ
   

   View Slide

7. ։ൃ
   

   View Slide

8. ࣄલ४උ
   w (PPHMF$MPVE4UPSBHF

   $PNNVOJUZ7JTVBMJ[BUJPOͷΞοϓϩʔυઌ
   w (PPHMFσʔλϙʔλϧͷϓϩδΣΫτ
   

   View Slide

9. IUUQTDPEFMBCTEFWFMPQFSTHPPHMFDPNDPEFMBCTDPNNVOJUZWJTVBMJ[BUJPO IMKB
   ެࣜͷνϡʔτϦΞϧΛࢀߟʹਐΊͯ·͢
   

   View Slide

10. खॱ
    ։ൃͷ४උ
    ઃఆϑΝΠϧ
    ։ൃ
    Ξοϓϩʔυ
    σʔλϙʔλϧͰͷར༻
    

    View Slide

11. ։ൃͷ४උ
    w EDDPNQPOFOUͱ͍͏ެࣜͷϥΠϒϥϦʔΛJOTUBMM͢Δ

    IUUQTHJUIVCDPNHPPHMFEBUBTUVEJPETDPNQPOFOU
    

    View Slide

12. ઃఆϑΝΠϧ
    w ઃఆ༻ͷͭͷKTPOϑΝΠϧ͕ඞཁ
    w NBOJGFTUKTPOWJTVBMMJ[BUJPOͷ৘ใΛهड़͢Δ
    w \೚ҙͷ໊લ^KTPO%BUB4UVEJPͷσʔλͷରԠؔ܎Λઃ
    ఆ͢Δ
    

    View Slide

13. 
    NBOJGFTUKTPO
    
    σʔλϙʔλϧ্ͷΩϟογϡΛP⒎ɻ
    มߋͷ֬ೝ͕͠΍͘͢ͳΔ
    (PPHMF$MPVE4UPSBHFͷύεΛهࡌ
    ؒҧ͑Δͱɺ΋ͪΖΜಈ͔ͳ͍
    

    View Slide

14. 
    \೚ҙͷ໊લ^KTPO
    IUUQTEFWFMPQFSTHPPHMFDPNEBUBTUVEJPWJTVBMJ[BUJPOEFpOFDPOpH
    KTPOͰͷઃఆ͕ɺσʔλϙʔλϧ্ͷσʔλϥϕϧʹ൓ө͞ΕΔ
    

    View Slide

15. 
    \೚ҙͷ໊લ^KTPO
    IUUQTEFWFMPQFSTHPPHMFDPNEBUBTUVEJPWJTVBMJ[BUJPOEFpOFDPOpH
    TUZMF΋ಉ༷ʹઃఆͰ͖Δ
    

    View Slide

16. ։ൃ
    ETDDTVCTDSJCF5P%BUB DBMMCBDL \USBOTGPSNETDDPCKFDU5SBOTGPSN^
    
    ETDDTVCTDSJCF5P%BUBʹDBMMCBDLΛ౉͢ʂ
    

    View Slide

17. ։ൃ
    ETDDTVCTDSJCF5P%BUB DBMMCBDL \USBOTGPSNETDDPCKFDU5SBOTGPSN^
    
    σʔλϙʔλϧ͔ΒσʔλΛड͚औΔ
    DBMMCBDLؔ਺
    ඳը͸͜ͷதͰߦ͏ɻ
    Φϓγϣϯɻ͜͜Ͱ͸ड͚औΔσʔλͷ
    ϑΥʔϚοτΛࢦఆ͍ͯ͠Δ
    ETDDTVCTDSJCF5P%BUBʹDBMMCBDLΛ౉͢ʂ
    

    View Slide

18. 
    $BMMCBDLͷதͰඳըॲཧΛॻ͘
    IUUQTHJUIVCDPNNZPTIJSPEBUBTUVEJPDPNNVOJUZWJTVBMJ[BUJPOTBNQMFCMPCNBTUFSNZ7J[TSDJOEFYUT
    DSFBUF&MFNFOU/4ͰTWHΛ࡞੒
    ड͚औͬͨσʔλΛݩʹTWH಺ʹάϥϑ
    Λ௥Ճ
    %PDVNFOUCPEZBQQFOE$IJMEͰTWHΛ

    ૠೖ
    

    View Slide

19. 
    
    
    
    

    View Slide

20. 
    KTϑΝΠϧͷόϯυϧ
    
    ͕ͬͭΓ։ൃ͢ΔͳΒɺXFCQBDLͰόϯυϧ͢Δͷ΋͋ΓͰ͢
    IUUQTHJUIVCDPNHPPHMFEBUBTUVEJPETDPNQPOFOUCVJMETI
    

    View Slide

21. Ξοϓϩʔυ
    w (PPHMF$MPVE4UPSBHFʹҎԼͷϑΝΠϧΛΞοϓϩʔυ
    w NBOJGFTUKTPO
    w NZ7J[KTPO
    w NZ7J[KT
    w NZ7J[DTT ೚ҙ
    
    

    View Slide

22. σʔλϙʔλϧͰར༻
    w ࣮ԋ͠·͢
    w ࢀߟIUUQTEFWFMPQFSTHPPHMFDPNEBUBTUVEJP
    WJTVBMJ[BUJPOMPBEWJ[
    

    View Slide

23. w ࣮ԋͰ࢖༻ͨ͠αϯϓϧ
    5SFFNBQͷ࣮૷͸ɺͪ͜ΒΛࢀߟʹ͍ͯ͠·͢ɻIUUQCMPDLTPSHNCPTUPDL
    

    View Slide

24. ͜Ε΋Ͱ͖Δ
    w %KTͳͲͷϥΠϒϥϦ΋ར༻Ͱ͖Δɻ
    w 3FBDUͷαϯϓϧ΋͋ΔͷͰɺ7VF΋͍͚Δ͸ͣ
    

    View Slide

25. ۀ຿Ͱͷ࢖͑ͦ͏ͳγʔϯ
    w σβΠϯੑͷߴ͍ίϯϙʔωϯτΛ༻ҙ͓ͯ͘͜͠ͱͰɺ޿ใ༻ͷάϥϑ
    Λ։ൃऀҎ֎͕༻ҙͰ͖Δ
    w χʔζʹԊͬͨσʔλͷՄࢹԽ
    w ྫ͑͹ɺαʔϏεͷ໨తʹԊͬͨݻ༗ͷ,1*ͷՄࢹԽ
    

    View Slide

26. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide