Using arrays within a project to pull information from a table.

groomage

Sorry for the length of the post, but I'm new to processing, but LOVE IT. I want to try and get better and am working with some of the texts on offer, but am having difficulty with my current project. Below is the looong code I have so far, and following it is the arrays I am trying to use to really compress it.

//SHAPES
PShape p;
//  FAR NORSIDE
PShape LS;
PShape RP;
PShape WR;
PShape UPT;
PShape LINC;
PShape AP;
PShape EW;
PShape NP;
PShape FG;
PShape JP;
PShape NWP;
PShape EP;
PShape OHA;
//  NORTHSIDE
PShape NC;
PShape LP;
PShape LV;
PShape AV;
//  CENTRAL
PShape NN;
PShape NS;
PShape LOOP;
//  SOUTHSIDE
PShape OAK;
PShape FUL;
PShape ARM;
PShape KEN;
PShape WASH;
PShape HYDE;
PShape GRA;
PShape DOUG;
PShape WOOD;
PShape BRI;
PShape SSH;
PShape GGC;
//FAR SOUTHEASTSIDE
PShape A;
PShape CH;
PShape PO;
PShape AVP;
PShape ES;
PShape CHA;
PShape SC;
PShape WPUL;
PShape RIV;
PShape ROS;
PShape HEG;
PShape SD;
//FAR SOUTHWEST SIDE
PShape MOUNT;
PShape WH;
PShape MP;
PShape AG;
PShape BEV;
PShape ASH;
//SOUTHWEST SIDE
PShape WEL;
PShape MC;
PShape AH;
PShape GP;
PShape LAWN;
PShape DP;
PShape ENG; 
PShape WL;
PShape WEW;
PShape CL;
PShape GR;
PShape NEW;
//  NORTHWEST SIDE
PShape MONT;
PShape HO;
PShape IP;
PShape DU;
PShape BEL;
PShape PP;
// WESTSIDE
PShape WGP;
PShape EGP;
PShape LWS;
PShape NL;
PShape HP;
PShape SL;
PShape WT;
PShape NWS;
PShape AU;
PShape lines; 

//FLOATS
float diameter;
float radius = 10;

boolean a = false;


void setup () {

  size(720, 720);
}
void draw() {
  background(200);
  ellipseMode(RADIUS);
  fill(0, 0, 0);
  ellipse(418.819, 194.913, radius, radius);
  if (dist(418.819, 194.913, mouseX, mouseY) < radius+2) {
    fill(0);
    ellipse(110, 600, 100, 100);
    textAlign(CENTER);
    fill(255);
    text("Logan Square - 73,595", 110, 600);
  }
    ellipse(457.675, 35.429, radius, radius);
  if (dist(457.675, 35.429, mouseX, mouseY) < radius+2) {
    fill(0);
    ellipse(110, 600, 100, 100);
    textAlign(CENTER);
    fill(255);
    text("Rogers Park - 54991", 110, 600);
  }
     ellipse(421.67, 51.769, radius, radius);
  if (dist(421.67, 51.769, mouseX, mouseY) < radius+2) {
    fill(0);
    ellipse(110, 600, 100, 100);
    textAlign(CENTER);
    fill(255);
    text("West Ridge - 71942", 110, 600);
  }
  ellipse(484.352, 116.866, radius, radius);
  if (dist(484.352, 116.866, mouseX, mouseY) < radius+2) {
    fill(0);
    ellipse(110, 600, 100, 100);
    textAlign(CENTER);
    fill(255);
    text("Uptown - 56362", 110, 600);
  }

  //      KEY
  //FAR NORTHSIDE
  fill (0, 150, 0);
  rect(90, 250, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Far North Side", 120, 265);
  //NORTHSIDE
  fill (150, 0, 0);
  rect(90, 280, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("North Side", 120, 295);
  //CENTRAL
  fill (0, 0, 150);
  rect(90, 310, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Central", 120, 325);
  //SOUTHSIDE
  fill (100, 100, 150);
  rect(90, 340, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Southside", 120, 355);
  //FAR SOUTHEAST SIDE
  fill (50, 100, 150);
  rect(90, 370, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Far South-East Side", 120, 385);
  //FAR SOUTHWESTSIDE
  fill(50, 120, 50);
  rect(90, 400, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Far South-East Side", 120, 415);
  //  WESTSIDE
  fill(211, 200, 68);
  rect(90, 430, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Westside", 120, 445);
  //NORTH WEST SIDE
  fill(87, 25, 66);
  rect(90, 460, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("North-Westside", 120, 475);

  p = loadShape("neighbourhood maps-01.svg");
  lines = p.getChild("lines");
  //  FAR NORSIDE
  UPT = p.getChild("UPT");
  RP = p.getChild("RP");
  WR = p.getChild("WR");
  LINC = p.getChild("LINC");
  EW = p.getChild("EW");
  AP = p.getChild("AP");
  NP = p.getChild("NP");
  FG = p.getChild("FG");
  JP = p.getChild("JP");
  NWP = p.getChild("NWP");
  EP = p.getChild("EP");
  OHA = p.getChild("OHA");

  //NORTHSIDE
  LS = p.getChild("LS");
  LP = p.getChild("LP");
  NC = p.getChild("NC");
  LV = p.getChild("LV");
  AV = p.getChild("AV");
  p.disableStyle();
  noStroke();

  //  CENTRAL
  NN = p.getChild("NN");
  LOOP = p.getChild("LOOP");
  NS = p.getChild("NS");

  //SOUTHSIDE
  OAK = p.getChild("OAK");
  FUL = p.getChild("FUL");
  ARM = p.getChild("ARM");
  KEN = p.getChild("KEN");
  WASH = p.getChild("WASH");
  HYDE = p.getChild("HYDE");
  GRA = p.getChild("GRA");
  DOUG = p.getChild("DOUG");
  WOOD = p.getChild("WOOD");
  BRI = p.getChild("BRI");
  SSH = p.getChild("SSH");
  GGC = p.getChild("GGC");

  //FAR SOUTHEASTSIDE

  A = p.getChild("A");
  CH = p.getChild("CH");
  PO = p.getChild("PO");
  AVP = p.getChild("AVP");
  ES = p.getChild("ES");
  CHA = p.getChild("CHA");
  SC = p.getChild("SC");
  WPUL = p.getChild("WPUL");
  RIV = p.getChild("RIV");
  ROS = p.getChild("ROS");
  HEG = p.getChild("HEG");
  SD = p.getChild("SD");

  //FAR SOUTHWESTSIDE
  MOUNT = p.getChild("MOUNT");
  WH = p.getChild("WH");
  MP = p.getChild("MP");
  AG = p.getChild("AG");
  BEV = p.getChild("BEV");
  ASH = p.getChild("ASH");

  //SOUTHWEST SIDE
  WEL = p.getChild("WEL");
  MC = p.getChild("MC");
  AH = p.getChild("AH");
  GP = p.getChild("GP");
  LAWN = p.getChild("LAWN");
  DP = p.getChild("DP");
  ENG = p.getChild("ENG");
  WL = p.getChild("WL");
  WEW = p.getChild("WEW");
  CL = p.getChild("CL");
  GR = p.getChild("GR");
  NEW = p.getChild("NEW");

  //  NORTHWEST SIDE
  MONT = p.getChild("MONT");
  HO = p.getChild("HO");
  IP = p.getChild("IP");
  DU = p.getChild("DU");
  BEL = p.getChild("BEL");
  PP = p.getChild("PP");

  // WESTSIDE
  WGP = p.getChild("WGP");
  EGP = p.getChild("EGP");
  LWS = p.getChild("LWS");
  NL = p.getChild("NL");
  HP = p.getChild("HP");
  SL = p.getChild("SL");
  WT = p.getChild("WT");
  NWS = p.getChild("NWS");
  AU = p.getChild("AU");

  shapeMode(CORNER);

  //APPLY SIZE AND COLOR TO NEIGHBOURHOODS

  //  shape(lines, 0,0);

  //NORTHSIDE
  LS.disableStyle();
  fill(150, 0, 0);
  shape(LS, 0, 0);
  shape(NC, 0, 0);
  shape(LP, 0, 0);
  shape(LV, 0, 0);
  shape(AV, 0, 0);

  //  FAR NORSIDE
  UPT.disableStyle();
  fill(0, 150, 0);
  shape(UPT, 0, 0);
  shape(RP, 0, 0);
  shape(WR, 0, 0);
  shape(LINC, 0, 0);
  shape(EW, 0, 0);
  shape(AP, 0, 0);
  shape(NP, 0, 0);
  shape(FG, 0, 0);
  shape(JP, 0, 0);
  shape(NWP, 0, 0);
  shape(EP, 0, 0);
  shape(OHA, 0, 0);

  //CENTRAL
  LOOP.disableStyle();
  fill(0, 0, 150);
  shape(LOOP, 0, 0);
  shape(NN, 0, 0);
  shape(NS, 0, 0);

  //SOUTHSIDE
  OAK.disableStyle();
  fill(100, 100, 150);
  shape(OAK, 0, 0);
  shape(FUL, 0, 0);
  shape(ARM, 0, 0);
  shape(KEN, 0, 0);
  shape(WASH, 0, 0);
  shape(HYDE, 0, 0);
  shape(GRA, 0, 0);
  shape(DOUG, 0, 0);
  shape(WOOD, 0, 0);
  shape(BRI, 0, 0);
  shape(SSH, 0, 0);
  shape(GGC, 0, 0);

  //FAR SOUTHEASTSIDE
  A.disableStyle();
  fill(50, 100, 150);
  shape(A, 0, 0);
  shape(CH, 0, 0);
  shape(PO, 0, 0);
  shape(AVP, 0, 0);
  shape(ES, 0, 0);
  shape(CHA, 0, 0);
  shape(SC, 0, 0);
  shape(WPUL, 0, 0);
  shape(RIV, 0, 0);
  shape(ROS, 0, 0);
  shape(HEG, 0, 0);
  shape(SD, 0, 0);

  //FAR SOUTHWESTSIDE
  WH.disableStyle();
  fill(50, 120, 50);
  //  shape(MOUNT, 0, 0);
  shape(WH, 0, 0);
  shape(MP, 0, 0);
  shape(AG, 0, 0);
  shape(BEV, 0, 0);
  shape(ASH, 0, 0);

  //SOUTHWEST SIDE
  WEL.disableStyle();
  fill(75, 100, 75);
  shape(WEL, 0, 0);
  shape(MC, 0, 0);
  shape(AH, 0, 0);
  shape(GP, 0, 0);
  shape(LAWN, 0, 0);
  shape(DP, 0, 0);
  shape(ENG, 0, 0);
  shape(WL, 0, 0);
  shape(WEW, 0, 0);
  shape(CL, 0, 0);
  shape(GR, 0, 0);
  shape(NEW, 0, 0);

  //NORTH WEST SIDE
  MONT.disableStyle();
  fill(87, 25, 66);
  shape(MONT, 0, 0);
  shape(HO, 0, 0);
  shape(IP, 0, 0);
  shape(DU, 0, 0);
  shape(BEL, 0, 0);
  shape(PP, 0, 0);

  //  WESTSIDE
  WGP.disableStyle();
  fill(211, 200, 68);
  shape(WGP, 0, 0);
  shape(EGP, 0, 0);
  shape(LWS, 0, 0);
  shape(NL, 0, 0);
  shape(HP, 0, 0);
  shape(SL, 0, 0);
  shape(WT, 0, 0);
  shape(NWS, 0, 0);
  shape(AU, 0, 0);
  smooth();
  noStroke();

  //    shape(LS, 418.819, 180.913, 200, 200);
}    

VERSION 2

int[] t = new int[34];
PShape[] n = new PShape[34];
float[] x = new float[34];
float[] y = new float[34];
int rowCount;

Table locationTable;

void setup() {
  size (720, 720);
  smooth();
  noStroke();
  fill(255);

  ellipseMode(RADIUS);

  locationTable = loadTable ("neighbourhoods_data.csv");
  rowCount = locationTable.getRowCount( );

  for (int i = 0; i < rowCount; i++) {
    float x[i] = locationTable.getFloat(row, 2);
    float y[i] = locationTable.getFloat(row, 3);
    int t[i] = locationTable.getInt(row, 4);
    //    PShape n = locationTable.(row,1);
  }


  void draw() {
    int t[i] = map(t[i], 10000, 100000, 10, 100);
    ellipse(x, y, t, t);
  }

Obviously I haven't finished it yet, but am working on it - I'm trying to read from a table (pictured below) and think it should work, but unfortunately I am getting a error - "unexpected token: float" on line 21 - " float x[i] = locationTable.getFloat(row, 2);" and I imagine I will get it for line 22 and 23 also, but am not sure why. I figured if I could get this working and draw some ellipses I'll know I'm going in the right direction!

Thanks for your time,

Tom

quark

Obviously I have not got your data file so I can't test your code but you are missing a } at line 26. You can see from the indentation that it thinks the draw method is part of the setup method. Try this and see if it fixes the problem.

Remember that every { must have a matching }. If you put the cursor behing a { or } Processing will highlight what it thinks is the matching one.

Also should

  for (int i = 0; i < rowCount; i++) {
    float x[i] = locationTable.getFloat(row, 2);
    float y[i] = locationTable.getFloat(row, 3);
    int t[i] = locationTable.getInt(row, 4);
    //    PShape n = locationTable.(row,1);
  }

not be

  for (int i = 0; i < rowCount; i++) {
    float x[i] = locationTable.getFloat(i, 2);
    float y[i] = locationTable.getFloat(i, 3);
    int t[i] = locationTable.getInt(i, 4);
    //    PShape n = locationTable.(i,1);
  }

_vk

If you look in Processing's JavaDoc under Table class you will find:

getFloatColumn(int col)

and

getFloatColumn(String name)

those methods are both returning arrays of floats containing all values of specified column. That may make things easier, but… they are not in reference page for table I don't know why.

groomage

I finally looked at it and thought I had figured out the problem - mixing ints and floats:

for (int i = 0; i < rowCount; i++) {
  float x[i] = locationTable.getFloat(i, 2);
  float y[i] = locationTable.getFloat(i, 3);
  int t[i] = locationTable.getInt(i, 4);
  //    PShape n = locationTable.(i,1);
}

So I changed it to:

for (float i = 0; i < rowCount; i++) {
    float x[i] = locationTable.getFloat(i, 2);
    float y[i] = locationTable.getFloat(i, 3);
    ]

But I'm still getting the"unexpected token: float" error message.

Also what is the difference between Float and float - they seem to act differently.

GoToLoop

Most obvious bug is that you're redeclaring variables x & y inside the loop, overshadowing their "global" versions!

About the difference between primitive type float & object type Float, take a read here:
http://docs.oracle.com/javase/tutorial/java/data/numberclasses.html

_vk

this

 x[i] = locationTable.getFloat(i, 2);

instead of this

float x[i] = locationTable.getFloat(i, 2);

_vk

A simple example using getFloatRow();

//building a sample table
//not your case...
Table table;
TableRow[] someRows = new TableRow[40];

void setup() {

  table = new Table();

  table.addColumn("id");

  for (int i=0; i < someRows.length; i++) {
    someRows[i] = table.addRow();
    someRows[i].setFloat("id", float(i));
  } 

  ///


  //here in one line.
  float[] ids = table.getFloatColumn("id");


  println(ids);

  // or a direct approach
  println("without intermediary Array: column \"id\" row 10 = " + table.getFloatColumn("id")[10]);
}

groomage

Thanks for all your help and time guys.

Okeydoke, I've been working on getting the hack to be finished and now I want to spend time making the code side look beautfiul (and be a hell of a lot easier to edit than 1000 lines of code!!!)

float[] t;
float[] x;
float[] y;
String[] n;
PShape[] m;

float diameter;
float radius;

String shapeName;

Table locationTable;
int rowCount;

void setup() {
  size (720, 720);
  smooth();
  noStroke();
  fill(255);

  ellipseMode(RADIUS);

  locationTable = loadTable ("neighbourhoods_data.csv");
  rowCount = locationTable.getRowCount( );
  //  rowCount =2;

  float[] t = new float[rowCount];
  float[] x = new float[rowCount];
  float[] y = new float[rowCount];
  String[] n = new String[rowCount];
  PShape[] m = new PShape[rowCount];


  for (int i = 1; i < rowCount; i++) {
    x[i] = locationTable.getInt(i, 5);
    y[i] = locationTable.getInt(i, 6);
    t[i] = locationTable.getInt(i, 4);
    n[i] = locationTable.getString (i, 1);
//    m[i] = n[i];
  }
}

void draw() {
  for (int i = 1; i < rowCount; i++) {
    diameter = map(t[i], 1000, 100000, 10, 100);

    ellipse(x[i], y[i], diameter, diameter);
    println(x[i]+" "+ y[i]+" "+ t[i]);
  }
//    m[i] = p.getChild(n[i]);

}

Currently I am getting a nullpointerexception at line 45: diameter = map(t[i], 1000, 100000, 10, 100);) and I'm not sure why... when I comment this out i then get one at 47 and then also at 48... is it that the arrays are wrong?

Chrisir

Hello,

in lines 27 to 31 do not repeat the type pls

when you repeat the type here (the 1st word) processing makes it a new local var and defines that one - your global vars in lines 1 to 5 stay undefined. Bad. Thus all crashes in draw().

Once you remove the types in lines 27 to 31, those lines will really define the global vars and draw() should work just fine.

but the code looks nice and short now, congrats, good job!

;-)

groomage

Ok, Hurrah!

Really enjoying how it looks and is working.

float[] t;
float[] x;
float[] y;
float easing = 0.05;
String[] n;
String[] a;
PShape[] m;
int value = 0;
PShape p;

int Y_AXIS = 1;
int rowCount;

float diameter;
float radius;

String shapeName;

Table locationTable;

void setup() {
  size (720, 720);
  smooth();
  noStroke();
  fill(255);

  ellipseMode(RADIUS);


//  color a1 = color(#4422CC);
//  color a2 = color(#FF4422);
//  setGradient(0,0,width,height,a1,a2,Y_AXIS);

  locationTable = loadTable ("neighbourhoods_data.csv");
  rowCount = locationTable.getRowCount( );
  //  rowCount =2;

  t = new float[rowCount];
  x = new float[rowCount];
  y = new float[rowCount];
  n = new String[rowCount];
  m = new PShape[rowCount];


  for (int i = 1; i < rowCount; i++) {
    x[i] = locationTable.getInt(i, 5);
    y[i] = locationTable.getInt(i, 6);
    t[i] = locationTable.getFloat(i, 4);
    n[i] = locationTable.getString (i, 0);
  }
}

void draw() {
  background(255);
  smooth();
  noStroke();
  //      CENTRAL
  for (int i = 1; i < 4; i++) {
    diameter = map(t[i], 20000, 81000, 1, 20);
    float value = locationTable.getInt(i, 4);
    float percent = norm(value, 20000, 81000);
    color between = lerpColor(#7CFF90, #297134, percent); // red to blue
    fill(between);
    ellipse(x[i], y[i], diameter, diameter);
  }
  //      FAR NORTH SIDE
  for (int i = 4; i < 16; i++) {
    diameter = map(t[i], 1000, 100000, 1, 20);
    float value = locationTable.getInt(i, 4);
    float percent = norm(value, 11000, 72000);
    color between = lerpColor(#8CAFF7, #0D2C6C, percent); // red to blue
    fill(between);
    ellipse(x[i], y[i], diameter, diameter);
  }
  //      Far South-East-Side
  for (int i = 16; i < 28; i++) {
    diameter = map(t[i], 2500, 45000, 1, 20);
    float value = locationTable.getInt(i, 4);
    float percent = norm(value, 2500, 45000);
    color between = lerpColor(#FFC4F9, #AA099A, percent); // red to blue
    fill(between);
    ellipse(x[i], y[i], diameter, diameter);
  }
  //      Far South-West-Side
  for (int i = 28; i < 34; i++) {
    diameter = map(t[i], 19000, 48000, 1, 20);
    float value = locationTable.getInt(i, 4);
    float percent = norm(value, 19000, 48000);
    color between = lerpColor(#90FFDB, #089567, percent); // red to blue
    fill(between);
    ellipse(x[i], y[i], diameter, diameter);
  }
  //      North Side
  for (int i = 34; i < 39; i++) {
    diameter = map(t[i], 30000, 95000, 1, 20);
    float value = locationTable.getInt(i, 4);
    float percent = norm(value, 30000, 95000);
    color between = lerpColor(#FFB2B2, #8E0707, percent); // red to blue
    fill(between);
    ellipse(x[i], y[i], diameter, diameter);
  }
  //         North-West Side
  for (int i = 39; i < 45; i++) {
    diameter = map(t[i], 13000, 79000, 1, 20);
    float value = locationTable.getInt(i, 4);
    float percent = norm(value, 13000, 79000);
    color between = lerpColor(#FFE281, #B28904, percent); // red to blue
    fill(between);
    ellipse(x[i], y[i], diameter, diameter);
  }
  //      South-Side
  for (int i = 45; i < 56; i++) {
    diameter = map(t[i], 2800, 50000, 1, 20);
    float value = locationTable.getInt(i, 4);
    float percent = norm(value, 2800, 50000);
    color between = lerpColor(#ECF29F, #97A200, percent); // red to blue
    fill(between);
    ellipse(x[i], y[i], diameter, diameter);
  }
  //      South-West Side
  for (int i = 56; i < 69; i++) {
    diameter = map(t[i], 13000, 46000, 1, 20);
    float value = locationTable.getInt(i, 4);
    float percent = norm(value, 13000, 46000);
    color between = lerpColor(#C0AAFF, #25057E, percent); // red to blue
    fill(between);
    ellipse(x[i], y[i], diameter, diameter);
  }
  //      WESTSIDE
  for (int i = 69; i < 78; i++) {
    diameter = map(t[i], 18000, 100000, 1, 20);
    float value = locationTable.getInt(i, 4);
    float percent = norm(value, 18000, 100000);
    color between = lerpColor(#E2C1F2, #9C02EA, percent); // red to blue
    fill(between);
    ellipse(x[i], y[i], diameter, diameter);
  }
  //      KEY
  fill(0);
  text("Population density within", 50, 200);
  text("neighbourhoods", 50, 220);
  //FAR NORTHSIDE
  fill (#0D2C6C);
  rect(50, 250, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Far Northside", 80, 265);
  //NORTHSIDE
  fill (#8E0707);
  rect(50, 280, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("North Side", 80, 295);
  //CENTRAL
  fill (#297134);
  rect(50, 310, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Central", 80, 325);
  //SOUTHSIDE
  fill (#97A200);
  rect(50, 340, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Southside", 80, 355);
  //FAR SOUTHEAST SIDE
  fill (#AA099A);
  rect(50, 370, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Far South-East Side", 80, 385);
  //FAR SOUTHWESTSIDE
  fill(#089567);
  rect(50, 400, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Far South-West Side", 80, 415);
  //  WESTSIDE
  fill(#9C02EA);
  rect(50, 430, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("Westside", 80, 445);
  //NORTH WEST SIDE
  fill(#B28904);
  rect(50, 460, 20, 20);
  textAlign(LEFT);
  fill(0);
  text("North-Westside", 80, 475);
  for (int i = 1; i < rowCount; i++) {
    if (dist(x[i], y[i], mouseX, mouseY) < diameter/2+2) {
      float value = locationTable.getInt(i, 4);
      float percent = norm(value, 1000, 100000);
      color between = lerpColor(#FF4422, #4422CC, percent); // red to blue
      fill(between);
      ellipse(x[i], y[i], 115, 115);
      textAlign(CENTER);
      fill(255);
      text(n[i]+" - "+t[i], x[i], y[i]);
    }
    if (mousePressed == true && (mouseButton == LEFT)) {
      background(255);
      text("Neighbourhoods map", 50, 200);

      p = loadShape("neighbourhood maps_final.svg");
      shapeMode(CORNER);
      smooth();
      noStroke();
      shape(p, 0, 0);

      //      KEY
      //FAR NORTHSIDE
      fill (#8bb850);
      rect(50, 250, 20, 20);
      textAlign(LEFT);
      fill(0);
      text("Far North Side", 80, 265);
      //NORTHSIDE
      fill (#9bcdcf);
      rect(50, 280, 20, 20);
      textAlign(LEFT);
      fill(0);
      text("North Side", 80, 295);
      //CENTRAL
      fill (#d2a6c7);
      rect(50, 310, 20, 20);
      textAlign(LEFT);
      fill(0);
      text("Central", 80, 325);
      //SOUTHSIDE
      fill (#e4e35d);
      rect(50, 340, 20, 20);
      textAlign(LEFT);
      fill(0);
      text("Southside", 80, 355);
      //FAR SOUTHEAST SIDE
      fill (#c2daca);
      rect(50, 370, 20, 20);
      textAlign(LEFT);
      fill(0);
      text("Far South-East Side", 80, 385);
      //FAR SOUTHWESTSIDE
      fill(#78a468);
      rect(50, 400, 20, 20);
      textAlign(LEFT);
      fill(0);
      text("Far South-East Side", 80, 415);
      //  WESTSIDE
      fill(#d36071);
      rect(50, 430, 20, 20);
      textAlign(LEFT);
      fill(0);
      text("Westside", 80, 445);
      //NORTH WEST SIDE
      fill(#6f71b0);
      rect(50, 460, 20, 20);
      textAlign(LEFT);
      fill(0);
      text("North-Westside", 80, 475);
    }
  }
  if (mousePressed == true && (mouseButton == RIGHT)) {
    background(255);
    smooth();
    noStroke();
    textAlign(LEFT);
    fill(0);
    text("Population density for", 50, 200);
    text("the city", 50, 220);
    //      HIGH
    fill (#4422CC);
    rect(50, 250, 20, 100);
    textAlign(LEFT);
    fill(0);
    text("High", 80, 265);
    //LOW
    fill (#FF4422);
    rect(50, 300, 20, 50);
    textAlign(LEFT);
    fill(0);
    text("Low", 80, 350);
    for (int i = 1; i < rowCount; i++) {
      diameter = map(t[i], 1000, 100000, 1, 20);
      float value = locationTable.getInt(i, 4);
      float percent = norm(value, 1000, 100000);
      color between = lerpColor(#FF4422, #4422CC, percent); // red to blue
      fill(between);
      ellipse(x[i], y[i], diameter, diameter);
    }
  }

  textAlign(LEFT);
  fill(0);
  text("Hold down the left mouse button to see the", 20, 640);
  text("map of Chicago, hold down the right mouse", 20, 660);
  text("button to see population relationship between", 20, 680);
  text("neighbourhoods", 20, 700);
}

still a bit elongated, but working well. I'd love to be able to put this onto webpage to show, but at the moment it is just displaying as a grey screen when exported as javascript, (wellgroomedwebsites.businesscatalyst.com/web-export) does anyone know why this might be? Also, does anyone have any advice on easing between ellipse sizes inside a piece of code like this (adding easing between mouse clicks).