Join Barton Poulson for an in-depth discussion in this video Chapter 3 solution: Drawing with Processing, part of Projects for Interactive Data Visualization with Processing.
In the challenge we gave for Chapter 3, I asked you to create a visualization of four projects, and the percentage completion on each of two elements of those projects. So fundamentally, what you're doing is showing two percentages or proportions on four items. Now, for my chart, I chose to go with circular charts. Now I understand that there are often problems with pie charts. But I feel in terms of progress towards completion, these worked well. And so what I have is four circles that represent each of the four projects.
And for each one of them, I've got a dark red circle the represents the entire thing. And then I've got a very thick line that comes around an arc that represents progress on one aspect of the project. And then the pie in the middle represents progress on the other aspect of the project. And when both of them get back up to 12 o'clock, the project's totally done. Now in this example, I chose to go with a variation on the pie charts. Another obvious choice would have been to use a linear measurements, like a bar or a column chart. That would work very well for this situation also. I chose to go with the pie charts because I thought it was more interesting in this situation, and it looked more like the gauges coming around, to get to completion or a clock.
And I felt that that communicated completion or the sense of a deadline or progress pretty effectively. Now what we're going to do is we're going to switch over to code and I'm going to show you how I created this particular chart. I began by creating a window that was 1,000 pixels wide and 300 pixels tall. And then I created a variable for y because all of these circles and arcs are on the same top to bottom axis, and so I just needed a single y variable. And I wanted to center them so I used the height of the window that's a built in processing variable.
Once you've specified the size of the window, then you can refer back to height and width. And I just wanted to do height divided by two to put them right in the center of the top and bottom. Also, I created a second variable here, d for diameter. And that's for the diameter that I used for the circles and the arcs all the way through. And by setting up these variables up here, I saved myself a lot of repitition later on. Then I turn on smooth, which is for the anti-aliasing, makes shapes like circles and arcs appear a little bit better. And then I pick a background color. Now, I actually got a palette of colors that I adapted from the Kuler site for Adobe, that's kuler.adobe.com, where I looked at some palettes. And then I made some changes for what I felt would be most appropriate. And from those I got the hex codes that I put in here. So this background is the tan color.
Then what I did is I had to create the red circles, I had to create the pies that were within the circles, and then I had to create the arcs on the outline of the circle. Now because of the way processing works, I wanted to do these in a particular order. The thin circles, that would seem like an obvious thing to do first, but they got a little overlapped with the pies and so I put them second. So I started with the pies in the middle. First I turn off the outlines, I only wanted to fill. Then I specified the fill and then I used the arc command. And what these have is an x and y position.
So I've put each one of these 200 pixels apart.So the first one is centered 200 pixels from the left margin. The next one's 400, the next one's 600, the next one's 800. Then the next one is, you see the y is there, all at exactly the same up and down position, y is halfway down. And then I have d, that's the diameter, you have to specify a set (INAUDIBLE) for the width and height for the arc. And if you want them to be the same, then you use the same value, which is one of the reasons I'm using d here.
Now arcs, you have to specify the beginning and the end of them in radians. It's a little unusual but that's a unit of pie. It starts at zero and it goes to two pie. Two times pie where one times pie is halfway around. Two times pie is all the way around. Now another peculiar thing is the arc start as 3 o'clock and I wanted them to start at 12 o'clock. So what I had to do was I had to set the beginning of each of these arcs at pie times minus one half. So as 90 degrees backing up its half a pie negative to start.
And then the next one is pie times a certain value. It needs to be less than two and actually so it does not rely up on the top it wanted to be less than 1.5 and I just picked values that seem to say this is nearly done, this is just, you know, about a third, this is half way, and so on. I'm just eyeballing those ones. And so, they all start at 12 o'clock, which in radians is pi times negative 0.05, and they go to a certain extent. So those are the pis that are within the circles first.
Then I'm going to scroll down here a little bit. The next thing I do is I draw the circles that go all the way around. They just serve as a container, as a nice boarder for what I have. It's sort of a dark red. And, so I have the stroke and that's the color of it. That's a dark red. That the HEX code. And, then I made strokeweight to make them three pixels thick and I turned off the fill because, otherwise, they would be solid circles. I just want the outline. And then I use the Ellipse command. And I have them centered on the same places as the arch above. At 200 pixels over 400, 600, 800 pixels over from the left edge. They all have the same y coordinate.
They're half way down. And they have the same diameter. And then finally, I want to put the thick arc on the perimeter, which measures progress on another one of the dimensions. I change the color to stroke, and then I use a very thick stroke weight. I made it 12 pixels thick. That's when I had to just kind of bounce around to see what worked well. Also, by default, the strokes have rounded edges, which are kind of pretty but when you're trying to get sort of a precise sense of what the value is, that can be hard to read.
And so I put in Stroke Cap Square, and that cuts 'em off with square ends on the arc. And then I used the same arc command that I used before. I use arc and I had to specify the x position which is pixels from the left margin, 200, 400, 600, 800. They are centered on the same y position as everything else have the same diameter as everything else and then I start them at 12 'o clock and that's pi times negative 0.5. And then I pick a value that seems to communicate approximately.
Almost done, just beginning, and so on. And when I Iayer those on top of each other, I get my finished sketch. (SOUND) Which, again, looks like this. So first, I drew the pies in the middle. And the, sort of, the khaki green. Then I put on the red border around it to give it sort of an enclosure, like it's a gauge. And then I put the very thick arc on the outline to communicate the second dimension that I'm showing. And that's one way to communicate percentages on two dimensions for each of four objects.
And you could have done something very different, for instance, with lines, but I thought this would be one pleasing and informative method that had an analogy to gauges and completion.