Data Studio Community Visualizationを触ってみた

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

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

Transcript

1. ՆٳΈͷ॓୊
   %BUB
   4UVEJP
   $PNNVOJUZ
   7JTVBMJ[BUJPOΛ৮ͬͯΈͨ 'VLVPLB
   +4 দຊ
   ๕࿠
   !CFOOLZPVHJSBJ
2. দຊ
   ๕࿠
   σβΠφʔ
   (.0ϖύϘגࣜձࣾ !CFOOLZPVHJSBJ
3. (PPHMF
   σʔλϙʔλϧͰ
   ΦϦδφϧͷάϥϑΛ࡞੒͢Δ ͜ͷ࿩ͷ಺༰
4. (PPHMF
   σʔλϙʔλϧ w (PPHMF
   4IFFU΍ΞφϦςΟΫε౳ͷσʔλ Λݩʹɺάϥϑ΍දͰՄࢹԽ͕ߦ͑Δɻ
   w ӈਤͷΑ͏ͳμογϡϘʔυͷ࡞੒͕Ͱ͖ Δɻ
5. (PPHMF
   %BUB
   4UVEJP
   $PNNVOJUZ
   7JTVBMJ[BUJPO w σʔλϙʔλϧͰಠࣗͷάϥϑΛ௥ՃͰ͖ Δػೳ
   w +4ͰಠࣗͷάϥϑΛ࡞੒Ͱ͖Δ https://developers.google.com/datastudio/visualization/
6. ެࣜͷαϯϓϧ
7. ։ൃ
8. ࣄલ४උ w (PPHMF
   $MPVE
   4UPSBHF
 $PNNVOJUZ
   7JTVBMJ[BUJPOͷΞοϓϩʔυઌ
   w (PPHMF
   σʔλϙʔλϧͷϓϩδΣΫτ
9. IUUQTDPEFMBCTEFWFMPQFSTHPPHMFDPNDPEFMBCTDPNNVOJUZWJTVBMJ[BUJPO IMKB ެࣜͷνϡʔτϦΞϧΛࢀߟʹਐΊͯ·͢
10. खॱ  ։ൃͷ४උ
     ઃఆϑΝΠϧ
     ։ൃ
     Ξοϓϩʔυ
     σʔλϙʔλϧͰͷར༻
11. 
    ։ൃͷ४උ w EDDPNQPOFOU
    ͱ͍͏ެࣜͷϥΠϒϥϦʔΛJOTUBMM͢Δ
 IUUQTHJUIVCDPNHPPHMFEBUBTUVEJPETDPNQPOFOU
12. 
    ઃఆϑΝΠϧ w ઃఆ༻ͷͭͷKTPOϑΝΠϧ͕ඞཁ
    w NBOJGFTUKTPO
    
    WJTVBMMJ[BUJPOͷ৘ใΛهड़͢Δ
    w \
    ೚ҙͷ໊લ
    ^KTPO
    
    %BUB
    4UVEJPͷσʔλͷରԠؔ܎Λઃ ఆ͢Δ
13. 
    NBOJGFTUKTPO
    σʔλϙʔλϧ্ͷΩϟογϡΛP⒎ɻ
    มߋͷ֬ೝ͕͠΍͘͢ͳΔ (PPHMF
    $MPVE
    4UPSBHFͷύεΛهࡌ
    ؒҧ͑Δͱɺ΋ͪΖΜಈ͔ͳ͍
14. 
    \
    ೚ҙͷ໊લ
    ^KTPO IUUQTEFWFMPQFSTHPPHMFDPNEBUBTUVEJPWJTVBMJ[BUJPOEFpOFDPOpH KTPOͰͷઃఆ͕ɺσʔλϙʔλϧ্ͷσʔλϥϕϧʹ൓ө͞ΕΔ
15. 
    \
    ೚ҙͷ໊લ
    ^KTPO IUUQTEFWFMPQFSTHPPHMFDPNEBUBTUVEJPWJTVBMJ[BUJPOEFpOFDPOpH TUZMF΋ಉ༷ʹઃఆͰ͖Δ
16. 
    ։ൃ ETDDTVCTDSJCF5P%BUB DBMMCBDL
    \
    USBOTGPSN
    ETDDPCKFDU5SBOTGPSN
    ^  ETDDTVCTDSJCF5P%BUBʹDBMMCBDLΛ౉͢ʂ
17. 
    ։ൃ ETDDTVCTDSJCF5P%BUB DBMMCBDL
    \
    USBOTGPSN
    ETDDPCKFDU5SBOTGPSN
    ^  σʔλϙʔλϧ͔ΒσʔλΛड͚औΔ
    DBMMCBDLؔ਺
    ඳը͸͜ͷதͰߦ͏ɻ Φϓγϣϯɻ͜͜Ͱ͸ड͚औΔσʔλͷ
    ϑΥʔϚοτΛࢦఆ͍ͯ͠Δ ETDDTVCTDSJCF5P%BUBʹDBMMCBDLΛ౉͢ʂ
18. 
    $BMMCBDLͷதͰඳըॲཧΛॻ͘ IUUQTHJUIVCDPNNZPTIJSPEBUBTUVEJPDPNNVOJUZWJTVBMJ[BUJPOTBNQMFCMPCNBTUFSNZ7J[TSDJOEFYUT  DSFBUF&MFNFOU/4ͰTWHΛ࡞੒
     ड͚औͬͨσʔλΛݩʹTWH಺ʹάϥϑ Λ௥Ճ
     %PDVNFOUCPEZBQQFOE$IJMEͰTWHΛ
 ૠೖ
19. 
      
20. 
    KTϑΝΠϧͷόϯυϧ
    ͕ͬͭΓ։ൃ͢ΔͳΒɺXFCQBDLͰόϯυϧ͢Δͷ΋͋ΓͰ͢ IUUQTHJUIVCDPNHPPHMFEBUBTUVEJPETDPNQPOFOUCVJMETI
21. 
    Ξοϓϩʔυ w (PPHMF
    $MPVE
    4UPSBHFʹҎԼͷϑΝΠϧΛΞοϓϩʔυ
    w NBOJGFTUKTPO
    w NZ7J[KTPO
    w NZ7J[KT
    w NZ7J[DTT ೚ҙ
22. 
    σʔλϙʔλϧͰར༻ w ࣮ԋ͠·͢
    w ࢀߟ
    IUUQTEFWFMPQFSTHPPHMFDPNEBUBTUVEJP WJTVBMJ[BUJPOMPBEWJ[
23. w ࣮ԋͰ࢖༻ͨ͠αϯϓϧ 5SFFNBQͷ࣮૷͸ɺͪ͜ΒΛࢀߟʹ͍ͯ͠·͢ɻ
    IUUQCMPDLTPSHNCPTUPDL
24. ͜Ε΋Ͱ͖Δ w %KTͳͲͷϥΠϒϥϦ΋ར༻Ͱ͖Δɻ
    w 3FBDUͷαϯϓϧ΋͋ΔͷͰɺ7VF΋͍͚Δ͸ͣ
25. ۀ຿Ͱͷ࢖͑ͦ͏ͳγʔϯ w σβΠϯੑͷߴ͍ίϯϙʔωϯτΛ༻ҙ͓ͯ͘͜͠ͱͰɺ޿ใ༻ͷάϥϑ Λ։ൃऀҎ֎͕༻ҙͰ͖Δ
    w χʔζʹԊͬͨσʔλͷՄࢹԽ
    w ྫ͑͹ɺαʔϏεͷ໨తʹԊͬͨݻ༗ͷ,1*ͷՄࢹԽ
26. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠