Separating treemap layout calculation from rendering makes the algorithm reusable across any graphics library

A clean architecture separates data-to-coordinates from coordinates-to-pixels. The treemap-squarify library returns an ordered array of cartesian [x1,y1,x2,y2] coordinates matching the input data; the caller then draws those boxes with any graphics library. This decoupling means the same algorithm feeds Raphael SVG, Canvas, WebGL, or a custom renderer without changing the layout code. The principle generalises: generative systems that compute structure separately from rendering are easier to port, test, and style. The contrast is with coupled implementations that call draw() directly from inside the layout algorithm.

Examples

treemap-squarify.js returns coordinate arrays; treemap-raphael.js renders them. Swap treemap-raphael.js for a p5.js renderer — the layout code is unchanged. Use this pattern when you want to render the same treemap in both canvas and SVG.

Assessment

Describe two concrete benefits of keeping layout and rendering as separate functions. Name a scenario where coupling them would cause a problem when switching graphics libraries.