Vite for VizHub exports
If you are using VizHub with hot reloading, you can use this template to "eject" out of VizHub and develop locally.
The example viz that is exported here is Parallel Coordinates Brushing Prototype. This example was chosen because it leverages the following features of VizHub that need to be reproduced using Vite and NPM workspaces:
- Importing across vizzes/packages (e.g.
import { observeResize } from '@curran/responsive-axes';) - Importing from CSV files (e.g.
import data from './data.csv';) - Responsiveness by measuring the parent
divwith ResizeObserver
To adapt this template to work with your own viz:
- Update the
vizhub-downloadscript to point to your viz - Run the
vizhub-pullscript whenever you want to get the latest out of VizHub - Update the NPM workspaces listed in
package.jsonto match your vizzes - Update the imports in
mainto point to your entry point
To run locally:
git clone https://github.com/curran/vite-d3-template.git
cd vite-d3-template
npm install
npm run dev
If it worked correctly, you should see your running viz appear!
This setup uses NPM workspaces, so the import syntax in VizHub works "out of the box" with no need for modification. You get a standard Vite project, so you can use the Vite build system to generate static assets for hosting.
One of the design goals of VizHub is to enable users to author portable code. One of the aspects of VizHub that was initially not portable at all was the "import from viz" feature. This lets users import code and data across vizzes. Now that the VizHub export API includes all imported vizzes in the exported files, and adds the name field to the package.json of each exported viz, it is finally possible to eject code out of VizHub and into an industry standard project setup using Vite and NPM workspaces.
See also the video of this being created initially.