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 Data 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 -- --format=object. This deploys a temporary 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 -- -format=object Update the message using the object format
npm run update_message -- -format=table Update the message using the table format
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.

Example workflow

To see an example of building a community visualization using the tooling, watch this video.