Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Data Studio Community Visualizationを触ってみた

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

m-yoshiro

August 20, 2019
Tweet

More Decks by m-yoshiro

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. ެࣜͷαϯϓϧ

    View full-size slide

  7. ࣄલ४උ
    w (PPHMF$MPVE4UPSBHF

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    IUUQTHJUIVCDPNHPPHMFEBUBTUVEJPETDPNQPOFOU

    View full-size slide

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

    View full-size slide


  12. NBOJGFTUKTPO

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

    View full-size slide


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

    View full-size slide


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

    View full-size slide

  15. ։ൃ
    ETDDTVCTDSJCF5P%BUB DBMMCBDL \USBOTGPSNETDDPCKFDU5SBOTGPSN^

    ETDDTVCTDSJCF5P%BUBʹDBMMCBDLΛ౉͢ʂ

    View full-size slide

  16. ։ൃ
    ETDDTVCTDSJCF5P%BUB DBMMCBDL \USBOTGPSNETDDPCKFDU5SBOTGPSN^

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

    View full-size slide


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

    ૠೖ

    View full-size slide


  18. KTϑΝΠϧͷόϯυϧ

    ͕ͬͭΓ։ൃ͢ΔͳΒɺXFCQBDLͰόϯυϧ͢Δͷ΋͋ΓͰ͢
    IUUQTHJUIVCDPNHPPHMFEBUBTUVEJPETDPNQPOFOUCVJMETI

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide