The Set-up
The visual system is based on an elemental unit: a graphic particle representing the patient and structuring the entire framework. The six data modalities activate and reorganize this dynamic constellation: selecting a modality or filtering by tumor type reshapes cases, revealing the relational nature of the data. The same language guides the product-focused view: an ordered, non-hierarchical network where different dataset combinations move through analytical layers to generate concrete AI use cases.
Production Process
The design process integrated solutions that amplified its impact. Animations were developed in Rive, enabling a level of micro-motion detail that would have been unattainable through code-only implementation.
In the second visualization, the combinatorial network structure and the transformation of traditional icons into dot-based configurations were enabled by custom AI scripts, generating dynamic systems and reinforcing continuity between the visualizations.
The Backend Technology
The first visualization was developed using Matter.js, a JavaScript library for 2D physics simulation. Each patient, modeled as a point, behaves as a reactive entity, contributing to a dynamic and organic ecosystem.
The solution was delivered as a custom front-end component, embedded into the client’s Webflow site through dedicated integration, ensuring compatibility and full control over the digital experience.