dscc-gen ile görselleştirmelerinizi daha hızlı yazın
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Topluluk görselleştirmenizdeki değişiklikleri görmek için genellikle
Dosyalarınızı GCS'ye yükleyin, ardından Looker Studio raporunuzu yenileyin. Bu şekilde çalışır,
Ancak değişiklikleri görmek için çok beklemeniz gerekebileceği anlamına gelir. dscc-gen
görselleştirme kodu değişikliklerinizi anında görmenizi sağlayan bir iş akışı sağlar,
gereken süreyi ifade eder.
dscc-gen, verileri temsil etme olasılığı düşük olan bir varsayılan yerel veri kümesiyle geliyor
ayrıntılı bir şekilde
tanımlamalısınız. Bu veri kümesini ihtiyaçlarınızı karşılayacak şekilde güncellemek için:
[null,null,["Son güncelleme tarihi: 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/)"]]
