Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating bar charts

From: Interactive Data Visualization with Processing

Video: Creating bar charts

In the previous movies, the data that we were charting was quantitative, that it measured something that was more or less, and often it was floating-point data, so we would have decimal places. On the other hand, sometimes you're counting discrete events or categories, but you're counting the frequency of occurrence in those categories. And when you have that kind of data, it can be very helpful to use a bar chart. Now, bar chart is a very common kind of chart, and it's done in Excel a million times a day, but I'm going to show you how you can bring some extra life and interest to a bar chart by giving some interaction in Processing.

Creating bar charts

In the previous movies, the data that we were charting was quantitative, that it measured something that was more or less, and often it was floating-point data, so we would have decimal places. On the other hand, sometimes you're counting discrete events or categories, but you're counting the frequency of occurrence in those categories. And when you have that kind of data, it can be very helpful to use a bar chart. Now, bar chart is a very common kind of chart, and it's done in Excel a million times a day, but I'm going to show you how you can bring some extra life and interest to a bar chart by giving some interaction in Processing.

Now, the first thing I'm going to do is I'm going to get a dataset about Olympic medal counts. I went to databaseolympics.com, and I actually got some information about the early 1900s Olympics, when it turns out that the tug of war was a team sport. And what I have here is a complete list of countries that won medals in the men's team tug of war. There was only a men's event. It was only a team event. But we have all the countries that won medals. Just as an interesting little note, the gold medal in 1900 was won by a team with people from both Sweden and Denmark.

Sweden went onto win another medals, Denmark never won any other, so I've just attributed that one went to Sweden. Anyhow, but because I have my data in a summary table, I'm actually able to put it straight into the sketch. I'm able to embed it, and I'm using a few arrays that are relatively short. The first one gives the name of the countries, gives the three letter abbreviations that appeared in the dataset. Those are also really good to use as labels underneath the bars. The second array is integers, and that simply indicates how many medals each country won in this event.

And the third string is the full names of each of the countries, which can be helpful for when we do a rollover, to get extra information about what happened. Now, please note, I don't have the Table class on a separate tab that I've had in several of the other ones. That's because I don't need it. The data that I have is all right here at the top, in these arrays. That makes things a little bit simpler. So now I'm going to scroll down to the setup, and I've got a window that's 600 pixels wide, 200 pixels tall. I've loaded two fonts, a titleFont and a labelFont, by using Processing's FontCreator. And again, you may or may not have the exact same fonts available on your computer.

If you don't, you can either comment these fonts out or you can create your own and replace them. I've also turned on anti-aliasing, and I'm placing the rectangles, because each bar is a rectangle, I'm centering them so I can use the same coordinates for placing the rectangles and for placing their labels. In the draw loop, the first thing I do is I'm placing the background. Also, instead of using the palettes, like I've done in most of the others, this time I am just entering hex codes directly. And the background is a dark gray and I've also turned off the outline for the shapes.

Then what I do, I'm creating some variables that I will use for calculating borders around the fence. I have one called bb for the bottom border. That means I want to have a, sort of a buffer there of 40 pixels, and lb for the left border, 75 pixels. And then I have a for loop. I'll scroll that one up a little bit. And what this does is it goes through the arrays one item at a time, starts at zero. And I do the length of the tug countries. That's the one that have the three letters. But since all of the arrays are the same length, I can use any of them.

It's just counting to the same point. In there, I also put in a variable w for the width of the bars that I chose and how much space I want between the bars, and then I pull in an array of variables t, and that's how tall each bar should be, and that comes from how many medals they won multiplied times 20 pixels to get it it's about the right height for the window. Then I have another one where I calculate the X position. That's going to be the left-right of the bar, and then I have got a kind of complicated formula there.

What it is is I start by putting in the lb. That's the buffer on the left. So push everything over to a certain extent, and then I want you to take the letter i, and that's the increment. It starts, it goes from 0 to 1 to 2 to 3, and I want to add on .5 to that, so the first one gets 0.5, the next one gets 1.5, and then I want to multiply that times the combined width of the bar and the space between the bars. So what that does is it takes that unit and just multiplies it and it gets me the midpoint of every bar that I'm going to need.

So that's going to be the X position, the left-right of every bar. I'm also going to use that for the labels. After that, I create a new array for Y, and what that does is it gives me the coordinates for the center of each bar going up and down, because that's how we're positioning them. And that one again, I have to get the full height of the window, which is 200 pixels, and then I subtract the bottom border, which is--I recall, how big is the bottom border? It's 40. So that's 200 minus 40.

There we are, back in the middle. And then from that, I subtract half of the height of each of the bars as I go through, to get to their midpoint. Again, a little bit of complicated algebra here, but it makes it so I can place these things using the center function. Then what I have is I've got another if set, and this is actually to use for rollovers. And because I'm dealing with rectangles here, I have to have these four if statements to determine if the mouse is within the rectangle for a particular country. And that's why I do that mouseX is greater than the left border of the bar, less than the right border, greater than the top of the bar, and less than the bottom of the bar in between. And if it does all that then I change the fill to a bright yellow.

Interestingly, you have the option of importing, for instance, the image files or the flags of each country and having those pop up. That gets a little busy. It's a little more complicated. Aesthetically, it's not my first choice, but it's something that you could do if you wanted. Also, I'm going to, when we do the mouseover, I'm going to bring up some extra information: the full name of the country, along with its medal count right next to it. You'll see that I have a few lines commented out at the bottom. That's something I'm going to show a little bit later, and that allows me to make it so that the extra information appears only if you click on each bar.

But right now, all you've got to do is roll over and hover on them. And then I have some code that says if you're not hovering over it, leave it a light-gray-- that's the CCCCCC--and then I have the actual draw the rectangle for each one. So they all have their own x and y positions. They're all the same width, so the w doesn't need to have an index number. But they do have different heights. Beneath that is to place the labels, the short three-letter versions of each country name, beneath the bars.

The next little block of code is to put labels on the left side of the axis, going up, to count off, these are tick marks of 0, 1, 2, 3, 4, 5 medals that country has won. And then the very last thing is the title that goes across the top. Now, I do want to mention something: in earlier versions of this, I had that title a little higher up in the code. It was in the for loop, and it came up very fuzzy, and it was because it kept overwriting it several times during each draw loop.

It's still in the draw block, but I've taken it out of the for loop that's in the draw block, and that helps sharpen things up. Anyhow, I'm going to scroll back up to the top here, and I'll hit the Play button, and there is our bar chart. And you see, for instance, I didn't actually have to insert an actual line across the bottom, because we have a very nicely implied line by the bottom of the boxes. We got a nice amount of separation. It's clean. You can tell that Great Britain has won more than Sweden and USA, who won more than any of the other countries.

And as we bring the mouse over, you see each one turns a bright yellow, and then we get the full name of the country, along with the indication, again, of how many medals that country won. So it's a very basic form of interaction, and what I'm going to do right now is I'm just going to come back and I am going to make one little switch here, because I have mentioned this one. I am going to make it so that you actually have to click. I'm going to uncomment those, and I'm going to comment that one and turn it off, and now I'll run the chart again. And now when I mouse over, it turns yellow, but the actual information doesn't show up until I click on the mouse, or I click on the bar.

So, if you want to have a two-stage interaction, that's another choice on how you can do that. Anyhow, a bar chart is a very basic chart, but hopefully what you've been able to see here is that we can get some more control over the aesthetics and the arrangement and a whole lot more control over the form of interaction than you could in, for instance, a standard spreadsheet program. So, Processing can take even a very basic kind of chart and make it something more interactive and more interesting and I think more informative.

Show transcript

This video is part of

Image for Interactive Data Visualization with Processing
Interactive Data Visualization with Processing

72 video lessons · 13602 viewers

Barton Poulson
Author

 
Expand all | Collapse all
  1. 3m 16s
    1. Welcome
      58s
    2. What you should know
      1m 22s
    3. Using the exercise files
      56s
  2. 11m 51s
    1. Overview of data visualization
      11m 51s
  3. 11m 53s
    1. Installing Processing
      3m 38s
    2. Overview of Processing
      4m 5s
    3. Exploring libraries
      4m 10s
  4. 1h 1m
    1. Basic setup
      7m 31s
    2. Drawing points
      4m 37s
    3. Drawing lines
      5m 6s
    4. Drawing ellipses and circles
      5m 24s
    5. Drawing arcs
      6m 54s
    6. Drawing rectangles and squares
      4m 58s
    7. Drawing quadrangles
      3m 25s
    8. Drawing triangles
      2m 55s
    9. Drawing polygons
      3m 37s
    10. Drawing simple curves
      4m 54s
    11. Drawing complex curves
      6m 46s
    12. Drawing Bézier curves
      5m 38s
  5. 54m 3s
    1. Introduction to variables
      10m 44s
    2. Understanding variable scope
      6m 53s
    3. Modifying variables
      9m 8s
    4. Creating arrays
      9m 53s
    5. Modifying arrays
      6m 37s
    6. Creating strings
      7m 3s
    7. Modifying strings
      3m 45s
  6. 1h 2m
    1. Incorporating randomness
      7m 59s
    2. Using Perlin noise
      4m 24s
    3. Shuffling with Java
      3m 30s
    4. Specifying line attributes
      8m 2s
    5. Changing placement modes
      5m 45s
    6. Understanding color attributes and functions
      4m 16s
    7. Exploring color spaces
      7m 44s
    8. Using color palettes
      7m 5s
    9. Transforming the grid
      8m 38s
    10. Exploring the attribute matrix
      5m 33s
  7. 52m 7s
    1. Building code blocks
      5m 57s
    2. Writing a while loop
      3m 52s
    3. Using for loops
      5m 35s
    4. Creating conditionals
      14m 50s
    5. Working with easing
      10m 51s
    6. Creating spirals
      11m 2s
  8. 18m 55s
    1. Mouse tracking
      3m 54s
    2. Hovering and clicking
      11m 16s
    3. Understanding keyboard interaction
      3m 45s
  9. 27m 32s
    1. Specifying fonts
      6m 43s
    2. Using images
      5m 51s
    3. Playing a video loop
      6m 20s
    4. Exporting video
      3m 47s
    5. Adding sound
      4m 51s
  10. 20m 49s
    1. Creating functions
      11m 48s
    2. Creating classes and objects
      9m 1s
  11. 31m 10s
    1. Using embedded data
      5m 26s
    2. Working with appended text data
      6m 4s
    3. Working with appended tabular data
      10m 26s
    4. Reading XML data
      9m 14s
  12. 48m 17s
    1. Generating dot plots
      11m 11s
    2. Building scatter plots
      10m 0s
    3. Making line plots
      9m 55s
    4. Creating bar charts
      9m 12s
    5. Checking out examples of maps, hierarchies, and networks
      7m 59s
  13. 20m 57s
    1. Introducing some principles of 2D design
      13m 44s
    2. Understanding color theory
      7m 13s
  14. 24m 46s
    1. Interacting with zooming, rotating, and sliding
      6m 26s
    2. Implementing slicing
      6m 47s
    3. Using rollovers
      5m 58s
    4. Introducing the GUI libraries
      5m 35s
  15. 10m 35s
    1. Sharing via OpenProcessing and other sites
      3m 19s
    2. Saving as a desktop application
      2m 42s
    3. Saving as JavaScript
      1m 47s
    4. Saving as an Android application
      2m 47s
  16. 2m 38s
    1. Where to go from here
      2m 38s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Interactive Data Visualization with Processing.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.