Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Um Änderungen in der Community-Visualisierung zu sehen,
laden Sie die Dateien in GCS hoch und aktualisieren Sie dann den Looker Studio-Bericht. Das funktioniert,
bedeutet aber, dass Sie viel Zeit damit verbringen können, auf Änderungen zu warten. dscc-gen
ermöglicht es einem Workflow, Änderungen am Visualisierungscode sofort zu sehen,
wie viel Zeit zum Schreiben einer Community-Visualisierung benötigt wird.
Vergewissern Sie sich zunächst, dass npm 5.2.0 oder höher und gsutil installiert sind. Gehen Sie dann so vor:
ausführen:
npx@google/dscc-genviz
Erstkonfiguration
dscc-gen enthält ein standardmäßiges lokales Dataset, das wahrscheinlich nicht repräsentativ ist.
der Daten, die Sie visualisieren möchten. So aktualisieren Sie dieses Dataset entsprechend Ihren Anforderungen:
Kopieren Sie den Inhalt der Visualisierung in scripts/data/localData.js. Dieses
Daten verwendet werden, wenn Sie lokal entwickeln.
Skripts
Die folgenden Skripts sind für Visualisierungsprojekte verfügbar, die mit
dscc-gen
Befehl
Aktion
npm run start
Starten Sie den lokalen Server und sehen Sie sich eine Vorschau des
Visualisierung
npm run update_message
Aktualisieren Sie die Nachricht mit dem Attribut objectFormat.
npm run build:dev
Dateien aus ./src in ./build erstellen mit
Caching ist deaktiviert.
npm run push:dev
Kopieren Sie die Dateien aus build in Ihren dev-Bucket.
npm run build:prod
Dateien aus ./src in ./build erstellen mit
Caching aktiviert.
npm run push:prod
Dateien von build in prod kopieren
Bucket.
Der Befehl update_message verwendet standardmäßig das objectFormat. So verwenden Sie die
tableFormat verwenden, bearbeiten Sie die Parameter im Skript update_message in
package.json von -f object bis -f table.
Codelab
Informationen zur Verwendung der Tools finden Sie im Codelab zu dscc-gen.
[null,null,["Zuletzt aktualisiert: 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/)"]]
