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.
How to create a voronoi info graphic in inkscape
Re: How to create a voronoi info graphic in inkscape
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).
You could easily use that extension though. And just manipulate certain units with the Node tool (after using Object menu > Patterns > Pattern to Object).
Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Re: How to create a voronoi info graphic in inkscape
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

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.
Tumblr / Instagram / Pinterest / Facebook / Twitter / OpenClipArt
Shop at Society6 / RedBubble
Using latest stable Inkscape on Ubuntu (current stable release) and Win 7.
Re: How to create a voronoi info graphic in inkscape
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
Re: How to create a voronoi info graphic in inkscape
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)
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)
Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design