Graphics that hold together while people explore
The VisQuill GDK is a TypeScript library for interactive, geometry-based data visualization. Points, shapes and data values are connected to each other. When one of them changes, for example because someone drags a handle, everything connected to it updates.
How it works
Three building blocks
Every graphic made with the GDK combines the same three ingredients.
Reactive values
Points, shapes and values are nodes in a dependency graph. When one changes, the GDK updates everything that depends on it, without re-render calls.
Geometric primitives
Points, lines, circles and polygons share one geometric foundation, with tools for distances, angles and positions along a shape.
Declarative constraints
A rule like "this label stays next to that point" is declared once. The GDK keeps it in place as data changes and people drag, zoom and filter.
Fit
Where the GDK fits
For a bar chart on a dashboard, an established charting library gets you there faster. The GDK pays off when geometry, constraints and interaction are tied together: lenses that sum up the data beneath them, charts that make room for each other, profiles that follow the map.
A good fit
- Interactive tools and editors built on geometry
- Visualizations driven by constraints
- Exploration interfaces where elements depend on each other
- Data lenses and focus effects
- Animated explanatory graphics
Not a good fit
- Static charts with little interaction
- 3D graphics
- Rendering very large numbers of elements at high frame rates
- Simple animations without data behind them
What you get
One npm package, plus the Lab
@visquill/visquill-gdknpm · v1.0.2npm i @visquill/visquill-gdk- Reactive geometry primitives: points, shapes, values
- Declarative constraint system
- Scene graph with hierarchical transforms
- Built-in interaction and animation
- Computational geometry utilities
TypeScript-native
Complete type definitions and full tooling support.
Reactive core
Points, shapes, and values are reactive nodes; changes propagate through a dependency graph.
Web standards
Renders to SVG and is styled with CSS classes, so graphics can be inspected and themed like any other part of a web page.
The VisQuill Lab has 100+ examples and reusable blueprints, MIT licensed and free to use in any project.
Open the LabLicensing
Free to build with, licensed when you ship
Development, evaluation, and non-user-facing use are always free. Commercial, user-facing use is licensed by number of developers.
Free
€0 / yearPersonal, educational, open-source, research, non-commercial
Non-commercial use, including user-facing apps. Keeps the "Made with VisQuill" attribution label.
Freelancer
€500 / yearIndependent freelancers and sole traders
For working on your own account. Removes the attribution label.
Small
€1,500 / yearOrganisations, up to 5 developers
Removes the attribution label.
Additional developers
€300 / year eachFrom the 6th developer onward
Add developers to a Small licence one at a time as your team grows.
VisQuill Lab stays MIT regardless of tier. Early-adopter pricing is available for the first commercial licensees.
Gallery
Built with the GDK
Every visualization in the gallery is made with the GDK, from map lenses that sum up the data beneath them to election maps and trail profiles.
Next steps
Where to go next
Tutorials
Four projects built step by step. Drag the geometry, read the code and download each part as a standalone project.
Start a tutorial