Back to archive

Poisson Disc Generator

Observable ยท Oct 17, 2023

tool
stack: [observable, d3, poisson-disc, journalism tools]

Context

This notebook creates Poisson-disc point clouds for visual projects, with controls for rectangular and circular compositions that are common in newsroom graphics and explanatory pieces.

My role

  • Tool development
  • Frontend development

I designed and built the full Observable tool, including sampling logic, UI controls, neighbor-based selection, and export actions for production reuse.

Data and methodology

The rectangle mode combines Poisson sampling with a secondary Voronoi-based fill step to complete the requested point count while preserving spacing quality.

The circle mode uses a Poisson-disc sampler, Delaunay/Voronoi neighbors, and click interactions to highlight local point groups and generate selected clusters.

Key decisions

  • I exposed the key variables as form inputs (width, height, radius, point count, padding, colors) so designers can iterate quickly without editing code.
  • The notebook includes direct SVG and PNG export buttons to move output into Illustrator and editorial layouts in one step.
  • I documented performance behavior for large point counts to avoid accidental browser slowdowns during interactive typing.

Result

The final tool produces clean point distributions for both rectangular and circular scenes, ready to export and reuse in visual stories.

Impact and learnings

  • It streamlines repetitive pattern-generation tasks in graphics workflows and provides a reusable utility for journalists and designers working with data visuals.

Links