Foam Amsterdam

Foam is a photography museum on the Keizersgracht in Amsterdam. It is also a quarterly magazine, a print gallery, a library, a podcast series and a global programme for emerging photographers. The platform had to hold all of it in one place without flattening any of it into the same kind of thing.

Built at Build in Amsterdam with a team of designers, developers and project managers.

Exhibitions, magazine features, podcast episodes and video sit in the same system. The distinction the interface keeps is between a work and everything written about it — photography gets the full width of the window and no crop; text arranges itself around that constraint rather than the other way round.

Connections is a D3 visualisation of the thematic relationships between stories, and it is a navigation device rather than a chart. An archive like this has no natural hierarchy: an exhibition, a podcast episode and a magazine feature can share a subject and nothing else, so chronology and category both fail as ways in. The graph lets a reader move sideways through the collection, following a theme instead of a date.

The rendering came out of an experiment from a year earlier. D3 owns the data and runs the simulation; React renders the nodes; the tick handler writes positions straight into attributes rather than through React state, so the physics never touches the render loop. The nodes are real DOM inside foreignObject, an SVG element that lets ordinary markup live in the graph — which means the components inherit the graph’s transforms instead of being positioned on top of it and kept in sync. Packaged separately as react-d3-force-distance.

The museum building closed for renovation. The platform stayed open throughout.