Placing pie charts in a list/ in order.
Hi,
I started with this amazing software 3-4 weeks ago - I'm more designer than programmer/coder.
I'have found on this forum really nice example of generating pie chart. Modified this a bit using my CSV file - that works fine.
Started positioning charts and it works ok when I use Grid node, but my problem is that need to put charts like elements of list (see attached img). Tried to define each chart position by resampling e.g. ellipse etc. - but it destroy pieces of each single chart...
Any idea how to place them like problem-description.jpg ? or where should I start looking for solution?
All files and description attached.
- PieCharts.zip 227 KB
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac
Support Staff 1 Posted by john on 29 Sep, 2016 09:18 PM
Hi Kuba,
Welcome to the Nodebox community!
The problem with your current approach is that you are creating a mass of independent pieces. You have a total of 30 arcs (3 per pie), 30 center covers, and 10 labels - a total of 70 objects. It then becomes hard to herd all these objects into the right place.
A better approach is to make one pie at a time, group each one into a single object, and then arrange those 10 objects in a grid.
I have attached a solution. Basically I just combined most of your current nodes into a single subnetwork called donut. For each row of the table you feed into it, donut produces one pie chart complete with center cover and label. If you look inside donut you will see that the final node is a group node. This is what glues everything together into a single pie object.
When creating objects like this, there is no need to worry about positioning them until later. Inside donut everything is centered at the origin. This simplifies everything.
When you hook donut to the csv node you wind up with 10 donuts on top of each other. To space them out all you need to do is feed that list of 10 donuts into a translate node and use a grid to define the 10 positions.
I could have just used an ordinary grid node. But to make it general purpose I created another subnetwork called make_grid. Make_grid takes in the table (in order to count the rows) and a number (labeled "columns") that controls the number of columns you want. It then figures out the number of rows, the overall height needed to space the rows evenly, and then slices the grid to return just the positions you need. In my example I set columns to 4, so you get two rows of 4 and third row of 2. Change the value of columns to see how the layout changes.
Solution network and screenshot attached.
Hope this helps!
John