David King

full stack developer

All Blog Articles

Prev « CSS a tip for printing :-) Next » Social Media Revolution


CultureHackNorth - poke that!

13 Nov 2011

So I'm at the arse-end of the Culture Hack North in Leeds; I've been awake for about 30 hours and I thought it'd be nice to write a blog and introduce my project and walk through the process...

Khakaure!!! < get yer click on

Pencil sketch of the interface
after settling on an idea, I drafted the original plan. Like a fool I made it in portrait...
Revised sketch
new plan in a more webby sensible layout

At this point I wrote myself some tasklists, things like "mockup interface layout" and "setup webserver" etc after all the obvious bits and bobs I was in unknown territory; how to do those mad graph thingies... You know, the wibbly wobbly ones...

First bit of coding, a greyscale graph
well, the first step was to see about drawing lines and circles, I did that with raphael.js

Since my memory is terrible it took me about an hour to remember the name of themodels I was thinking of; FORCE-DIRECTED GRAPHS innit! Well, some googling and wikipedia research showed me that you can make a rather decent FDG by:

or if you prefer, Hooke's Law and Coulomb's Law. Bosh

After applying force-directed code to the graph it looks like a parachute Hooke's law models the springs and Coolomb's law models the distribution

Making the force-directed graph took a reasonable amount of testing as when you have 6 variables that all change the way the system feels it quickly baffles you, which is why I mocked up a little settings panel to quickly try lots of different values of each

Ability to tweak the internal settings like spring strength, length and forces
this thing is so bloody fun to use I left it in as a feature!

All that was left now was the side-pane that adapts to the data inside each node of the graph; that was pretty strightforward, it can detect:

everything else gets output in a table-like way so you can make your own mind up about what it means. The database, while designed and functional is sadly devoid of data in a structure that plays well with the system; we're looking at that right now and I hope to improve it at some point soon. Suffice to say I've thoroughly enjoyed the hack; this "nodegarden" is an idea I've been toying with for just too long and this was the perfect opportunity to have a go!

Now, where's my bed...? Oh yeah, 6 hours away...


Prev « CSS a tip for printing :-) Next » Social Media Revolution