Data Studio Community Visualizationを触ってみた

C0e40025e5098e025a249b0cda428434?s=47 m-yoshiro
August 20, 2019

Data Studio Community Visualizationを触ってみた

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

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

C0e40025e5098e025a249b0cda428434?s=128

m-yoshiro

August 20, 2019
Tweet

Transcript

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

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

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

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

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

  6. ެࣜͷαϯϓϧ

  7. ։ൃ

  8. ࣄલ४උ w (PPHMF$MPVE4UPSBHF
 $PNNVOJUZ7JTVBMJ[BUJPOͷΞοϓϩʔυઌ w (PPHMFσʔλϙʔλϧͷϓϩδΣΫτ

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

  10. खॱ  ։ൃͷ४උ  ઃఆϑΝΠϧ  ։ൃ  Ξοϓϩʔυ 

    σʔλϙʔλϧͰͷར༻
  11. ։ൃͷ४උ w EDDPNQPOFOUͱ͍͏ެࣜͷϥΠϒϥϦʔΛJOTUBMM͢Δ
 IUUQTHJUIVCDPNHPPHMFEBUBTUVEJPETDPNQPOFOU

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

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

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

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

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

  17. ։ൃ ETDDTVCTDSJCF5P%BUB DBMMCBDL \USBOTGPSNETDDPCKFDU5SBOTGPSN^  σʔλϙʔλϧ͔ΒσʔλΛड͚औΔ 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$MPVE4UPSBHFʹҎԼͷϑΝΠϧΛΞοϓϩʔυ 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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠