https://github.com/graphiquejs/graphique
An interactive visualization system for React based on the Grammar of Graphics
https://github.com/graphiquejs/graphique
charts d3 data-visualization grammar-of-graphics react
Last synced: 5 months ago
JSON representation
An interactive visualization system for React based on the Grammar of Graphics
- Host: GitHub
- URL: https://github.com/graphiquejs/graphique
- Owner: graphiquejs
- License: mit
- Created: 2020-07-12T04:05:42.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-12-11T22:28:39.000Z (about 1 year ago)
- Last Synced: 2024-12-14T14:04:05.366Z (about 1 year ago)
- Topics: charts, d3, data-visualization, grammar-of-graphics, react
- Language: TypeScript
- Homepage: https://graphique.dev
- Size: 7.29 MB
- Stars: 14
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
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.
```sh
npm install
```
Then build the individual packages.
```sh
npm run build
```
### Testing
```sh
npm test
```
#### Run only some tests
For example, you can also choose to run only some tests with things like:
```sh
# 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:
```sh
npm run demo
```
### Publishing and releasing
Use `npm run release` to publish and release new version(s) of package(s).