Menulis visualisasi Anda lebih cepat dengan dscc-gen
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Alur kerja umum untuk melihat perubahan dalam visualisasi komunitas Anda adalah
upload file ke GCS, lalu muat ulang laporan Looker Studio Anda. Bisa,
tetapi berarti Anda dapat menghabiskan
banyak waktu menunggu untuk melihat perubahan. dscc-gen
memungkinkan alur kerja untuk segera melihat perubahan kode visualisasi Anda, sehingga
waktu yang diperlukan untuk menulis
visualisasi komunitas.
dscc-gen dilengkapi dengan set data lokal default yang mungkin tidak representatif
dari data yang ingin Anda visualisasikan. Untuk memperbarui {i>dataset<i} ini agar sesuai dengan kebutuhan Anda:
Bangun file dari ./src ke ./build dengan
caching dinonaktifkan.
npm run push:dev
Salin file dari build ke bucket dev Anda.
npm run build:prod
Bangun file dari ./src ke ./build dengan
mengaktifkan cache.
npm run push:prod
Salin file dari build ke prod Anda
direktori VM dengan bucket.
Perintah update_message ditetapkan secara default ke objectFormat. Untuk menggunakan
tableFormat, edit parameter dalam skrip update_message di
package.json dari -f object hingga -f table.
Codelab
Untuk mempelajari cara menggunakan alat ini, tinjau codelab dscc-gen.
[null,null,["Terakhir diperbarui pada 2025-07-25 UTC."],[[["\u003cp\u003e\u003ccode\u003edscc-gen\u003c/code\u003e accelerates community visualization development in Looker Studio by enabling immediate visualization of code changes.\u003c/p\u003e\n"],["\u003cp\u003eTo utilize \u003ccode\u003edscc-gen\u003c/code\u003e, ensure npm 5.2.0 or later and gsutil are installed, then execute the command \u003ccode\u003enpx @google/dscc-gen viz\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eThe initial setup involves configuring the local dataset, deploying a visualization to your \u003ccode\u003edev\u003c/code\u003e bucket, and connecting to a representative dataset in Looker Studio.\u003c/p\u003e\n"],["\u003cp\u003eVarious scripts are provided for development, including \u003ccode\u003estart\u003c/code\u003e, \u003ccode\u003eupdate_message\u003c/code\u003e, \u003ccode\u003ebuild:dev\u003c/code\u003e, \u003ccode\u003epush:dev\u003c/code\u003e, \u003ccode\u003ebuild:prod\u003c/code\u003e, and \u003ccode\u003epush:prod\u003c/code\u003e, each serving specific functions in the workflow.\u003c/p\u003e\n"],["\u003cp\u003eA detailed codelab is available to guide users through the process of using the \u003ccode\u003edscc-gen\u003c/code\u003e tooling.\u003c/p\u003e\n"]]],[],null,["# Write your visualizations faster with dscc-gen\n\nThe typical workflow for seeing changes in your community visualization is to\n[upload](/looker-studio/visualization/upload-viz) your files to GCS, then refresh your Looker Studio report. This works,\nbut means that you can spend a lot of time waiting to see changes. [dscc-gen](https://github.com/googledatastudio/dscc-gen)\nenables a workflow to immediately see your visualization code changes, reducing\nthe time it takes to write a community visualization.\n\nTo get started, make sure [npm 5.2.0 or later](https://www.npmjs.com/get-npm) and [gsutil](https://cloud.google.com/storage/docs/gsutil) are installed. Then,\nrun: \n\n npx @google/dscc-gen viz\n\n| **Note:** If you prefer to use yarn, pass `--yarn` as an argument.\n\nFirst Time Configuration\n------------------------\n\n`dscc-gen` comes with a default local dataset that's probably not representative\nof the data you want to visualize. To update this dataset to meet your needs:\n\n1. [Update your config](/looker-studio/visualization/config-reference) at `src/index.json`.\n2. Run `npm run update_message`. This deploys a visualization to your `dev` bucket that displays the [message](/looker-studio/visualization/library-reference) in a format that's easy to copy.\n3. [Create a new report](https://lookerstudio.google.com) and connect to a dataset that's representative of the data you want to visualize.\n4. [Add a community visualization](/looker-studio/visualization/load-viz) using your `dev` bucket as your component ID.\n5. Copy the contents of the visualization to `scripts/data/localData.js`. This data will be used when you develop locally.\n\nScripts\n-------\n\nThe following scripts are available for visualization projects created with\n`dscc-gen`.\n\n| Command | Action |\n|--------------------------|--------------------------------------------------------------------------------------------------------------------|\n| `npm run start` | Start the local server and preview your visualization |\n| `npm run update_message` | Update the message using the [objectFormat](/looker-studio/visualization/library-reference#objectformat_reference) |\n| `npm run build:dev` | Build files from `./src` into `./build` with [caching](/looker-studio/visualization/caching) disabled. |\n| `npm run push:dev` | Copy the files from `build` to your `dev` bucket. |\n| `npm run build:prod` | Build files from `./src` into `./build` with [caching](/looker-studio/visualization/caching) enabled. |\n| `npm run push:prod` | Copy the files from `build` to your `prod` bucket. |\n\n| **Caution:** Before you build \\& deploy your viz, make sure you change `const LOCAL=` in `src/index.js` to `false`.\n\nThe `update_message` command defaults to the [objectFormat](/looker-studio/visualization/library-reference#objectformat_reference). To use the\n[tableFormat](/looker-studio/visualization/library-reference#tableformat_reference), edit the parameters in the `update_message` script in\n`package.json` from `-f object` to `-f table`.\n\nCodelab\n-------\n\nTo learn how to use the tooling, review the dscc-gen [codelab](https://codelabs.developers.google.com/codelabs/community-visualization-dscc-gen/).\n\n[](https://codelabs.developers.google.com/codelabs/community-visualization-dscc-gen/)"]]
