I designed and coded the user interaction system for a graphical editing tool that biologists can use to visualize protein-protein interactions within biological molecular systems.


Creative Coding Lab, UC Santa Cruz

Walter Fontana Lab, Harvard Medical School


Spring 2019 - Present


The Challenge

Researchers often use rule-based models to simplify the process of modeling the complex and interdependent biological interactions in molecular systems. Visualizing these interactions helps researchers leverage their visual intuition to understand and study them. Currently however, there are few visualization tools that provide substantial insight to intrinsically complex biological systems data.

Our Solution

We created RuleVis, a web-based application that visualizes patterns written in Kappa, a rule-based modeling language. RuleVis supports visualizing existing rules from text and construction of new Kappa rules through a GUI Editor, allowing researchers to create rule-based models without knowing the Kappa syntax. RuleVis and its associated paper, RuleVis: Constructing Patterns and Rules for Rule-based Models, have been accepted for presentation at IEEE VIS 2019 in October (provisional acceptance rate ~31.7%).

My Role

I was responsible for designing and coding the front end of the application, including the visual rule-construction interactions in the GUI Editor. ​

Case Study

Competitor Analysis

Many visualization tools exist to model and simulate systems. For example, Reactome is a curated, peer-reviewed database of pathways; Cytoscape visualizes large datasets of molecular interaction networks and biological pathways. However, existing tools do not provide meaningful analysis of the complex data sets associated with those models, such as the data that describes the multitudinous and continual interactions happening between individual agents in biological molecular systems.


In addition to evaluating existing tools, we worked closely with Pierre Boutillier and Walter Fontana from the Walter Fontana Group at Harvard Medical School throughout our design and development process. Pierre and Walter are integral developers of the Kappa ecosystem, and they provided valuable insight into how RuleVis could serve biological systems researchers, including how it would function within the existing Kappa ecosystem.

User Personas

Through my conversations with Pierre and Walter, I determined that our target users are molecular and experimental biologists who are interested in using rule-based modeling to analyze complex interactions between macromolecular agents within biological systems. Our target users fall into two classes: Kappa Veterans and Kappa Novices. 


RuleVis should simultaneously serve Veterans and Notices without stifling the Veterans' knowledge and without leaving the Novices in the dust.

Kappa Novice

Molecular biologists with little to no experience in rule-based modeling would benefit from examining their domain problems within the context of a rule-based model. Novices might be interested in learning the Kappa language, but it is not a priority for them.

Kappa Veteran

Molecular and experimental biologists who are familiar with Kappa and rule-based modeling techniques should be able to quickly visualize a Kappa rule they have already written. Veterans are familiar enough with the Kappa language to build accurate models textually, but benefit from being able to edit and modify their models visually.

Roles & Responsibilities

My team consisted of David Abramov, Mahika Dubey, and Jasmine Otto, graduate students at UC Santa Cruz and members of the Creative Coding Lab. Jasmine built the majority of the backend functionality, including parsing text-based rules into usable data structures, Mahika and David wrote most of the paper submitted to IEEE Vis 2019, and I designed and built most of the user interface and experience.


Angus Forbes, the director of the Creative Coding Lab, oversaw our progress and provided mentorship and guidance when needed. Pierre Boutillier and Walter Fontana, researchers at Harvard Medical School and developers of Kappa, provided field expertise and guided us towards solutions that would benefit our target audiences.

The Kappa Language

The Kappa Language describes biomolecular elements and phenomena in abstract terms for broad applicability. These abstractions have their own visual language, as shown here.


Rules are are abstractions of protein-protein interactions. Rules comprised of two patterns separated by an arrow, depicting a "before" and "after" state of the pattern.

Patterns are structures of macromolecules (agents). If agents are like atoms, patterns are like molecules.

Links connect two agents through their respective sites.

Agents represent one macromolecule and can bind together to form patterns. Agents bind together in the same way that atoms join to form molecules.

Sites are ports through which an agent can connect to another agent.

Text Input editor



GUI editor


The RuleVis Interface consists of an action sidebar, containing a GUI Editor and a Text Input Editor, and a visualizer. Users can either build rules visually by constructing them via the GUI editor, or textually by directly writing rules into the Text Input editor. Rules constructed with either method are reflected immediately in the Visualizer.

Visual Cues Encode Valid Rules

Users create rules visually by selecting elements — agents, sites, and links — from the GUI Editor tab and placing them directly on the visualizer. The goal of the GUI Editor is to provide Kappa Novices and Veterans with a way to construct rules without knowing the specific Kappa syntax.

Because Kappa Novices may not understand how agents, sites, and links are allowed to interact with each other, I designed and coded visual interaction cues into the GUI Editor that provide intuitive feedback on what actions create valid rules.

For example, let's say a researcher wishes to add a site to their rule. Sites must exist on an agent, so they should not be able to add a site to the visualizer if they do not try to add it on top of an agent. In order to cue this restriction to the user, an overlay that looks like a site only appears when the user hovers over an agent — indicating that it is a valid spot to place their site.