Rédigez vos visualisations plus rapidement avec dscc-gen
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le flux de travail typique pour voir les changements dans la visualisation de votre communauté est de
importez vos fichiers dans GCS, puis actualisez votre rapport Looker Studio. Cela fonctionne,
mais cela signifie que vous pouvez passer
beaucoup de temps à attendre avant de voir les modifications. dscc-gen
permet au workflow de voir immédiatement les modifications apportées au code de visualisation, ce qui réduit
le temps nécessaire pour rédiger
une visualisation de la communauté.
dscc-gen est fourni avec un ensemble de données local par défaut qui n'est probablement pas représentatif.
des données que vous
souhaitez visualiser. Pour mettre à jour cet ensemble de données en fonction de vos besoins:
Copiez le contenu de la visualisation dans scripts/data/localData.js. Ce
les données seront utilisées
lorsque vous développerez en local.
Scripts
Les scripts suivants sont disponibles pour les projets de visualisation créés avec
dscc-gen
Commande
Action
npm run start
Démarrez le serveur local et prévisualisez votre
visualisation
npm run update_message
Mettez à jour le message à l'aide de la propriété objectFormat.
npm run build:dev
Créer des fichiers de ./src dans ./build avec
mise en cache désactivée.
npm run push:dev
Copiez les fichiers de build dans votre bucket dev.
npm run build:prod
Créer des fichiers de ./src dans ./build avec
mise en cache activée.
npm run push:prod
Copiez les fichiers de build dans votre prod
bucket.
La commande update_message utilise par défaut la valeur objectFormat. Pour utiliser la
tableFormat, modifiez les paramètres du script update_message dans
package.json de -f object à -f table.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/25 (UTC).
[null,null,["Dernière mise à jour le 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/)"]]
