Rev: 10/2/2016

Pie chart assignment

Points:85

· You are to use this document as a reference. Where it refers to browsers, you are to substitute 4-6 automobile unit sales (or dollars) for 2015. Use car companies such as for Toyota, Fiat, Nissan, Jaguar, Audi BMW…Feel free to substitute non-car companies of your choice., such as beer sales by company.,

Rubric:

· Save final chart as a .png file (10 points)

· 3D : (40 points)

· Labels on top of slices and on sides (35 points)

· Weebly page containing the chart (5 points)

· Title at the top (5 points)

In this illustrator tutorial, we will create an eye-catching 3D pie chart from raw data and explore several techniques for making better graph charts. We will complete the process in 4 steps and at the end we (you?) will have a 3d stunning graph for your .web site

1. Key in the data

2. Coloring the chart

3. making the pie chart 3D

4. Labeling graph data

Let’s graph how many visits, by browser, a hypothetical web site received last year,

Step 1: Key in the data

So let’s get started. Begin with a new RGB document (Assume our pie chart will be on a Web site, thus the RGB). Unless you have a specific size in mind, set units to inches

1. On the Toolbox, click and hold on the Column Graph Tool to reveal all 9 graphics types:

We want the Pie Graph tool , so select it

· Click and when prompted, enter a size: I used 7” by 7graph ”. This will eventually be the final size of the chart itself

There will be a second object, a spreadsheet, used to enter/edit the data to be graphed (see below)

· When you release, the Graph Data window will appear

2. The Graph Data window looks like any spreadsheet application. (Eventually anyway) This is where all data and labels are entered and modified.

Enter Labels

3. Click in the top-left cell, and type IE

· Press the Tab key after typing to commit the change and advance to the next cell along the top row.

Enter the remaining labels the same way: “Firefox”, “, “Opera”, “Safari”, and “Chrome”. In the end, you should have a row containing five labeled columns along the top row:

4. Enter the data to be graphed. Now that the labels are done, let’s enter the actual data from which our pie and its pieces will be drawn. Click each cell under each label and enter these values.

5. After all data has been entered, click the Checkmark (see below)

You should see this:

· Go ahead and close the Graph Data window (Use the “x”)

· Select, then move the chart so it’s completely visible

· Save your document as pie1.ai.

Step 2: Coloring the Chart

· Deselect everything

· Select the Group Selection tool from behind the Direct Selection tool.

· Click twice on one of the pie sections to select both the slice and its legend. Cool, huh? How can you determine which slice is active? It’s the one that has a small offset

Now, using both the Swatches or Color picker, give it a fill—a solid color, gradient, or pattern and/but NOT a stroke.

If you plan to make your pie three-dimensional in the next step, don’t give it a stroke.: Each slice must NOT have a stroke.

· In fact, let’s remove all strokes, on pie slices and legend keys.

Because of the Group Selection tool, both the slice and the legend can be styled at once without breaking the graph’s link to its data—you can go back and change the dataset at any time.

Right-click, choose data. Result

---spreadsheet opens

Here is my finished graph

· Save as pie2.ai

Step 3: Making the Pie Chart 3D

Colors are great but a 3d effect can often give a pie chart more impact, making the data easier to stare at going into that third hour of a 20-minute meeting.

The very first thing we need to do is separate the legend from the graph.

Find/Open Layers panel

If you see “Isolation Mode”, delete it, or double-click on the artboard

· Deselect all

· Make a new layer 2

· Use Direct Select tool to select all the legend (Not the graph)

· Click the circle on Layer 2

· Copy (Ctrl-C) the legend on Layer 1

· Select the new Layer

· Click the circle on Layer 2

· Edit>Paste in front

Rename the layer to Legend. This legend is now disconnected from the graph. Next, hide the Legend layer.

9. Back to our first layer,

Since the legend is now its own layer, we no longer need the labels in row 2 of the data sheet.

We’ll delete the labels and copy the data into the now vacant row.

Select the graph with the Selection tool, and choose Object > Graph > Data, which will get you back to the Graph Data window.

· In the Graph Data window, click the first cell in the top row and press Delete on your keyboard to wipe it out. Repeat until you’ve emptied the top row.

· Select your second row by clicking in the first cell and dragging to the last. Instead of deleting, however, press Ctrl-X to cut the information.

· Click once in the leftmost cell of the top row and paste the data in with (Ctrl+V).

10. Click the Apply button (check mark) and close the Graph Data window.

11. Select the graph with the Selection tool. If your graph has a stroke, remove it. Now, choose Effect > 3D > Extrude & Bevel.

· In the 3D Extrude & Bevel Options dialog below, turn on Preview

· try these values(Click More Options) button, which reveals advanced lighting options

12. Click and drag any face, side, or corner of the track cube to change the graph’s rotation in three-dimensional space.

If you’re happy with the thickness of your graph and its lighting, just click OK

13. Clicking the More Options button will reveal advanced lighting options where you may choose a shading type and modify the light(s) and shadows created from the extrusion and rotation. When you’ve finished setting the options for 3D Extrude & Bevel, click OK.

· Turn on your Legend layer. The result:

Look at those rectangular color key swatches. Are they too big? They were for mine (see above), so I resized them in one swift motion..

· With the Selection tool, select all the colored rectangles. Then choose Object > Transform > Transform Each.

In the Transform Each dialog, turn on Preview in the bottom right, then change the Horizontal and/or Vertical scale to suit your graph.

Note: You could have used the Transform scaling feature but it would involve a lot of additional steps

· Style the type of your labels (if desired),

· Select the labels (shift-click each)

· Try font Gill Sans MT, and adjust the font size to best suit you

It now looks good. How do we get the labels on the edges? Keep reading… we’re almost there…

Labelling Graph Data

14. For a little extra clarity of data presentation, Let’s try applying labels directly to our pie pieces-or columns, rows, or whatever in other chart types-in addition to the side-legend.

Note: Don’t have any layers open when you add a new layer…you might end up with a sub-layer

· Create a new layer named Type:

· Select the layer

· On the new layer, click with the Type tool in the canvas area to create a point type object.

· Now type in your first legend label, Mine is “chrome.”

· Style the type as you like, but make it a color that contrasts with the color of the pie pieces.

I used Myriad Pro, 14 points and a CMYK color #110301

· Hold the Ctrl key and click away from the point type object to deselect it.

· Now click again with the Type tool and make your second label. Repeat this until you have separate point type objects for each of your pie pieces.

· One at a time, drag your type labels into the Symbols palette to create new symbols from each of them.

· After creating symbols, delete the original objects, or move them to the canvas.. When prompted for a name, use the browser names. Here is one

Here is my symbol panel now:

· Hide or delete the new layer

Note: If you did the poster exercise, you saw how to map art to surfaces: recall we had 6 sides of a cube and applied white pips to each surface

· Select the entire 3D graph with the Selection tool,

· On the Appearance Panel, double-click the 3D Extrude & Bevel attribute to reopen the 3D Extrude & Bevel Options.

· Turn Preview back on

· Click on the Map Art button.

In the Map Art dialog, the Symbol drop-down contains the label symbols we just made.

We want to apply art to the edges of the pie slices.

Top right is the surface ID to which they will be applied.

The arrows allow you to navigate between all the faces created by 3D Extrude & Bevel. Dominating the dialog is a preview of the object’s surface.

A light surface in the current view indicates a face that is visible with the current rotation of the graph; a dark rectangle denotes a surface that is not currently visible.

If you peer around the Map Art dialog, you will see on the 3D graph a red outline revealing which surface is currently shown in the Map Art dialog.

Here is surface 1: Based on its shape, it should go on a top of a slice I want an edge

Edges resemble rectangles

Here is top slice for Chrome…note the red outline, which indicates which surface is being mapped:

Here is Safari’s edge:

15. From the Symbol drop-down, choose the correct label for that slice.

And

it will instantly appear in the main part of the Map Art dialog

Here, I rotated the chart to expose what was a hidden face:

Is the label where and how you want it? Note that the symbol instance in the Map Art dialog has a bounding box. Use the bounding box to move, resize, and/or rotate the label until it fits your graph where and how you’d like. To rotate, hover your cursor just beyond a corner control point. When the cursor becomes a curved, double-headed arrow, click and drag to rotate (Shift-drag to constrain to increments of 45°).

16. Again using the arrows, move through the 3D graph’s surfaces, applying the labels where needed. If you may at some point rotate your graph, go ahead and apply the labels to surfaces hidden now that may become exposed during a rotation. Doing it now will save on accidental omissions later.

17. Add red serif 36 pt text, at the top: ”Browser Visitors 2015 in millions”

· When finished, save as PieFinal.ai

· Save for Web; save name CarPieChart.gif

· Upload your chart to your Illustrator page in Weebly.

Bottom of Form

Top of Form

Pie ChartPage 21