Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Start communicating ideas and diagramming data in a more interactive way. In this course, author Barton Poulson shows how to read, map, and illustrate data with Processing, an open-source drawing and development environment. On top of a solid introduction to Processing itself, this course investigates methods for obtaining and preparing data, designing for data visualization, and building an interactive experience out of a design. When your visualization is complete, explore the options for sharing your work, whether uploading it to specialized websites, embedding the visualizations in your own web pages, or even creating a desktop or Android app for your work.
In the movies up to this point we have been dealing with what are called primitive variables, that is variables that hold just one value at a time or arrays of primitive variables. On the other hand, another very common kind of variable, if you want to consider it that, is a string. And a string is not a variable because it actually consists of a number of character variables. So strings are usually used for analyzing texts, and in this movie, I want to show you how to create strings and in next one, I'll show you how to work with them.
I'm going to start by putting a comment with my file name here at the top, and I'm going to start by manually entering some text. This is the easy way to do it. What I do is, first as I need to declare the variable type. Now this one is String, please note it's a capital S. This is important, Processing is case sensitive, and also it's because this one is an object, it's not an individual variable and that's why it's got this capitalization.
I need to give a name to this one, I'm actually going to use a little line from the movie the Deer Hunter, and type equals and then in quotes, I'll put, "This is this. It's not something else." If I recall correctly, and then I finish with quotes and then a semicolon (;). So now I actually have a string of text that I can use, and what I can do is if I want to double-check on it, I can do a print line, and that's a long variable name, so I'm going to copy it and I can run it, and then you see that I have the text showing up down there in the bottom of the console.
On the other hand, a lot of times you actually want the text to show up somewhere else. And so what I'm going to do is I'm going to create a window here, 600x200 that we've been using so far. Turn on anti-aliasing. I'm going to give it a light gray background color, I'm going to give a fill, if you want the text to appear in a particular color, you need to give it a fill. This one, I'm going to go with the green, and then I'm going to place the text, use the function text, then give the name of the variable or the string.
It's telling me to put it right there and then where you're going to position it. In this one, I am going to put 100 pixels over and 140 pixels down, and I press Run and what I get is some bright green text on the light gray background. By the way, the pixels determine the baseline of the text. So it has more to do with the bottom left of the first line of text. That's a little hard to read, I'm actually going to change it to just straight black. I can do that by just removing the fill.
If I just come in back here, I am changing these two 0, 0s all the way through. There we go. That's the simple version. I do want to show you another thing that I'm going to do a little bit differently. And that's about reading text from an external file because that's usually how you're going to get your text. And this is going to be the first movie where we actually have a file to start with. If you go up to the folder for this movie, you'll see there is a file there called Szymborska, it's a text document.
If you double-click on it, you'll see it's a poem by the poet Laureate of Poland, Wislawa Szymborska called A Contribution to Statistics. It's a wonderful piece. And what you can do to add this to Processing, the easy way is to move over your whole folder window here and just drag the file onto the Processing window. And you can see right here, it says, one file added to the sketch on the bottom, and back in the window over here, you see that we now have a new folder called data, and we have this Szymborska text within that one.
Now normally, you would be dragging the text in from another place and of the same folder as the sketch already, but Processing creates a data folder and that's where it puts text, that's where it put images or fonts or other things that it needs to deal with. It just automatically, if you just drag the file into the Processing window, so I can close that one now. And what I want to show you is how to access that text and to read it a little bit. What I'm going to do is I'm going to create another string variable. And this one, I'll call it poemLines.
When you have a text file, each line of text is its own string, and so actually we're creating an array here because we have many lines of text. So I'm calling it poemLines, it's an array. And then the function that we want to use is loadStrings, and then in parentheses, and in quotation marks, we put the name of the text ("Szyborska.txt"), well, I'm missing a letter.
And then what I can do is I can do print line, and if I do poemLines, now what it's going to do is it is going to print the entire contents of the array which is the entire text file, so you don't want to do this if you have a huge thing. But this one isn't real long, so I can just hit Run, I get my Deer Hunter quote here, and then down here you can see that we have our array with every line of the poem.
It does a couple of funny things. Number one is, it's putting quotes around every line which is a little distracting. The other one is that there are blank lines in the poem and it's putting quotes with a blank there also, which isn't exactly what we want, but what we can tell is that it has successfully read the file. And I want to just a little something else here. I want to show you how you can read just one line at a time if you want. So right here, I have poemLines and that's going to read the whole entire thing. Comment that one out.
Let's read just a few lines, so for instance let's read zero and one. I can put index numbers in square brackets. If you want to refer to just one item in an array, that's how you do it. And I'm going to copy that, I'm going to put it on a separate line, and what this is telling is that I want to print the very first line which is index number zero and then the next line index number one in the poem. And now when I run it, there you can see I've got my first two lines. And so this is the initial way of creating arrays.
You can either enter them manually, like I did with my example of this quote, or you can load an external text file which is the most common way of doing this and then dealing with an array of strings that result from it.
There are currently no FAQs about Interactive Data Visualization with Processing.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.