A Genealogy of Cubism and Abstract Art — Semiotic

Name: Semiotic
Author: Elijah Meeks

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/examples/art-movement-genealogy

A Genealogy of Cubism and Abstract Art

A dynamic map of artistic influence inspired by the diagram from Alfred H. Barr Jr.'s 1936 dust jacket. Time provides the vertical structure; graph relationships and collision constraints determine the horizontal arrangement.

artists, movements, and ideas

directed influences

hand-authored x/y positions

Automatic chronological network

Trace an influenceHover a label to isolate its incoming and outgoing paths.

CUBISM AND ABSTRACT ART

Constraint, not tracing

The year attached to each entity fixes only its vertical coordinate. Horizontal coordinates begin from a deterministic spread, then settle through repeated edge attraction, boundary pressure, and rectangular collision resolution. The same layout can accept another node or influence without adding a bespoke coordinate.

Borrowing the cover's visual grammar

Movement nodes receive the cover's curved underline treatment. External sources and the machine aesthetic are boxed in red. Solid and dashed arrows retain the source graph's distinction, while the paired red year axes and paper-like ground make chronology part of the composition rather than separate chart furniture.

JSX

import { axisFixedForcePositions, networkHitTarget } from "semiotic/recipes" function chronologicalInfluenceLayout(ctx) { // year pins y; edge attraction + rect-aware collision relax x const { positioned } = axisFixedForcePositions(ctx.nodes, ctx.edges, ctx.dimensions.plot, { fixedAccessor: "year", fixedDomain: [1886, 1935], size: (d) => nodeGeometry(d), }) return { // networkHitTarget → transparent, keyboard-navigable, anchorable hit node sceneNodes: positioned.map(node => networkHitTarget({ x: node.x - node.width / 2, y: node.y - node.height / 2, width: node.width, height: node.height, datum: node, id: node.id, })), overlays: <InfluenceDiagram nodes={positioned} edges={ctx.edges} /> } } <NetworkCustomChart nodes={movements} edges={influences} layout={chronologicalInfluenceLayout} width={width} height={1010} enableHover />

Data adapted from Elijah Meeks'Edge Routing Issueblock. Visual direction follows the supplied cover of Cubism and Abstract Art; dates are encoded as data and positions are generated at render time.