Write your visualizations faster with dscc-gen

The typical workflow for seeing changes in your community visualization is to upload your files to GCS, then refresh your Looker Studio report. This works, but means that you can spend a lot of time waiting to see changes. dscc-gen enables a workflow to immediately see your visualization code changes, reducing the time it takes to write a community visualization.

To get started, make sure npm 5.2.0 or later and gsutil are installed. Then, run:

npx @google/dscc-gen viz

First Time Configuration

dscc-gen comes with a default local dataset that's probably not representative of the data you want to visualize. To update this dataset to meet your needs:

  1. Update your config at src/index.json.
  2. Run npm run update_message. This deploys a visualization to your dev bucket that displays the message in a format that's easy to copy.
  3. Create a new report and connect to a dataset that's representative of the data you want to visualize.
  4. Add a community visualization using your dev bucket as your component ID.
  5. Copy the contents of the visualization to scripts/data/localData.js. This data will be used when you develop locally.

Scripts

The following scripts are available for visualization projects created with dscc-gen.

Command Action
npm run start Start the local server and preview your visualization
npm run update_message Update the message using the objectFormat
npm run build:dev Build files from ./src into ./build with caching disabled.
npm run push:dev Copy the files from build to your dev bucket.
npm run build:prod Build files from ./src into ./build with caching enabled.
npm run push:prod Copy the files from build to your prod bucket.

The update_message command defaults to the objectFormat. To use the tableFormat, edit the parameters in the update_message script in package.json from -f object to -f table.

Codelab

To learn how to use the tooling, review the dscc-gen codelab.

dscc-gen codelab