December 1, 2012 5:31 PM Subscribe

How would I replicate this graph / wireframe look easily? Is there a particular name to this?

I am looking to fairly easily replicate the graph / wireframe look illustrated in these photos:

http://i.imgur.com/etA08.jpg

http://i.imgur.com/Ofm6c.png
posted by nathanm to Media & Arts (5 answers total) 1 user marked this as a favorite

I am looking to fairly easily replicate the graph / wireframe look illustrated in these photos:

http://i.imgur.com/etA08.jpg

http://i.imgur.com/Ofm6c.png

+1 on Delaunay triangulation, with some extra junk connections thrown in on the green one. Looks like the point placement has been generated as a force-directed graph to give the nodes that nicely-random look. Check out this Javascript demo for an interactive example of the same thing.

posted by migurski at 6:20 PM on December 1, 2012 [1 favorite]

posted by migurski at 6:20 PM on December 1, 2012 [1 favorite]

The linked demo is made with a library called d3 that is all the rage in the data these days — you can make it static or interactive. If you explore all the demos here, that is probably the easiest way (assuming you are comfortable with Javascript).

Otherwise, if you want something static and you are more comfortable like illustrator, you could bring the image in one layer then draw over it with the pen tool, adding ellipses at the joins.

posted by dame at 6:58 PM on December 1, 2012

Otherwise, if you want something static and you are more comfortable like illustrator, you could bring the image in one layer then draw over it with the pen tool, adding ellipses at the joins.

posted by dame at 6:58 PM on December 1, 2012

It's not actually a triangulation at all: looking closely at the second graphic, I see some polygons that aren't triangles (definitely some quadrilaterals, possibly some irregular pentagons). The first image has the same problem, plus some edges that intersect other edges without forming a vertex/dot.

That said, it does indeed look like one at first glance, and using D3 to create the Delaunay triangulation of a set of points is a good idea. Alternatively, you could use processing (eg. with this library).

posted by James Scott-Brown at 12:14 PM on December 2, 2012

That said, it does indeed look like one at first glance, and using D3 to create the Delaunay triangulation of a set of points is a good idea. Alternatively, you could use processing (eg. with this library).

posted by James Scott-Brown at 12:14 PM on December 2, 2012

Also, regarding names for things that look like this: if you have a set of points, and construct a set of triangles using them as verticies, you have performed *point set triangulation*; if the circles represent objects of some kind and the edges joining them represent some relationship between them, you have a *node-edge or node-link diagram*. If you arrange the points by treating the circles as repelling charges and the lines as springs, and simulating the movement of the circles until they reach equilibrium, you have constructed a *force-directed layout*. If you start with a polgyon, and decompose it into triangles, you have performed *polygon triangulation*.

posted by James Scott-Brown at 12:19 PM on December 2, 2012

posted by James Scott-Brown at 12:19 PM on December 2, 2012

This thread is closed to new comments.

posted by the Real Dan at 5:43 PM on December 1, 2012