VisQuill logoVisQuill

Developers

VisQuill GDK developer guide

How the GDK works, one idea at a time: reactive values, shapes and visuals, and how a change flows through a graphic. Every figure is live, so drag things around as you read.

  1. 1Your first graphicInstall the GDK, create a graphic in a div, add two draggable handles and a line between them, and style it with CSS.
  2. 2How VisQuill thinksThe model behind every VisQuill graphic in one page - reactive objects, relationships between them, and what happens when one changes.
  3. 3Values and pointsThe reactive values of the GDK - numbers, flags, texts, objects, points and pins - and where plain numbers and [x, y] arrays are enough.
  4. 4Shapes and visualsShapes as lists of points, sharing points as the simplest relationship, shapes that helpers fill in, and how visuals are styled and stacked.
  5. 5Reacting to changeHow Reactive.do connects code to the objects it reads, what counts as a change, and the rules that keep a graphic consistent.
  6. 6AttachReady-made relationships between points and shapes - a bar standing on a line, a label above a bar - that VisQuill keeps true, and that chain.
  7. 7Groups and coordinate systemsLayers as coordinate systems - build a part around its own origin, then move, turn and scale it through its anchor - plus visibility, masks and disposing.
  8. 8Geometry helpersThe one pattern all geometry helpers share, and a map of what they can do - measure, place, construct, transform, outline, fit - with pointers into the API reference.
  9. 9InteractionHandles, DOM events that change values, changing the look with style directives, and viewports with pan and zoom.
  10. 10AnimationAnimation as one more writer of a value - eased transitions, following a moving target, timing and sequences - and what that means for everything that depends on the value.
  11. 11TextLabels as pins with a text, placing and turning them, text that follows a path, and styling text with CSS.
  12. 12Styling in depthHow class names are composed from prefixes, theming one drawing in several ways, what VisQuill writes into the SVG itself, and when inline styles are the right tool.
  13. 13PitfallsA checklist of the mistakes that are easy to make with the GDK, sorted by what you see, each with the fix and a link to the explanation.