First, an ode to the basics

Since my first forays into web design, somewhere around 2000, the web’s visual vocabulary has expanded dramatically. Yet with all of the non-HTML additions (Flash, VML, SVG, canvas, WebGL), there’s still a lot to be said for the visual prowess of HTML+CSS. HTML+CSS as a system is essentially a hybrid, multi-mode layout engine. Elements on the page can find their position and shape based on sets of rules that you get to define and configure. You can allow content shape and screen size to inform the layout, size some elements relative to other elements, and/or explicitly control shape and position to the pixel level. It gets complicated, and that’s why front end development is a legitimate discipline, but it has proven itself to be powerful and flexible.

HTML+CSS+JS can work great for diagramming

This wacky Stack Overflow question caught my attention.  Reading through the question, edited multiple times, and the incomplete, searching answers made me realize this was a surprisingly interesting problem.  It has to do with visualizing RCC8 regional logic statements:

RCC8 visual

Basically, RCC statements describe a set of logical relationships between different “regions”.  Regions can be contained by other regions, partially overlap other regions, etc.  The textual statements themselves are painful to look at and try to understand.  You need to scan the text, carve out which symbols are regions vs. relationships, look up the relationship code, then you can finally build in imaginary model of what it all means in your head.  It’s the kind of disconnect Bret Victor is out to fix in his Kill Math project.

Long story short (too late)

I ended up spending a night rigging up a prototype HTML/CSS/JS visualizer for RCC statements. To tinker with it, add or remove statements, hit the button:

I implemented a subset of the possible relationships:

  • disconnected (DC)
  • externally connected (EC)
  • partially overlapping (PO)
  • tangential proper part (TPP)
  • non-tangential proper part (NTPP)

There are a variety of cases that break this humble prototype.  Cases where a single region has multiple overlaps is problematic, for instance (and ultimately much harder to lay out).

There’s a fiddle out there for the intrepid.   In the earth-shattering event that you find yourself with suggestions or code improvements, hit me up, ‘kay?