@John — I wrote a script in AS3 that creates 20 nodes and draws a link between each one. Every 5 nodes, the base link color changes. Each link has a doppelgänger overlapping it as I've not yet bothered to ensure a single relationship between each node. This is running off of an XML document, so structuring for that gets a little more complicated.
Yeah, it's for an infographic illustrating connections between objects. The project I'm working on doesn't have all of these connections, but I commented out a few lines to generate the complete set.
I've advanced a bit on the project since posting this, but I went back tonight and made a scaled down version to recreate this state (although some color layering is different). I'm slowly animating all of the lines in from each node, so hopefully this will shed some light on how the final result is being produced:
Surprise! That previous dribbble was simulating every possible connection between the nominees of the top four character categories for this year's Academy Awards. Mind you, the right half of the piece isn't as clean and polished as I'd like, but it was a fairly quick turn-around project. I was really interested in getting the connections graph functioning.
11 Responses
i keep trying to figure out how you made this.
almost 2 years ago
Pro
William Couch
Experimenting with a node and link system for a relational graph project.
almost 2 years ago
Pro
William Couch
@John — I wrote a script in AS3 that creates 20 nodes and draws a link between each one. Every 5 nodes, the base link color changes. Each link has a doppelgänger overlapping it as I've not yet bothered to ensure a single relationship between each node. This is running off of an XML document, so structuring for that gets a little more complicated.
almost 2 years ago
Very cool! Is this sort of thing intended for information graphics?
almost 2 years ago
Pro
William Couch
Yeah, it's for an infographic illustrating connections between objects. The project I'm working on doesn't have all of these connections, but I commented out a few lines to generate the complete set.
almost 2 years ago
Ok, that is WAY cool. Can't wait to see what you do with it!
almost 2 years ago
Pro
Jason Robb
Wow, fascinating. Share some more!
almost 2 years ago
Pro
Veerle Pieters
Trying to wrap my (Illustrator tutorial, in other words: non script) brain around this one :) Very cool!
almost 2 years ago
Pro
William Couch
I've advanced a bit on the project since posting this, but I went back tonight and made a scaled down version to recreate this state (although some color layering is different). I'm slowly animating all of the lines in from each node, so hopefully this will shed some light on how the final result is being produced:
http://share.williamcouch.com/dev/connections/flash.html
almost 2 years ago
Pro
Rich Thornett
This is awesome. (If you're doing this at work, you have a great job.) Dying to know what data it will be depicting.
almost 2 years ago
Rebound
Oscar connections
by William Couch
Surprise! That previous dribbble was simulating every possible connection between the nominees of the top four character categories for this year's Academy Awards. Mind you, the right half of the piece isn't as clean and polished as I'd like, but it was a fairly quick turn-around project. I was really interested in getting the connections graph functioning.
Check it out →
almost 2 years ago