Final – Global Billboard

The final version of “Global Billboard” is up at http://www.globalbillboard.org/. A mashup of google maps and the Last.fm, Global Billboard lists top artists and tracks on the last.fm for each country, and many metro areas throughout the world. Furthermore, it charts comparative popularity of the top artists and tracks in each country, in the google maps info windows as you view the site.

As you click through the site, you can open up past windows to compare one country to or metro area to another. As two people who did their first coding less than a year ago, this project was ENORMOUS, but we’re really proud of the result.

ALSO—for anyone who needs to style html select lists, we discovered a great library in the past week that does an awesome job with styling them, and is really easy to implement. It is simpler and more flexible than the auto-scrolling work-around that we were working with, in previous iterations. You can find it at: https://github.com/fnagel/jquery-ui.

Posted in Data Mashups!, Homework | Leave a comment

Data Sensor Network Final

Read all about the Easy Edibles project here »

the processing

the arduino

the php

Posted in Assignments | 1 Comment

The [Box Office] Economics of Emotions | Our Emotions, the Movies We Watch, and the Economy

The Project [+Inspiration].

It is no secret that our mood can influence what we want to see at the movie theater. Nor is it news that the overall state of the economy, through its direct impact on the lives of each one of us, can have a significant impact on our mood. So mathematically it would follow that the economic state of the nation would have some impact on the movies we watch, especially when we consider movies by genre. This documented relationship (there have been more than a couple studies on the topic) was the inspiration for this project—it is designed to allow you to see the relative popularity of each genre (based on the top 20 movies of each year to ensure that we are sampling movies that were actually popular with users) while simultaneously seeing the changing economic conditions over time.

The visualization is currently live at lizrutledge.com/boxoffice-economics for anyone interested in interacting with it first-hand! There is also a screen capture showing the visualization’s functionalities below.

Technology/Implementation

The visualization is built using a whole group of web languages, making use of a MySQL database, PHP to pull and parse the data, JSON to translate the PHP into javascript, and Processing.js to take these new js variables and visualize them dynamically. I also made use of a jQuery slider from a tutorial site that I heavily customized (in both appearance and functionality) to suit my rather specific needs. All text in the legends are clickable active html, overlaid on top of the canvas area in which the Processing sketch is running. This allowed for much easier and more fluid interactions by enabling me to simply use javascript onclick attributes to change variables without requiring any sort of click detection within the sketch or page refresh to acquire new PHP data.

Initial Concept Prototypes.

1. GDP Line Graph with Move Pop-Outs

This was my first full sketch on the concept, using a completely different strategy. This implementation would have focused more on the GDP data and simply scattered movie pop-outs along the length of the graph.

The [Box Office] Economics of Emotions | Original Concept Sketch

2. GDP Line Graph with Move Pop-Outs | Higher Fidelity

Once I got this into Illustrator, it ended up not looking like I had wanted to (imagine this picture with confetti all over it), so I decided to change course in order to emphasize the genre popularity more than the GDP information. (It may be richer data, but at the end of the day people are more interest in movies that they have an emotional connection with than the GDP from 1972.)

The [Box Office] Economics of Emotions | Second Concept Iteration

3. Area Graphs of Each Genre Over Time

This was an attempt to clean up the overall aesthetic and tackle the issue of displaying 12 different genres’ respective popularities over the same axis. While this type of area chart was not the answer, I was happy with the concept of focusing largely on the genres so continued to move in this general vein.

The [Box Office] Economics of Emotions | Third Concept Iteration

Final Concept: The First Iteration.

In this version of the visualization, I decided to move to bar charts that change dynamically over time instead of trying to tackle the issue of 12 different area graphics of varying magnitudes on the same axis. To interact with the visualization and see these relationships for yourself, you can move the slider left and right to view the composition of box office revenues separated by genre from 1948 to 2010—the bar charts will automatically resize to the new year’s data.

Below the bar chart on the right side, the top four movies of that year are dynamically shown, along with their genre for comparison.

In addition, there was a GDP graph below the slider (in a sort of spark line approach) to show the viewer what the economic conditions were for that year relative to a larger timespan. When moving across the time axis, increases in the GDP graph are denoted by the marker turning blue—drops in the data are denoted by the marker turning red. (So when the ball that glides along the GDP chart turns red, that indicates a period of economic downturn. Likewise, a red segment of a genre’s historical box office revenues would indicate a decrease in revenues from the last period, making it easier to notice the ups and downs.) While I was very happy with the animation of this part of the visualization, it felt very segregated from the rest of the data and needed to be further integrated.

The [Box Office] Economics of Emotions | First Iteration

Final Concept: The Current Iteration.

In this most recent iteration, I wanted to integrate the GDP chart more closely into the composition, so moved it behind the bar charts instead of down below the slider as it was placed in the last iteration. In addition, I added the functionality of detail views that let you see the relative popularity of each genre over time.

Just as before, to interact with the visualization and see these relationships for yourself, you can move the slider left and right to view the composition of box office revenues separated by genre from 1948 to 2010. In this new iteration, however, you can also click on one of the genres to see a more detailed historical visualization of the genre over time.

When moving across the time axis, increases in time-based line graphs are still denoted by the marker turning blue—drops in the data are denoted by the marker turning red. (So for example, when the ball that glides along the GDP chart turns red, that indicates a period of economic downturn.) By including this same functionality on the detail views of each genre as well, however, you can now watch the relationship between the GDP marker and the genre markers and begin to see the direct and inverse relationships that emerge from the data.

(And not to repeat myself, but in case you missed this in the first paragraph the visualization is currently live at lizrutledge.com/boxoffice-economics for anyone interested in interacting with it first-hand!)

The Main/Home Screen (View All Genres for Each Year)

The [Box Office] Economics of Emotions

The Detail View (View One Genre Over Time)

The [Box Office] Economics of Emotions | Detail View

Future Considerations.

Going forward, I have a handful of plans for this visualization. I have some APIs lined up (which never made it to the “editing table” due to time constraints) that would allow me to display cover art from top movies for each year, as well as link from the top four movies of each year to reviews (NYTimes is the obvious candidate but something like Rotten Tomatoes could be another option). With more time I would also like to develop a non-cluttered way to show the movie(s) responsible for each peak in the historical graph just by clicking on the point, and change the detail view’s “Top 4 Movies” to be the top four movies of that particular genre until you go back to the main view. And as with any design, there are a million little things that I would tweak to increase the level of polish.

These changes are only a few of the things I would love to do to refine this further and increase the functionality and strength of message—I hope to have more time over the summer to keep working on it. (So many changes, so little time!) I’m really happy with the improvements made in between the last iteration and the current one, and look forward to seeing what else I can improve upon with a much less limited schedule.

Posted in Homework | Leave a comment

Best-Sellers: Final

Posted in Assignments | Leave a comment

Final Project- Homicide Data visualization

Using a dataset from the FBI, I created this visualization for homicides in 2009 in the U.S.

Posted in Assignments, Homework, Uncategorized | Leave a comment

COLORS

colors by…

Posted in Assignments | Leave a comment

Lauren Gibbons: Final

NYTimes Article Search API exploring the distribution of the World, US & NY section.

Posted in Homework | Leave a comment

article search – ryan oh

 

 

 

 

 

 

 

 

 

 

Article search for three countries

 

Posted in Uncategorized | Leave a comment

Global Billboard API Mashup

Click here to visit GlobalBillboard!

Kenny and myself teamed up to create Global Billboard, a mashup of the Google Maps and Last.fm APIs that plots Last.fm listening data for top artists and top tracks onto a styled Google Map canvas. Users can see the top artists and tracks for a country, and when zoomed into a country, a metro area can be selected (provided Last.fm has listener data for that area) to drill down even further. Starting with wireframes and color studies, Kenny and I worked together to develop a layout and color scheme that not only provided an optimal viewing experience, but also reflected the sleek black and red feel of Last.fm.

Once development time came, we split the project into two parts– creating a stylized webpage in HTML5/CSS3 for the map and output to be placed into, and building the PHP/mySQL and JavaScript files that would call the Last.fm API, reference a database that contained respective metros for each country, pull top artists/tracks from users within the specified area, convert the “human-readable” address into a Google Maps LatLng value, and finally plot it to the map with a custom icon/shadow. We tried to get a database built to hold and serve the data remotely, which would possibly enable us to show listening trends over time, but after running into serious troubles with using the POST method to push and pull data, we reverted to calling the API live, which has the potential to max out our API key if subjected to enough traffic. Aside from some minor post-implementation styling tweaks, our original idea has survived the rigors of development. There is certainly some potential for this project to be introduced to the public with future iterations and improvements.

Posted in Data Mashups!, Homework | Leave a comment

Tweather

By Andrés and Francisco

Here are some of the images to illustrate weather conditions.

Posted in Data Mashups! | Leave a comment