Isotypify

Create isotype visualizations in your browser — no coding required — or embed them in your own Observable notebooks.

Inspired by Otto and Marie Neurath's ISOTYPE system, built with Quarto, D3.js, and Observable JS.

Live: schmoigl.github.io/isotypify · Observable Notebook

Web editor

Open schmoigl.github.io/isotypify in your browser. Configure rows, colors, glyph shapes, and figure counts with the interactive controls, then download the result as a PNG — no installation needed.

A data-driven demo using Austrian time-use survey data is available at /demo.

Observable / code usage

Import makeIsoline from the Observable notebook to use it in your own notebooks:

import {makeIsoline} from "@schmoigl/isotypify-your-data"

makeIsoline({
  persPerLineValue: 20,
  data: [
    {
      key: "Women",
      value: 0.75,
      shapes: "abcdefg",
      fillHighlight: "#D62300",
      fillNormal: "#F5EBDC"
    }
  ]
})

Local development

git clone https://github.com/schmoigl/isotypify.git
cd isotypify
quarto preview

Technologies

• Quarto — publishing system with Observable JS integration
• D3.js — data handling and layout
• Isotype Font — 234+ pictographic glyphs by Ric Stephens
• Jost — headings and body text

Acknowledgements

• Isotype font by Ric Stephens
• Based upon implementation by Basile Simon's ISOTYPE sketch
• AK Wien for inspiring this visualization by issuing this call

---

Maintained by: @schmoigl | Organization: WIFO