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).