How to create a voronoi info graphic in inkscape

Post questions on how to use or achieve an effect in Inkscape.
henal
Posts: 4
Joined: Wed Aug 26, 2015 2:00 am

How to create a voronoi info graphic in inkscape

Postby henal » Wed Aug 26, 2015 2:06 am

Hi,
I am quite inspired by this graphic by NYtimes (http://www.nytimes.com/interactive/2008 ... .html?_r=0)This one is created in illustrator but I was thinking is there a way to create a similar thing in inkscape? I know that there is a voronoi extension but it just creates voronoi sections, I am not sure how I can scale the individual voronoi sections to correspond to data like in the NYtimes graphic.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: How to create a voronoi info graphic in inkscape

Postby brynn » Wed Aug 26, 2015 2:28 am

I think that's just simulation of voronoi. I've never seen a voronoi with curved lines. I think it was created uniquely by the artist, who knew what size each unit needed to be.

You could easily use that extension though. And just manipulate certain units with the Node tool (after using Object menu > Patterns > Pattern to Object).

User avatar
bartovan
Posts: 191
Joined: Sun Feb 09, 2014 4:14 am
Location: Belgium
Contact:

Re: How to create a voronoi info graphic in inkscape

Postby bartovan » Wed Aug 26, 2015 3:01 am

The really professional way to go would be to use d3.js :) It allows to use data to shape SVG, in short (amongst others).
Sadly, I'm far from a real professional, so I'm of no further use than to just point it out :)
Portfolio bartovan.com
Tumblr / Instagram / Pinterest / Facebook / Twitter / OpenClipArt
Shop at Society6 / RedBubble
Using latest stable Inkscape on Ubuntu (current stable release) and Win 7.

henal
Posts: 4
Joined: Wed Aug 26, 2015 2:00 am

Re: How to create a voronoi info graphic in inkscape

Postby henal » Wed Aug 26, 2015 5:55 am

brynn wrote:I think that's just simulation of voronoi. I've never seen a voronoi with curved lines. I think it was created uniquely by the artist, who knew what size each unit needed to be.

You could easily use that extension though. And just manipulate certain units with the Node tool (after using Object menu > Patterns > Pattern to Object).



But how can I size each unit in the voronoi according to the data, also th eextension just creates the voronoi units how can I control that it creates exactly the number of units that i need

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: How to create a voronoi info graphic in inkscape

Postby brynn » Wed Aug 26, 2015 12:41 pm

To do that, you'd need to use some kind of scripting, which I know little about.

D3.js, which bartovan mentioned, is a javascript library which can do things like this. And actually, now that I think about it, I think I've seen examples of exactly what you're describing, that were done with d3.js. Look at their amazing gallery: https://github.com/mbostock/d3/wiki/Gallery (Every time I look up that link, I spend 20 minutes, just looking at the awesome examples!) But I couldn't explain how to use it. All I know is generally what a javascript library is.

For Inkscape, that extension just puts out random displays. There is no way to control what it produces. (edit -- well, you can control a little bit, with those 2 variables in the dialog - but I don't really understand those - I just change the numbers until I get what I want)

What I suggested was to just use the extension and fill a large rectangle with it. Then after converting it, you can use the Node tool to manaully adjust the individual cells. If you need a cell for 73%, and another cell for 12%, then the 73% cell will be much larger than the 12% cell. There would be nothing precise about it. That's all you can do with Inkscape alone. (However, that's how I think the artist made your example.)(just guessing)


Return to “Help with using Inkscape”