Mascot.js

Mascot, short for Manipulable Semantic Components, is a procedural data visualization framework. Inspired by graphic design tools such as Figma and Adobe XD, Mascot helps you create expressive charts by manipulating graphical objects with data.

Mascot provides high-level abstractions for both the structures of a visualization and the procedures to generate the visualization:

  • Structures are defined through semantic components such as mark, glyph, collection, layout, and encoding;
  • Procedures are expressed in terms of operations that manipulate the semantic components, e.g., repeat, divide, and densify

Graphics-Centric

Graphical objects are first-class citizens. Think in terms of their properties, transformations, layouts and constraints.

Procedural Syntax

Apply a series of operations to generate a visualization. Ability to inspect the visualization components after any step.

Flexible Rendering

Visualization logic decoupled from rendering. Choose your preferred renderer: SVG or WebGL.