API Index

Charming offers a declarative language for drawing shapes from data on Canvas, WebGL and the terminal, and a set of helpers for working with SVG, Canvas, HTML and text directly. They can be used together or independently.

Charming Core

Drawing shapes from data.

Charming Flow

Bind data to shapes and render them.

• cm.flow — create a root flow.
• flow.renderer — get or set the renderer.
• flow.render — draw the appended shapes.
• flow.data — put data into a flow.
• flow.datum — put a single datum into a flow.
• flow.append — append a shape for each datum.
• flow.process — prepare the data.
• flow.transform — derive attribute values.
• flow.call — call a function with the flow.
• cm.canvas — create a Canvas renderer.

Charming Shape

Shapes to append to flows.

• cm.point — dots.
• cm.link — straight lines between two points.
• cm.line — a line through the data points.
• cm.rect — rectangles.
• cm.circle — circles.
• cm.triangle — triangles.
• cm.polygon — polygons.
• cm.path — paths from path commands.
• cm.text — text.
• cm.group — translate and rotate child shapes.
• cm.clear — clear the background.
• cm.constant — pass an option to a composite shape unchanged.

Charming Process

Prepare data before appending shapes.

• cm.each — call a function for each datum.
• cm.eachRight — like each, from the last datum to the first.
• cm.filter — keep the matching data.
• cm.map — map each datum to a new one.
• cm.push — append a datum to each group.
• cm.derive — add fields to copies of the data.

Charming Transform

Derive attribute values after appending shapes.

• cm.mapAttrs — map attributes with scales.
• cm.mapPosition — map positions to the size of the renderer.

Charming Scale

Map abstract values to visual values.

• cm.scaleLinear — a linear scale.
• cm.scaleSqrt — a square-root scale.
• cm.scaleLog — a logarithmic scale.
• cm.scaleOrdinal — a scale for discrete values.

Charming WebGL

Draw many shapes with WebGL.

• cm.webgl — create a WebGL renderer.
• cm.glsl — define an attribute as a GLSL function.

Charming Terminal

Draw ASCII art.

• cm.terminal — create a terminal renderer.
• cm.figlet — draw text as an ASCII-art banner.

Charming DOM

Create and manipulate DOM elements.

• cm.svg — SVG via tagged template literal.
• cm.html — HTML via tagged template literal.
• cm.attr — get, set, or remove attributes (including styles and events) on a node.

Charming Canvas

Set up a 2D canvas and draw shapes.

• cm.context2d — create a 2D canvas rendering context (size, DPR, optional container).
• cm.cssFont — build a CSS font shorthand string (canvas, DOM, or D3).
• cm.strokeLine — stroke a line between two points.
• cm.fillCircle — fill a circle.
• cm.strokeCircle — stroke a circle.
• cm.strokeEllipse — stroke an axis-aligned ellipse.
• cm.fillEllipse — fill an axis-aligned ellipse.

Charming Path

Build SVG path strings for common shapes.

• cm.pathLine — open segment M … L …
• cm.pathCircle — closed circle.
• cm.pathRect — closed rectangle.
• cm.pathEllipse — closed axis-aligned ellipse.
• cm.pathPolygon — closed path through [x, y] points.
• cm.pathContext — a d3-path context that records path commands as arrays, for cm.path.

Charming Pretext

Text measurement and path-bound layout on top of Pretext.

• cm.prepare — prepare a string with font options for Pretext.
• cm.layoutTextInPath — flow prepared text through a closed SVG path.
• cm.clearPrepareCache — clear memoized prepare and Pretext caches.

Charming Vector

2D vectors for simulating physical laws.

• cm.vec — create a vector.
• cm.vecFromAngle — the unit vector at an angle.
• cm.vecRandom — a unit vector in a random direction.
• cm.vecAdd, vecSub, vecMult, vecDiv — arithmetic.
• cm.vecMag, vecNorm, vecClamp — magnitude.
• cm.vecDist, vecDist2 — distance.
• cm.vecDot, vecCross, vecAngle — products and angle.
• vec.add, mag, norm, … — the same operations as methods, in place.

Charming Noise

Smooth random values for computational art.

• cm.noise — smooth, continuous random values (Perlin noise).