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.
One of the most exciting things you can do with Processing is to be able to access live web data. You can get information from all around the Internet, all around the world, constantly update it, and bring it into your computer and use that for your own data analysis, for your own sketch work, for your own exploration. And the way that you can do this in Processing is using XML, that's Extensible Markup Language, and combining that with an API, an application program interface, that allows your computer to talk with the web servers to get the data.
Between the two of those, you can get this information into Processing, and that opens up a whole new world, literally, of data for you to work with in your own projects. Now what I'm going to show to you in this one is a very, very simple version here. I want to show you this one web page, a wonderful project that was created in Processing called We Feel Fine. It's at wefeelfine.org, and this is a project that was created by a couple of researchers, Jonathan Harris and Sep Kamvar, not that we really need to see those guys.
And I just want to show a little bit about the methodology, what this does. We feel fine collects data around the Internet, from a wide variety of places, about phrases that talk about feeling or feel, and it brings them in and depicts them in several different ways. I just wanted to show down here, as we get to this, that the application that we're going to be using was created in Processing. So this is an example of the kind of extraordinary data visualizations that you can create in Processing once you get the data in there together.
Now, the nice thing about this project, if I back up to the front page, is you see here at the bottom of the pink list, they actually have the information on their API, with a beautiful quote from Pablo Picasso: "Bad artists copy and great artists steal." Put that up on your wall and live by that one. And what we have here is information about how the API works. Basically, it's a kind of web address, a kind of URL that starts with this phrase up here, and then you can add onto it attributes for other kinds of information you want, and they give all sorts of examples right here.
Now we've already got a sketch with an edited API call init. We're going to go to that in one second, but I do want you to have just an idea of what We Feel Fine actually looks like. So I'm going to take a second and launch this one. It opens up in a separate window, and it takes a moment to get there. And what we have is an explosion of data from around the web, and these all represent blog posts or other Internet data where people have mentioned feelings. If I come out here and click on one: "the Sheffield house is going to feel the love." Click in a blank space and you can make this poof, out-explode.
And there are several different things you can do. You can check for particular feelings. You can check for feelings for men and women, their age, their weather, their location, the country, city, the date, and also different ways of depicting it, of a montage. There we go, the mobs, and so many others. This is just an amazing collection of way of depicting information and for me, as a social psychologist, it's sort of the jackpot of people's uncensored feelings and reactions.
Anyhow, I want to show you how to get a little bit of data out of this, into Processing, which would serve as a starting point for your own data visualization explorations. So what I'm going to do is I'm going to come back to the sketch for just a moment and show you what we have here. I should put my comment up here. The very first thing we have is that we need to import a library for Processing called ProXML. That's a way of accessing this kind of information. It's available for Processing, but it's not available from within the program.
What you have to do is go to the Processing website. So we are going to go back to the web for a moment. I'm going to go to this tab, Processing, and you go to Reference, to Libraries and then we scoot down just a little bit, and then you go, then right here it says Data and Protocols on the left. And then one we're looking for is down here, near the bottom. It's called proXML. It allows Processing to read and write XML files.
So I'm going to click on that, and from there, it brings me to a web page that also serves as the reference for this library. So if you want to find out about how the bits and pieces of it work, count all children, there's your information right there. I'm going to back up, and at the bottom of this page it says download:proxml.zip. You click on that and download it to your computer, and there it is. And now what you need to do is just take that and drag it over to your libraries folder in Processing.
And once you drag it over there, you need to go quit Processing and restart. Now I've already done this and already installed it, so I'm not going to do that, but that is the procedure that you would use. So I'm going to close this now. And I'll close this page as well. At creativecomputing.cc/p5libs/proxml, but it's linked directly from the Processing page right here. So I can close the both of these.
And then let me explain what's going on in here. So the first we do is we're loading the library. This loads the proxml library, which allows Processing to access this XML information. The second step is we're using the XML InOut class and creating an XML InOut object. By the way, notice the difference in capitalization. Classes have capital letters-- they start with capitals--but objects start with lowercase, and that's one of the ways you can tell the difference between the two of these. Then we have our setup.
We have a window that's 600 x 200, although that's actually irrelevant because the stuff we're going to be looking for is going to show up in the console, the black area at the bottom. Then we have an instantiation of our object. It says xmlInOut = new, and then class name, because you see the capital letters, of XMLInOut, with this referring back to the most recently created object. And then we have what's called the load element method. You see that it says xmlInOut--that's the object--and then the .loadElement for the method.
And then we have this URL, and that's the actual thing that we're going to be using to get the information. In fact, you can see that it says api, right there at the beginning. In terms of api, this is a very brief one, but we're using this to simply show you what is possible. And in fact, if you want to see it, you can copy this code. I'm just going to copy that. And I've managed to quit Firefox already, so I'm going to open that back up. And then I'm going to paste it up here. And a funny thing happens when you hit it and it opens up a blank page, but in Firefox here, if I right-click on the page and go to View Page Source, this is the information that we're going to be pulling into Processing.
And what it is is you see that we have, on the left, it's pulling the feelings and then you see we have the actual feeling that the people have. We have the post date, when they put it up there, and we have the sentence that contains the feeling information. I'm going to close that, close that, and come back here to Processing. Then what we do is we come down and we have an xmlEvent, and that's where it's going to go through the APIs information one line at a time.
That's the element.countChildren. And we're going to get two things printed out of that. The first one is it's going to do what's called getting the children, and it's going to print out the post date: When did the people actually put this information up on the web? The next thing we're going to do is we're going to print the actual sentence that they wrote. You'll see there, at the beginning of the second print line, in quotes, there's a backslash and a t. That is the Tab command, and I am just going to indent this second line element a little bit to make it easier to read.
So this is all ready to go. I'm just going to come up and press Run. I get my empty window. Don't worry about that. It's this one that we're interested in, down here. And you see that when we scroll through, there are the 50 entries that it pulled for us. I'm feeling excited and generous. I feel so grateful. these are wonderful things. And so the point here is is that Processing by using XML and the We Feel Fine API has been able to go onto the web and pull this information from a live Internet data source and bring it into Processing.
This is simply the first step of what really has immense potential for your own work, that you can then take this data and start using it in your own data visualization and your own creative work.
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.