1 Correct answer
Ain't scripting fun. It was a breeze (well -- sort of) to get something up & running for InDesign ... Now translating it into the very different Javascript for Illustrator proved to be harder than I thought!
(Is there no way to vertically align a text into its frame? This is now sort-of, but it depends on the number of lines of text...)
Type in (or copy, or import) your values into a new text frame. Separate the label and the value by a single tab. The values will be sorted automatically, and the
...
Explore related tutorials & articles
24
Replies
The detailed example is Jess Bachman's 'death and taxes' visualization of the US discretionary budget.
Even if there was a way to script in an auto-adjust of circles that I had pre-arranged in a chart, saving the tedium of expressly setting each size individually.
Below is a sample of some data I'm using, modeled by hand using excel.
Equation is:
r=0.5 * px
pxSubordinate=sqrt(((pxParent*pxParent)*$subordinate)/$parent
The end result of this sample data looks like:
There must be a more efficient way to permit illustrator to generate a vector chart that can loosely assemble a master and subordinate series of circles with various bits of text data displayed (also from spreadsheet), and a few graphical bits to tie the circles together.
This is quite an interesting challenge for Illustrator and Javascript and a lot of math thrown in -- enough to lure me away from my usual InDesign shenanigans!
(a) Your sample image shows a 2-level diagram, but am I to understand you have more levels than this?
(b) Can you supply the numerical data corresponding to the sample image? (I.e., given that input, the script ought to create the image out of nothing.)
(c) Are the graphs to be created a one-shot, or should it be possible to 'update' the finalized image? (Note: usually, it's far more easier to just throw away *everything* and generate an entirely new image. However, if you plan on doing some finalizing stuff -- adjusting text, fonts, colors, drop shadow or other effects -- all of that will be lost.
But it's far harder to 'update' an existing image with new data; it might even not be possible at all. I'm just saying.)
I cannot make any solid promises, but it sure looks like a fair challenge.
(Unless anyone is interested in mazes-for-Illustrator ...? 
)
Ain't scripting fun. It was a breeze (well -- sort of) to get something up & running for InDesign ... Now translating it into the very different Javascript for Illustrator proved to be harder than I thought!
(Is there no way to vertically align a text into its frame? This is now sort-of, but it depends on the number of lines of text...)
Type in (or copy, or import) your values into a new text frame. Separate the label and the value by a single tab. The values will be sorted automatically, and the largest value will appear in the center; the rest will be distributed nicely around the edge. I noticed my mathematical distribution is not exactly the same as the sample you provided ... even when allowing for a pixel here or there. I wonder why?
For better or for worse, this is what it produces -- the first sub-item will always be at a 45 degrees angle, the rest is separated from each other by an exact distance of 5 points.
and here is the script:
//DESCRIPTION:Krazy Circular Diagrams
// A Jongware Script 24-Sep-2010
// Uses a tab-separated set of String / value data
// which ought to be selected when running the script.
// Use but do not abuse, please.
if (app.documents.length == 0 || app.selection.length != 1 || !(app.selection[0].hasOwnProperty("baseline") || app.selection[0].hasOwnProperty("contents")))
{
alert ("Please select the text frame containing data");
} else
{
var dataArray;
var resultGroup;
var parent_diameter = 100;
var parent_position_x = app.activeDocument.activeView.centerPoint[0];
var parent_position_y = app.activeDocument.activeView.centerPoint[1];
var black = new GrayColor(); black.gray = 100;
var white = new GrayColor(); white.gray = 0;
dataArray = gatherValues(app.selection[0]);
if (dataArray.length == 0)
alert ("Unable to get sensible values .. please check");
else
{
calculateValues ();
resultGroup = app.activeDocument.groupItems.add();
drawCircles(resultGroup);
}
}
function gatherValues (fromItem)
{
var result = new Array();
var l, line, lines, dataSource;
if (fromItem.hasOwnProperty("baseline"))
dataSource = fromItem.parentStory.contents;
else
dataSource = fromItem.contents;
lines = dataSource.split ("\r");
for (l=0; l<lines.length; l++)
{
line = lines
if (line.length == 2)
{
if (!isNaN(Number(line[1])))
result.push ([line[0], Number(line[1])]);
}
}
result.sort (sortByValue);
return result;
}
function calculateValues ()
{
var v;
// Calculate size per circle
for (v=0; v<dataArray.length; v++)
{
dataArray
}
}
function drawCircles (addToGroup)
{
var color_p = new RGBColor();
var color_c = new RGBColor();
// Parent colors, in RGB
color_p.red=80;
color_p.green=130;
color_p.blue=190;
// Child colors, in RGB
color_c.red=74;
color_c.green=172;
color_c.blue=197;
// Draw parent circle
drawCircleAt (addToGroup, parent_position_x, parent_position_y, dataArray[0], color_p);
// Draw the other circles.
// First one starts at -45 degrees (0 degrees is straight to the right)
circleAngle = 45;
// The center of the circle is at parent_diameter/2 + (distance) + own_diameter/2
centerDistance = parent_diameter/2 + 5 + dataArray[1][2]/2;
for (nextCircle=1; nextCircle<dataArray.length; nextCircle++)
{
// and this is Math 1-0-1: finding its center position using the angle 🙂
cx = parent_position_x + Math.cos(Math.PI * circleAngle/180)*centerDistance;
cy = parent_position_y + Math.sin(Math.PI * circleAngle/180)*centerDistance;
drawCircleAt (addToGroup, cx, cy, dataArray[nextCircle], color_c, parent_position_x,parent_position_y,parent_diameter/2, circleAngle);
if (nextCircle < dataArray.length - 1)
{
// Advance angle to make space for next circle.
// Let's type this while thinking, shall we?
// We have:
// a line from parent_center to child_center A at angle alpha
// radius of A (actually, diameter, but we don't care)
// radius of B (as above)
// some distance to put between A and B
// rad_A + distance + rad_B -> position of center of B (anywhere)
// oh, and distance from parent_center to child_center B is the same as to child_center A!
// checking on Wikipedia, http://en.wikipedia.org/wiki/Law_of_sines
// yields something like this ...
angle_diff = Math.asin ( ((dataArray[nextCircle+1][2]/2 + 5 + dataArray[nextCircle][2]/2)/2) / centerDistance); // in Radians
angle_diff = 2*angle_diff * 180 / Math.PI; // in Degrees
circleAngle = circleAngle - angle_diff;
}
}
}
function drawCircleAt (group, xpos, ypos, textAndSize, color, lineto_x, lineto_y, parentRad, angle)
{
var tframe, line;
// The connexion line, if any
if (lineto_x != undefined && lineto_y != undefined && parentRad != undefined)
{
angle = Math.PI * angle / 180.0;
line = group.pathItems.add();
line.setEntirePath ( [[lineto_x + parentRad*Math.cos(angle),lineto_y + parentRad*Math.sin(angle)], [xpos - textAndSize[2]/2*Math.cos(angle),ypos - textAndSize[2]/2*Math.sin(angle)]]);
line.filled = false;
line.stroked = true;
line.strokeWidth = 0.5;
line.strokeColor = black;
}
// The Circle
circle = group.pathItems.ellipse (ypos+textAndSize[2]/2, xpos-textAndSize[2]/2, textAndSize[2], textAndSize[2]);
circle.strokeColor = black;
circle.strokeWidth = 0.5;
circle.fillColor = color;
// The Text Frame
tframe = app.activeDocument.pathItems.rectangle(ypos+textAndSize[2]/6, xpos-textAndSize[2]/2, textAndSize[2], textAndSize[2]/2);
tframe = group.textFrames.areaText(tframe);
tframe.contents = textAndSize[0];
tframe.wrapInside = false;
tframe.wrapped = false;
tframe.textRange.hyphenation = false;
tframe.textRange.justification = Justification.CENTER;
tframe.textRange.textFont = app.textFonts.getByName("MyriadPro-Regular");
tframe.textRange.characterAttributes.size = textAndSize[2]/6;
tframe.textRange.fillColor = white;
}
function sortByValue (a,b)
{
a = Number(a[1]);
b = Number(b[1]);
return (a == b) ? 0 : (a < b ? 1 : -1);
}
you just threw this thing together in a few hours?
Sure. The underlying math is not too difficult, it's more the logic of the connexions I had to work out.
I checked out the artistic poster you referred to, and boy! now there was someone with way too much time on his hands 
Multilevel is sort of a two-tier problem. How do you want to specify the input data? A simple list won't do anymore ... The other problem lies in how to determine a good position for the sub-level. Even only two layers is a problem:
-- this was done manually, by trial and error. If the Marine Mammals had just one item more it would bump into Fisheries Ecology. (Fortunately I ran out of ideas after 'mermaids', and these are only half mammal anyway.)
At this point, the script would leave the terra firma of Math 1-0-1 and enter the wide realm of data visualization, graphing theory, and (emh) some more difficult things which I cannot recall top of head.
So I don't think you can expect a script to generate as much as four levels totally automatic ...
I can add a simple dialog to set the starting angle for the first circle, and perhaps I can think of a few more options.
Well, for starters it's very kind of you to think along! (Apart from proposing this challenge in the first place, that is.)
About the data. The problem is it's not really a linear list, but more of a tree of ever increasing detail. So there isn't really a straightforward way to input the data.
One possible way to input multi-level data would be working with multiple tabs, like this:
Fish mongeries
Mammals
Sea-dwelling 12
Land-dwelling 34
Fish
Appetizing 15
Edible 20
Ghastly 40
Fruit
Apples
Elstar 15
- etc. Note how you don't have to specify a 'running total' per category and sub-category. As I understand Jess' graph and your example, the total of the sub-categories is the actual value of the category proper -- thus the size of the 'parent' circle --, and adding all of these categories' totals together will result in an even larger super-circle.
Now that's one option, and with that data one could build an entire graph from scratch. Alter the data, delete the old graph, and create a new one. Good for a one-shot graph, not so good if you moved stuff around, changed colors and fonts, etc.
The other option is to store the category data -- names and numbers -- into the graphic objects -- the circles. That has the advantage that you can format every circle and its associated text in any way you want, and all the script has to do is scale and reposition the existing circles. The downside, then, is you cannot immediately "see" and edit the associated data per circle, you'd need another script to do this. (Objects in InDesign have this property 'label', which can hold just about any string or numerical data, and can be inspected and altered from within the program itself. But I have this little theory the programmers of InDesign and Illustrator don't get along very good, and refuse to coordinate even the most basic things.)
I'd have to look deeper into this, but it might well be possible to combine these two workflows: generate a graph anew if given only textual data, and adjust positions and scales when given a file that already contains a graph.
About the graph itself.
If you look to Jess' graph in close detail, you will see that not all of his circles and sub-circles have the rigid layout you show in your sample. For clarity, he moved entire sub-structures away from the center, with just a long connecting line attaching the two. There is simply no way you can put that much smarts into a script ... Mainly because it's an algorithm's worst nightmare, but also because there is a certain degree to artisticness to it.
I was already planning a next step in the script, which is the observation that the size of a parent circle is not a given (your initial "100 pixels"), but it's rather the other way around. If you point to a circle and tell the script, "I want sublevels for this one, with these numeric parameters", the script could automatically calculate the original area. As I said above, the running total for a main category should not be given, but rather just be the total of all of its sub-categories. Divide x by y, and you got yourself a scale ratio for the subordinate circles.
This means that, if necessary, you could construct the entire graph manually, by first feeding it the data for generating the 'level 1' graph, then feed it the data for all successive sub-levels, selecting each of the sub-circles as new parent for each.
(I'd have to try to see if this works )
About groups of data.
Unfortunately, Illustrator cannot create "elastic lines" -- a line that is attached to two objects and stretches and bends as you move the two objects around (neither can InDesign ... sometimes I could use that!). This means that the only way to group parent-and-subcircles together is by physically making them into a group. The problem ... that 'parent' circle (and its co-grouped subcircles) is going to be a sub-circle of a larger parent, to which it also should be grouped. At the end of the line, you'd have one big supermassive grand-grand-grandparent circle, and every one of the other circles is grouped together with that one, rendering the entire concept of grouping the sub-circles totally ineffective.
It's even harder when you created a main set of circles and then decided (in an artistic way) to move one of the sub-circles out of the way, to make room for a set of sub-sub-circles of another circle. If the script gets re-run and that sub-circle (the one you moved) appears on an entirely different position than before, your entire data-set is off. I'd have to think about this, but I feel like there is no real satisfying solution.
.. the script doesn't like numbers with commas (anything over 999.99).
I had to read that twice until it dawned on me... Computers in general don't like numbers with comma's! A value of 1,000,000 makes no sense to any calculator (not to the large majority of them, in any case). It's like typing in "1 billion" and expecting the computer to think "oh, he's from Europe, so with 1 billion he actually means 1 trillion".
I could make the script work fine on comma-separated thousands by having it adjust the numbers before they get processed, but frankly it's such a mean task ... It also brings up another challenge of its own: what if you type in 1,24.5? Should that number be rejected because it's "not a valid number"?
Here is the next step; I honestly don't think I can push it any further, but fellow scripters are invited to build onto this!
It's also getting a bit on the large side to comfortably post in here, so I've put it as KrazyCircles.zip onto my website.
Improvements:
1. All comma's are ignored in the numbers
2. If the first data line doesn't contain a tab-and-number, the total of the following numbers is used.
3. If you have a circle selected -- together with the data text frame --, the center circle will not be drawn (at all -- not even its title). Instead, the selected circle is used as the base for the next graph. That way you can chain graphs together.
4. It has a dialog! A quick explanation:
Distance to parent: the length of the connector between the parent circle and the largest subordinate one.
"Fixed" checkbox: if unchecked, the centers of all subordinate circles are at the same distance from the parent circle. If checked, the distance is the same for all -- the one in the above box.
Inter-children distance: I reviewed my math 
and now it should work correctly! It's the distance between two successive subordinate circles.
Start angle: the initial angle of the first drawn circle, where 0 is right and 90 is down (I think).
"Clockwise" checkbox: the subcircles are drawn largest to smallest in clockwise fashion. If unchecked, the subcircles get drawn the other way around.
OK: obvious, methinks!
Cancel: ditto 
In the scriptographer example, I couldn't effect changes on the chart via the 'Read Settings' tab. A bit confused on that one-once the chart is generated, it cannot be changed?
Ehm. I don't have Scriptographer installed here (at work), but it ought to work like this:
1. You generate a graph, using the text field with data.
2. You use the Scriptographer palette to adjust rotation & distances.
3. You do something else.
4. If you want to adjust an existing graph (i.e., aforementioned rotation and/or distance), start the script again. Select the graph, and press the "Read settings" button to 'read' the settings that were applied in that graph into the Scripto palette -- otherwise it'd reset the graph to the last settings that were active in the palette.
It should work ... (But note, if you 'adjust' a graph using this method, it gets destroyed and built entirely from scratch.)
How should I rearrange this data to fit the scripts?
I left the multi-tabbed idea for another rainy day -- implementing that would need a much smarter script that creates multi-level circles ... But you can cut up your data into separate text frames, one frame for each set of 'title / data' lines. You should probably end up with something like this for the Root circle (the largest):
| Science Branch (TOTAL) | |
| Fisheries Research Administration | 1153.7 |
| Fisheries Research | 6446.6 |
| Aquaculture and Resource Dev. | 1050.1 |
| Habitat Assessment & Rel. Res. | 1015.6 |
| Regional Library | 204 |
| Ships, Charter | 5519.8 |
| Ships | 1867.2 |
-- where "Science Branch" doesn't need a number (everything below adds up correctly) and will appear as "title" in the largest circle. Do the same for the other categories, so you end up with 7 text frames with associated data, and this graph, plus the 7 smaller ones. Then move them around until you like what you see.
I would suggest that if you have everything arranged, you save & close that file and continue working on a copy to add the artistic touches. That way, you can ungroup all items, so you can finally change the background color from that ghastly default blue
AdChoices