Visualization of commuters

Tom_lilly

Hi

I'm very new to processing and how it works, but i want to learn how to use it for visualizing data I've collected for my university projects. I currently have data for the number of commuters that go to work outside of the town on the Isle of Wight, UK, and where they go. with this, i want to be able to produce a map similar to the maps you see of flight travel or network data but i cant find a useful source to learn from, and being a beginner with processing i can't think how to do this. If anyone is willing to guide me in the right direction that would be great!

Thanks Tom

Chrisir

Isle and where they go.

OK, do you have location data for those places?

Break your topic down into steps.

first you want to mark the places and connect them with simple lines.

use loadStrings or loadTable to load the data. See reference

https://www.processing.org/reference/

post the first 7 lines of the data here yo we can take a look

Hint

look at this, especially the last comment:

https://forum.processing.org/two/discussion/24493/interactive-map#latest

You can explore http://unfoldingmaps.org/

Further Reading

There is a tutorial on data, see

https://www.processing.org/tutorials/data/

Tom_lilly

Thank you for your advice Chrisir

I made a start of loading in the base image and the CSV data file, and so far its showing all the information. I don't have any GIS information of the locations. Would it be advisable to get this or can i get way with plotting the loctions manually?

this is the code script atm...

PImage IoW; Table table;

void setup(){

size(887,662); IoW = loadImage("data/IoW_commuteMap.png"); //ilse of wight image table = loadTable("data/Newport travel to work locations.csv", "header"); //CSV file of commuters background(IoW); smooth();

for (TableRow row : table.rows()) {

String name = row.getString("name");
println(name);
Float Total = row.getFloat("Total");
println(Total);

}

Chrisir

are you attempting to use unfoldingmaps.org?

What do you mean by base image, what does it show? Because when it's only the IoW does it show the places commute to as well?

because you wrote:

Would it be advisable to get this or can i get way with plotting the loctions manually?

This depends on how many cities you have etc.

Tom_lilly

sorry, i didn't specify beforehand. It's looking at the number of people commuting from Newport to other places on the isle of wight. In the CSV file, i have the names of each town on the isle of wight and the number of people that commuter there from Newport.

the image that i have it just of the isle of wight, attached,

I know im probably not explaining this all very well, so i do apologise.

Chrisir

If you don't want to use unfoldingmaps

You should probably provide a position for each town - like pixel position x,y, eg write them into your code as an hashMap or whatever

As said post the first 8 lines of the csv

Tom_lilly

name Total Bembridge 163 Calbourne 281 East cowes 619 Freshwater 175 Gloucester 13 Lake 157 Mainly work at/from home 963

Chrisir

Ah, so it's not 322 are commuters from city A to city b but just the cities the people work in?

Chrisir

save this code and copy the IoW image in it.

run this code separately and mark the cities on the island with the mouse

copy the data in the direct window into your main sketch, they are the pixel positions

use them in your main sketch :

int i=0;
PImage IoW; 

void setup() {
  size(887, 662);
  IoW = loadImage("data/IoW_commuteMap.png"); //ilse of wight image
}

void draw() {
  background(IoW);
}

void mousePressed() {
  println (i 
    + ": "+mouseX
    +","
    +mouseY); 
  i++;
}

Chrisir

this only works if both sketches have the same size and use the same image (and same image size).

you can add the pixel position to your csv file (fix commas with tabs or whatever):

name Total 
Bembridge 163,728,454
Calbourne 281,...,...
East cowes 619,...,...
Freshwater 175... 
Gloucester 13...
Lake 157...
Mainly work at/from home 963,-1,-1

or make 2 Arrays in your sketch in the same order (!) as cities in your csv file

float[] cityX = {
444,
111,
222,
421,
854
};

float[] cityX = {
144,
211,
122,
321,
754
};

Tom_lilly

Thank you for your feedback, it's been super helpful! i'll have a go at the different options you've mentioned and see how this works.

Thanks again :)

Chrisir

yeah, then in a for-loop with i you could say

ellipse ( cityX [i], cityY [i] , howManyPeople [i], howManyPeople [i]);

when you filled the data into cityX, cityY, howManyPeople