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

To start working on Graphique, first install the necessary dependencies for the monorepo.

npm install

Then build the individual packages.

npm run build

npm test

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

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

The source for the docs site is located in ./docs.

After building the individual packages, scaffold and generate inputs for the docs site from the project's root.

npm run generate:docs

To start the docs site locally:

npm run docs:start

Typecheck:

npm run typecheck:docs

To build the docs site:

npm run docs:build

Use npm run release to publish and release new version(s) of package(s).