API Access for Vizzes

VizHub Features
#1

You can access the code of public vizzes via API!

To use this API to sync your code in VizHub to your code in GitHub, see vite-export-template.

The API supports three formats:

  1. zip - download a .zip file containing the source files of the viz
  2. json - download a JSON representation of a viz including metadata
  3. vite - download a .zip file containing the source files of the viz and all vizzes that it imports from

How to Export a Viz using the API

To export the code of a viz, simply click “Export Code”, which will invoke the API to download a .zip file.

To access the API programmatically, consider the following viz URL:

That viz has the following URL:

https://vizhub.com/curran/8a17f8c0102e4b4c996be64fdb0bd30d

To access that viz as Zip, use the following URL:

https://vizhub.com/api/get-viz/curran/8a17f8c0102e4b4c996be64fdb0bd30d.zip

You can figure out this URL also by right-clicking on the “Export” button and copying the link:

image
image686×514 34 KB

To access that viz as JSON, use the following URL:

https://vizhub.com/api/get-viz/curran/8a17f8c0102e4b4c996be64fdb0bd30d.json

Benefits of API Access

If you want to incorporate code from VizHub into your projects, you can use the API to automate the export of files from a given viz into a subdirectory of your project. This allow you and your team to maintain a traditional codebase and secure deployment workflow for your larger project, and also use VizHub to host and collaborate on isolated visualization components (potentially using dummy data to keep your “real data” secure and out of the cloud-hosted platform).

One example workflow for how to use this API would be as follows:

  • Scaffold your project using a framework such as React, Vue or Svelte
  • Set it up to pull code for a visualization component from a subdirectory such as vizhub-export
  • Set up a script to your package.json that uses the API to automatically download the code from VizHub and extract it into the vizhub-export subdirectory
  • When you edit the viz in VizHub and want to incorporate the changes into your codebase, you can simply run the script
  • This could be incorporated into automated deployments/workflows such as GitHub actions as well

Example script in package.json:

{
  "scripts": {
    "vizhub-pull": "rm -rf src/vizhub-export && \
      curl -o vizhub-export.zip 'https://vizhub.com/api/get-viz/curran/3d67423b84a845019c17ca761b60b619.zip' && \
      unzip -o vizhub-export.zip -d src/vizhub-export && \
      rm vizhub-export.zip"
  }
}