Concept
After our lecture, where we learned about how to visualize large amounts of data within p5, I remembered one popular image regarding the subject. This was the visualization of all McDonald’s locations in the USA. The map was nearly full of points representing the large amounts of fast-food chain restaurants, however, I realized that I had never seen a similar map for Europe. This inspired me to search for a file containing the locations of all McDonald’s restaurants in Europe, and consequently, visualize the data to see what the map of Europe will look like through McDonalds locations. I was able to find a .csv file with exactly what I was looking for published by a user on GitHub.
Implementation / Code
Since the project I am working on is very similar to the data visualization example we looked at in class, a lot of my code is very similar, including checking if the file loaded, checking if there are errors within the file, and so on. I also realized that it is unnecessary to run through the file again in order to plot the points onto the canvas. Or perhaps it might be… As I was trying to create the data visualization, I frequently used the example in the lecture notes as a template. However, even though the code seemed good, the mapping of the points did not resemble a map to me. The minimum and maximum Lat and Long coordinates were all correct and accurate after I checked them on Google Maps, however, the visualization itself did not resemble the map of Europe. This set me back, and I took a few hours off to come back later and think what might be causing this issue.
Something that was initially confusing to me, was determining the minmaxLatLong coordinates. The method of adding 10 and subtracting 10 from the variables “latitude” and “longitude” themselves seemed odd to me. I decided to try and instead use an extreme value for the initialization of the variables minLat, maxLat, minLong, and maxLong. To my surprise, this actually produced a visualization that seemed way more accurate, however, it was not scaled properly to the canvas. After playing around with the values, I was able to get a good scale on the canvas. I am yet to figure out why this worked out the way it did.
function getMinMaxLatLong() {
let singleRow = [];
for (let mcdRowNumber = 0; mcdRowNumber < strings.length; mcdRowNumber++) {
singleRow = split(strings[mcdRowNumber], ",");
let latitude = float(singleRow[0]); // first is latitude
let longitude = float(singleRow[1]); // second is longitude
if (isNaN(longitude) || isNaN(latitude)) {
// make sure they are numbers
print("Conversion to float failed; Skipping row " + mcdRowNumber);
} else {
if (mcdRowNumber == 0) {
// very interesting observation, by changing the initial values of min and max of the lat and long, the entire visualization shifts, why?
minLat = -20;
maxLat = 30;
minLong = 20;
maxLong = 70;
}
minLat = min(minLat, latitude);
maxLat = max(maxLat, latitude);
minLong = min(minLong, longitude);
maxLong = max(maxLong, longitude);
}
let xpos = map(longitude, minLong, maxLong, 0, width);
let ypos = map(latitude, minLat, maxLat, height, 0);
stroke(3);
point(xpos, ypos);
} // end of for loop
//inaccurate with the extreme values
//print("Latitude (min, max) = (" + minLat + "," + maxLat + ") ");
//print("Longitude (min, max) = (" + minLong + "," + maxLong + ")");
print("Finished.");
} // end of findMinMaxLatLong
Final Product