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.

26
artists, movements, and ideas
50
directed influences
0
hand-authored x/y positions
Automatic chronological network
Trace an influenceHover a label to isolate its incoming and outgoing paths.
Skip to data table
Red boxes denote external or technological influences; black arcs denote artists and movements. Horizontal positions are computed from graph attraction and label collision constraints.
CUBISM AND ABSTRACT ART

How the layout is constrained

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 directly into the composition.

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.