Category Archives: 21-Interactive-Map

Chanamon Ratanalert

11 Feb 2014

For this project, I ran through data on 499,000+ hotels, sorted out usable data for hotels in the US, plotted them in TileMill, and plotted the 10 most populous US cities and the 10 recommended places to visit in America.
Through this interactive map, one can see how the US has a large number of 1-2 star rated hotels and how the hotels are generally grouped along the most touristy or populated places. Interesting things to note are the specially marked cities that have few hotels around them and that many 4-5 star rated hotels are along the Eastern seaboard and the coast of southern California.

Things I’ve learned:
– how to find multiple ways to install software
– countless different installations may not work
– I liked using both programs together to make something work. It gave me a breadth and slight depth into different softwares and super deep insight into how to just “make it work”. This is something that I often find myself doing and will always do in the future. Not only can I spread my knowledge across multiple applications, but I can also learn how to use different applications more often rather than stick to one for a really long time, move on, and forget it forever.
– TileMill breaks down at about 700,000 data points. It can handle larger amounts of data when they are in shapefile form (as opposed to CSV format). This is why I did not include Alaska.


Extra sources:
10 Places in the US to visit
List of US Cities by Population

—————————————- Unnecessarily Detailed Details —————————————-

This is pretty literally what I did. Feel free to not read it:
1. Attempt parsing given CSV in open frameworks
2. Clean CSV of poop values
3. Successfully parse clean CSV in open frameworks
4. Attempt transferring CSV values into 2-d vector
5. Repeat step 4 for a few days
6. Look into alternatives and pick TileMill
7. Find out that TileMill cannot handle 20MB+ CSVs
8. Break down CSVs and successfully import data
9. Find out that TileMill dies with so many data points (Harris approximated point of death at 70,000)
10. Figure out that data as a shapefile will be more efficient
11. Attempt to use QGIS to convert to shapefile (thanks, Maya!)
12. Find out that QGIS needs 6 other programs, and matplotlib hates my computer
13. Download and attempt a million other matplotlib or qgis substitutes (optional: sketchiness)
14. Attempt to use Geotools to “CSV2SHP”.
15. Get owned by Geotools’ deceptive simplicity and decide that minimizing the data set to work on tilemill still counts as large dataset manipulation and beats not turning anything in.
16. Cut down the data in OpenFrameworks to all of Europe, then just Thailand, US, and Australia individually after Europe was also too large. Settle on Continental US + Hawaii.
17. Work until “done”
NOTE: I will be going back and 1. figuring out why matplotlib despises my computer 2. how to use get CSV2SHP to run, for my sake and for the sake of others. I don’t want anyone else driving themselves mad if they need alternatives to QGIS.

~~ Notes I wrote when I started this project a few weeks ago — I’m keeping them here for blogging habit purposes ~~
I fiddled with the idea of having a 3-dimensional globe with plots of all the hotels on it. Then depending on the price or ratings, the extrusion of the point from the “surface of the earth” would differ, creating a very 3-d pointy map. I realized after a while that this would be very complicated to do, especially considering I have no previous experience with openFrameworks, and possibly hard to read.

I then transferred to the idea of having a flat map with grid lines of latitude and longitude, no continents outlined, then the points plotted on the map. This would convey the global matter of established and impoverished countries, since 1st world countries would be full of points and distinguishable, but 3rd world countries would be less outlined. This is similar to the Verizon commercial campaign that has been on for a while.
For interactivity, besides from the points being colored based on a certain characteristic (stars, price, what have you — and possibly have this choice available to the user), hovering over certain areas of the map would create a sort of “flashlight” where you could then see the true outline and area of the country/continent.
NOTE: I transferred away from this idea 50% due to time, 50% due to someone else having finished a similar mapping idea before I could (Hats off to you, Maya!)

Brandon Taylor

11 Feb 2014

Loaded with the ofxCSV addon.  Convert Lat & Lon into 3d points (but get the math wrong so stuff is backwards) and make a mesh.  Draw it and use ofEasyCam and move it with the mouse.


A link

I also worked on a more interactive US map.   I had a goal of toggling between geographic mappings and a more abstracted mapping of state connections.   The data set I downloaded only have inter-state borders so lots of the states were screwed up.  The National Atlas data looked like a much better data set with a lot more points.USMap

Andrew Russell

11 Feb 2014

I created an interactive map that shows the total number of hotels per state (USA only) on one layer, and the number of hotels per capita per state on a different layer.  I used Tilemill, so it is easy to switch back and forth between layers using Tilemill’s UI.


Total Hotels per State

The total number of hotels is a fairly useless layer, since it strongly correlates with the total population of the state.  California has the most number of hotels, then Texas, then Florida and New York.  However, the number of hotels per capita shows some interesting data.  Wyoming has the highest number of hotels per capita, followed closely by Vermont. Hawaii and Alaska also have a large number.


Hotels per Capita

My first step to creating this map was to extract only the American hotels from the whole csv file.  I created a new csv file with just the state name. I wrote a Python script to count the number of times each state name appeared in the file, and created two colour values based on linear interpolation between a blue (#7070FF) and a red (#FF5959). One colour value was created from the rank of total hotels, and the other from the rank of per capita hotels.  I then output these colours in an .mss format, which is a styling format that Tilemill uses.


Collin Burger

11 Feb 2014

HotelsBase Visualization from Collin Burger on Vimeo.

The visualization that I made was pretty simple. I mapped all of the points to a sphere and added them to a mesh and drew it as if it were the earth. I added a GUI that enables the user to color the hotels that are a part of a chain and also to only show those hotels that are within a certain rating range. In addition, I added some post-processing effects such as bloom to give the points on the map a bit of a glow. The video embedded above shows off the functionality of my map visualization. It was interesting, although not at all surprising, to see that the vast majority of chain hotels are within the United States.


Yingri Guan

11 Feb 2014

Hotel Plot

Screen Shot 2014-02-11 at 4.44.06 AM

Nighttime lights visible on earth by NASA


After plotting these coordinates of the hotels, I started thinking about the specifics about the reason of their locations and wondering about the relationship with human economic activities. After further research, I found this stunning image of lights at night shot from the space. Interestingly, the greater the light intensity, the denser of hotel locations. The two maps almost look identical.  A much more intensive research “G-Econ” used 35 measures to compare the geographical and economic data sets across the globe. I think the locations of the hotels along says a lot about the geographical, economic and social aspects of the world.

Code from openFrameworks:

#include "testApp.h"

void testApp::setup(){
    // Load a CSV File.
//	csv.loadFile(ofToDataPath("hoteltest.txt"), "~");
//	cout < < "Print out a specific CSV value" << endl;
//	cout <<[0][1] << endl;
//	// also you can write...
//	//cout <<[0].at(1) << endl;
//	cout << "Print out the first value" << endl;
//	cout <<[0].front() << endl;
//	cout << "Maximum Size:";
//	cout <<[0].max_size() << endl;
   // csv.loadFile(ofToDataPath("hotel_latlong.txt"));

    ofBuffer file = ofBufferFromFile("hotel_modified.txt");
    while (!file.isLastLine()) {
    vector  values = ofSplitString(file.getNextLine(), "~");
       if(values.size()>=6) {
            float lon = ofToFloat(values[5]);
            float lat = ofToFloat(values[4]);
//            string name = ofToString(values[1]);
           coordinates.push_back(ofPoint(lon, lat));
    merMap.setup(mapImage.getWidth(), mapImage.getHeight(), -180.0000, -70.0000, 180.0000, 70.0000);
      ofSetWindowShape(mapImage.getWidth(), mapImage.getHeight());

void testApp::update(){


void testApp::draw() {

    mapImage.draw(0, 0);
    for(int i=0; i

Andre Le

11 Feb 2014


For this assignment, I ended up creating a very basic 3D map to get up to speed with OpenFramework’s OpenGL and 3D meshes as this was all new to me. I originally wanted to filter the data to reveal how hotel chains were connected, as well as how flight patterns correlated with the hotel data. Unfortunately, after lots of experimentation, much of that did not pan out as I expected in the timeframe allotted.


The addons used in this project were ofxCsv and ofxGrabCam, which allows for dragging and panning of the map.


Initially, I had gotten ModestMaps to work after fixing some dependency issues, but it proved to be too slow handle the 500,000 data points in the hotel dataset. On the plus side, it was a tile-based mapping library that performed very similarly to Google Maps, which may come in handy for projects without so many data points.

I then organized the hotel data by chains using a hashmap  and connected the vertices, but that caused everything to be too thick to view.

I also downloaded and parsed the OpenFlights airport and flight plan datasets and structured them in order to visualize, but also did not have time to make that happen.

Overall, even though I would consider this incomplete, I learned quite a bit about Xcode and OpenFrameworks. I seem to have gotten the hang of debugging errors that come up when integrating new addons into an existing project and I was able to help quite a few students with debugging their work.


Paul Peng

11 Feb 2014

In which Paul Peng makes a map of approximately 500,000 hotels using their price and hash number to determine their location. I also used their geographic locations to determine the area of the ground they take up and their height. I also made all of them white pyramid-like structures that kind of look like the Pyongyang Hotel in North Korea.

Screenshot from 2014-02-11 03:05:52 Screenshot from 2014-02-11 03:09:08 Screenshot from 2014-02-11 03:10:03 Screenshot from 2014-02-11 03:10:39 Screenshot from 2014-02-11 03:12:05 Screenshot from 2014-02-11 03:13:11 Screenshot from 2014-02-11 03:13:46

My original plan was going to include actual shading, a real ground, a color scheme that is both considerably less stark and considerably more alienating, rectangular prisms instead of pyramids, a slight fog to create a sense of atmospheric perspective, soft buzzy atonal (figuratively) pads that fade in and out very periodically but in a constant beat and whose tone and harshness depends on the nearby hotel substitute structures, and first person perspective and movement that allows one to travel through and become immersed in this strange world of alienated quantification. I would include sketches and mock-ups of this vision but unfortunately and in a move very uncharacteristic of me I have not made any of these sketches or mock-ups. I also would have implemented all of this if I didn’t begin implementation on the midnight before the assignment was due, which is also why I don’t have the ofxAddons assignment or the Web Scraping and Display Assignment done either.


Github link.

Video documentation pending for when I actually complete this and the rest of the second Upkit Intensive for real.

Kevan Loney

11 Feb 2014

This project was definitely a learning experience for me…

I don’t usually work with this much pure data, so it was quite the curve of figuring out how to use it in an efficient way. I’m still currently trying to figure out the most effective way to use this amount of data to map the coordinates.

My journey started by taking the tilde separated file of the Hotel Data and going through and cleaning it to make it usable. My first attempt caused massive errors when converting it to a CSV file using the ofxCSV addon for openFrameworks. After much debating, I found out a major problem was that there were commas in the tilde file before replacing the tilde with commas! These extra comma screwed my charting of the data from the very beginning… it was such a sad moment when I found out this simple error. So before converting the tildes to commas, I first converted the prior commas of the files to a period. This was the conversion didn’t get confused. This fixed everything, and laid out my data to create a clean CSV file.

The part that gave me even more trouble was plotting these points. I decided to use TileMill… I regret this decision now, due to the fact that no computer I’ve found can plot the mass amount of data through tileMill in an effective way. Every time I try to zoom to another layer or export, the entire program crashes my entire computer.


To try to allow my computer to breath a little (still to little avail) I went through the CSV file and deleted all non essential data. Thus, leaving only the Latitude and Longitude data. This still didn’t provide adequate breathing room for TileMill so I trimmed it a bit more to only plot above the equator. This was the last image I could get out before my computer crashes.

Next time, I’ll stick to openFrameworks, where it seems much more likely that it can handle this much data in a more interactive way. As a whole this experience taught me a lot about large quantities of data, and how I need to learn how to use them more efficiently.




Spencer Barton

11 Feb 2014

Hotels of the World: Soap & a Globe

C++ and openframeworks was a whole new can or worms for me. I knew it would be tricky and I was not let down.

It began with linker errors on provided examples. I switched from VS to codeBlocks and was much happier. From there I needed to tackle the data. I quickly learned that real world data is not clean. Our dataset had NULLs scattered throughout, random unfilled sections and unlikely hotel addresses. For both of my attempts to visualize the data I did much cleaning and reduction before loading into the programs.

Attempt 1: Globe

Screenshot 2014-02-11 01.52.29

I took the simple approach of mapping hotel locations to a globe. The globe image was logical and the red dots showed well. Simple zoom, tilt and pan is implemented.


Attempt 2: Bars of Soap

Screenshot 2014-02-11 01.50.51

Screenshot 2014-02-11 01.51.13

I got to thinking about hotels and I remembered all those bars of soap. Every morning at every hotel I’ve been too I get a new bar of soap even if the one I used the night before is in fine condition. I used this as inspiration. Hotel capacity by country was mapped to the area of the bars of soap in the visualization. The data being of US origin was skewed heavily towards the US and common US tourist destinations. Nonetheless it is interesting to note the shear volume of soap spent daily. This may be a gross approximation but I imagine the order of magnitude is close enough. I went for the pile of soap because this is a pile of disposed bars of soap. The user can pick-up the bars of soap.


World’s Hotel God Tool

[vimeo 86370143 w=600]

The World’s Hotel God Tool displays some 499,000 hotels throughout the world as individual OpenGL points. The points are controlled by a customized version of Golan Levin’s MPM-Fluid, which I renamed ofxMPMFluid. I made several modifications to the library, most notably adding the ability to specify the starting location of each point on setup, as well as the ability to specify a unique RGBA color for each point, and the ability to reset all points to the original position. I’ll explain the functionality a bit later.


The World’s Hotel God Tool wasn’t my first pass to visualize the hotel dataset. I originally went down the path of placing points on a ofMesh and using ofxGrabCam to manipulate the perspective in three dimensions. The visualization above displays all the hotels on the X Y axis with the number of rooms in the hotel as the Z axis. Below I experimented with with several X Y planes. Here there was a plane for each hotel star rating from 0 to 5. Don’t mind the color choices, they were randomly chosen for this proof of concept.


Below are screenshots of the final design. The points are managed by a MPM Fluid library I customized to give the points a sexy particle effect. The user can grab a section of the map and throw it at another continent, completely obliterating it. You can also adjust the physics settings live using a control panel at the bottom. When you want to start over, just press ‘r’ and all the points will flow back to their original position.

Voila_Capture24 Voila_Capture 2014-02-10_08-37-33_PM Voila_Capture 2014-02-10_08-57-19_PM

openFrameworks Add-ons:
– ofxCSV
– ofxMPMFluid (Customized: Source)
– ofxControlPanel
– ofxXMLSettings