An interactive visualization system for React based on the Grammar of Graphics
An interactive visualization system for React based on the Grammar of Graphics
Graphique
Graphique allows you to create flexible and reusable interactive visualizations in a structured way by:
- mapping data properties to visual properties — using aesthetics specified by scales (how to draw)
- composing or layering relatively simple graphical objects or geometries (what to draw)
- using reasonable defaults that can be configured with components for flexibility
- updating based on changes in your UI’s state
Examples/Docs
Examples and docs are available at https://graphique.dev.
Development
Get started with local development
To start working on Graphique, first install the necessary dependencies for the monorepo.
npm install
Then build the individual packages.
npm run build
Testing
npm test
Run only some tests
For example, you can also choose to run only some tests with things like:
# run only GeomLine tests
npm test GeomLine
# run only Tooltip tests (multiple Geoms)
npm test Tooltip
Demo local packages
For a development sandbox / place to try out new package changes locally, there’s a Vite app in ./demo.
You can start the demo app with:
npm run demo
Publishing and releasing
Use npm run release to publish and release new version(s) of package(s).