Typewriter

Typewriter draws graphs as an office typed them: manila paper, a title in underlined capitals, a grid of typed hyphens, and every shape typed on the grid a typewriter moves on.

Typewriter ships as its own package, @graphysdk/theme-typewriter, still on 0.x. A minor release may change its look, so pin a caret range (^0.1.0) to take only patches. Tell us what works and what doesn’t on Discord.

Install

npm install @graphysdk/theme-typewriter

Its peer dependencies are @graphysdk/react and React 19. Pass the theme to createGraphyKit and import its fonts once:

import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
import { typewriter } from '@graphysdk/theme-typewriter';
import '@graphysdk/theme-typewriter/fonts.css';

const kit = createGraphyKit({ theme: typewriter });

Every graph drawn through kit.GraphProvider takes the theme. The spec is written as usual and names no theme:

const spec = kit.pipe(
  kit.createSpec({ x: 'quarter', y: 'revenue', color: 'region' }),
  kit.geom.bar({ position: 'dodge' }),
  kit.scale.x(),
  kit.scale.y()
);

<kit.GraphProvider spec={spec} data={data}>
  <GraphRenderer />
</kit.GraphProvider>;

Without a kit, pass the theme to the provider instead: <GraphProvider theme={typewriter}>. The provider reads the theme once, when it mounts. To switch themes, remount the provider, for example with a React key.

What the theme decides

Part	What Typewriter sets
Stylesheet	Manila paper, a grid of typed hyphens, a line ruled down the left of the plot, notes typed onto the page with no box
Colors	The two colors of the ribbon, black and red, then carbon blue, pencil gray, stamp green and duplicator violet, for groups, and a ramp from a pale manila to black
Config	Values on the left
Geoms	Bars as blocks of X’s closed at the value by underscores; pies, roses and areas ruled round and shaded in typed slashes; lines ruled through an x at each reading; points as typed o’s
Color scheme	Light, whatever `colorScheme` the provider is given

Changing the look of one graph

A spec’s own styles(), scales and config() sit above the theme. This graph keeps the paper and types its groups in the ribbon’s black and red only:

kit.pipe(spec, kit.scale.color.discrete({ range: ['#1F1B16', '#B3271E'] }));

The theme is drawn for a graph about 600 pixels wide. style.graph({ textScale }) scales its type for a larger or smaller one.

With a geom package

Typewriter repaints the built-in geoms only. A geom from a package, such as the dumbbell, keeps its own shapes and is drawn in the theme’s colors and type.

import { dumbbell } from '@graphysdk/geom-dumbbell';

const kit = createGraphyKit({ theme: typewriter, plugins: [dumbbell] });

Fonts

fonts.css loads Special Elite from Google Fonts. To host the font yourself, leave the import out and load a family named Special Elite before the first graph is drawn. The face has one weight, and the theme sets every label in it.

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Install

What the theme decides

Changing the look of one graph

With a geom package

Fonts

​Install

​What the theme decides

​Changing the look of one graph

​With a geom package

​Fonts

Install

What the theme decides

Changing the look of one graph

With a geom package

Fonts