I like graphs, mobile, web apps, the promise of CASE tools to let developers work on higher levels of abstraction and thinking about how different perspectives help us design and make sense of things. All of this came together in a weekend hack, dot2jqmobile, a Python script to generate skeletal jQuery Mobile sites from DOT graphs. Here’s a primer on DOT and jQM, then a few words on how the script works and the ideas behind it.
Here’s the DOT language for describing graphs:
It’s simple: nodes are text, edges are two dashes.
Rendering tools like Pixelglow’s Graphviz can generate images from this syntax, like so:
Graphviz handles the layout and the rendering of the image. DOT is so lightweight I often use it to sketch out systems and connections between things. Graphviz detects changes in files, so if you work with Graphviz and a text editor next to each other, the image will update automatically when you save.
I learned about jQuery Mobile at Remy Sharp‘s mobile HTML5 workshops at the Update Conference in 2011. You can create mobile web apps from a single page of html using divs, data attributes and links to specify pages and links between them. Wikipedia have a great basic example of this, here’s the central idea:
Here’s how that condiments graph looks as a jQuery Mobile site, generated from the dot with dot2jqmobile.
The dot2jqmobile script
jQuery Mobile sites are essentially graphs, with the pages as nodes and the links being edges between them. Translating between the DOT and jQuery Mobile graph representations is the central idea in dot2jqmobile. It reads and parses a DOT file using pydot, creates a Page object for each node, adds links to the Page objects, then renders them all as jQuery Mobile ready HTML with a header and footer.
Exploring spaces in the first and third person
Sometimes I write directly in DOT to capture my thoughts about a system as I’m mentally traversing it. The simple syntax makes it easy to add connections as you realise them and record a stream of consciousness. My DOT writing process often involves me following a train of thought like this:
apples -- oranges -- bananas -- ...
Then following another:
ice_cream -- pudding -- pie -- flan -- ...
And revisiting nodes in the trains, making links between them:
bananas -- banana_pie -- banana_ice_cream -- ice_cream
ice_cream -- vanilla -- cinnamon -- apple -- apple_pie -- pie
Writing the connections straight into the text lets me explore the system from a first person point of view, wandering through the space and capturing spontaneous thoughts like “an orange is like an apple, and a banana is like an orange”. Unlike a diagram editor which could be used to the same end, or more structured writing like an essay or blog post, writing directly in DOT doesn’t require any thinking about the layout of things or connections between trails and entities.
On rendering, the layout algorithms and image rendering in Graphviz give me a third-person overview of my thinking. Looking at the graph I can see the bigger picture with observations like “this is how the fruits and deserts fit together as a whole” and notice trends at this level. In the example above, I might spot that there’s an unclear boundary between flavours and desert types – should there also be a vanilla ice cream to follow the banana ice cream, or should I not join flavours and deserts? Together, the language and the renderer give me the ability to switch between first flow and third person views of systems.
But neither make it easy for me to share routes through the graph with others, or see the routes they find when they are traversing through the same space. Graphviz isn’t quite polished or simple enough for most non-technical users to feel comfortable with it, not is the DOT format. I often export rendered graphs to images, print them out and walk through them with other people. It’s interesting to ask people to think out loud while they read and make sense of graphs.
With dot2jqmobile, I hope to make it easier to follow along side others as they navigate through spaces, and to capture some of the spontaneous thinking and observations that come out of traversing in a first-person point of view.