Visualization of commuters


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


  • edited October 2017

    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

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


    look at this, especially the last comment:

    You can explore

    Further Reading

    There is a tutorial on data, see

  • 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");
    Float Total = row.getFloat("Total");


  • edited October 2017

    are you attempting to use

    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.

  • 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, IoW_commuteMap

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

  • 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

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

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

  • 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() {
    void mousePressed() {
      println (i 
        + ": "+mouseX
  • 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 = {
    float[] cityX = {
  • 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 :)

  • edited October 2017

    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

Sign In or Register to comment.