How to represent data with Circles?

Mau

Hi, I am fairly new to processing…so still getting use to programming.

I have a dataset with two columns ‘country’ and ‘corruption’.

What I am attempting to do is represent this data in circles. At the same time the size of the circle should represent levels of corruption (i.e. larger the circle…higher corruption).

Here is my code so far….I want to be able to place the circles on top of my gradient rectangle which forms the background.

Table CorruptionIndex;//Table storing corruption.
float dataMin = MAX_FLOAT;
float dataMax = MIN_FLOAT;

// Constants
int Y_AXIS = 1;
color c1, c2;

void setup() {
  size(650, 750);
    // Define colors
  c1 = color(230,252,170);
  c2 = color(205,40,32);

  // data from tables
  CorruptionIndex = loadTable("CorruptionIndex.csv","header");

  // Go through each row in table drawing each data item as a circle.
    for (int row=0; row<CorruptionIndex.getRowCount(); row++)
    {
    dataMin = min(dataMin, CorruptionIndex.getFloat(row,"Score"));
    dataMax = max(dataMax, CorruptionIndex.getFloat(row,"Score"));
    }
}

void draw() {
  // Background

 background(255);

  // Foreground
  setGradient(50,50, 550, 600, c1, c2, Y_AXIS);

  //set appearance of circles for each country 
  fill(192,0,80);

  // Go through each row in table drawing each data item as a circle.
  for (int row=0; row<CorruptionIndex.getRowCount(); row++)
  {
    // Get the bad teeth data for the country.
    String CountryName= CorruptionIndex.getString(row,"Country");
    float  CountryScore     = CorruptionIndex.getFloat(row,"Score");
    float circleSize = map(CountryScore,dataMin,dataMax,1,20);
  }
}

void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {

  noFill();

  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (int i = y; i <= y+h; i++) {
      float inter = map(i, y, y+h, 0, 1);
      color c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    }
  }
}

I appreciate any help here.

Thanks

Mau

clankill3r

PLEASE FORMAT YOUR CODE BY SELECTING + CTRL + K. Sry for capslock.

Mau

Hi Thanks for your response.

I'm sorry i dont understand what you mean here.

As i have a mac...i tried CMD + K.

clankill3r

Still ctrl + k on a mac:

Table CorruptionIndex;//Table storing corruption. 
float dataMin = MAX_FLOAT; 
float dataMax = MIN_FLOAT;

// Constants 
int Y_AXIS = 1; 
color c1, c2;

void setup() { 
  size(650, 750); 
  // Define colors 
  c1 = color(230, 252, 170); 
  c2 = color(205, 40, 32);

  // data from tables 
  CorruptionIndex = loadTable("CorruptionIndex.csv", "header");

  // Go through each row in table drawing each data item as a circle. 
  for (int row=0; row<CorruptionIndex.getRowCount(); row++) { 
    dataMin = min(dataMin, CorruptionIndex.getFloat(row, "Score")); 
    dataMax = max(dataMax, CorruptionIndex.getFloat(row, "Score"));
  }
}

void draw() { // Background

  background(255);

  // Foreground 
  setGradient(50, 50, 550, 600, c1, c2, Y_AXIS);

  //set appearance of circles for each country 
  fill(192, 0, 80);

  // Go through each row in table drawing each data item as a circle. 
  for (int row=0; row<CorruptionIndex.getRowCount(); row++) { 
    // Get the bad teeth data for the country. 
    String CountryName= CorruptionIndex.getString(row, "Country"); 
    float CountryScore = CorruptionIndex.getFloat(row, "Score"); 
    float circleSize = map(CountryScore, dataMin, dataMax, 1, 20);
  }
}

void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {

  noFill();

  if (axis == Y_AXIS) { 
    // Top to bottom gradient 
    for (int i = y; i <= y+h; i++) { 
      float inter = map(i, y, y+h, 0, 1); 
      color c = lerpColor(c1, c2, inter); 
      stroke(c); 
      line(x, i, x+w, i);
    }
  }
}

clankill3r

Ok, what do you want to use for x and y position?

And here a good tip:

I forgot how to calculate it correct but i'm sure someone can help.

(quote if from d3 book)

Mau

This is helpful thanks...so yeh for the x and y position. what I was attempting to do is have the circles go vertically. i.e. from bottom to top...so more corrupted countries would appear at the bottom and less at the top.

clankill3r

Something like this maybe:

float minY = 50;
float maxY = height - minY;

for (int row=0; row<CorruptionIndex.getRowCount(); row++) { 
    // Get the bad teeth data for the country. 
    String CountryName= CorruptionIndex.getString(row, "Country"); 
    float CountryScore = CorruptionIndex.getFloat(row, "Score"); 
    float circleSize = map(CountryScore, dataMin, dataMax, 1, 20);

    float y = map(CountryScore, dataMin, dataMax, minY, maxY);
    float x = width/2;

    ellipse(x, y, circleSize, circleSize);

  }

Mau

I tried Ctrl + K didn't work.

so the last bit of code where would i put this?

When i run the first bit of the code I get an error message 'NullPointerExption'.

Thanks

clankill3r

Then the file is not in the data folder or you spelled it wrong.

Mau

Yay! it worked but the only issue is this. the circles overlap.

so basically. I wanted to have a y axis with numbers from 0 to 100

was aiming for a bubble graph.

thanks

clankill3r

The code i posted is almost similar to what you had, so post it there.

Chrisir

in the processing IDE press ctrl-t to auto format

How to post code in the forum

when you post your code:

• in the editor hit ctrl-t to auto format

• copy it

• paste it in the browser

• leave 2 empty lines before it

• mark the code (without the 2 empty lines)

• press C in the small command bar.

clankill3r

About the overlapping circles, you could make them transparent. Also, what i would do is find data for the x axis for example Gross national product since that might have a relation with corruption. Once you have that for the x axis it's less likely to have overlapping circles.

Mau

Chrisir,

I did exactly what you instructed but doesn't seem to work.

Table CorruptionIndex;//Table storing corruption. 
float dataMin = MAX_FLOAT; 
float dataMax = MIN_FLOAT;

// Constants 
int Y_AXIS = 1; 
color c1, c2;

void setup() { 
  size(650, 750); 
  // Define colors 
  c1 = color(230, 252, 170); 
  c2 = color(205, 40, 32);

  // data from tables 
  CorruptionIndex = loadTable("CorruptionIndex.csv", "header");

  // Go through each row in table drawing each data item as a circle. 
  for (int row=0; row<CorruptionIndex.getRowCount(); row++) { 
    dataMin = min(dataMin, CorruptionIndex.getFloat(row, "Score")); 
    dataMax = max(dataMax, CorruptionIndex.getFloat(row, "Score"));
  }
}

void draw() { // Background

  background(255);

  // Foreground 
  setGradient(50, 50, 550, 600, c1, c2, Y_AXIS);

  //set appearance of circles for each country 
  fill(0, 0, 0, 0);
  stroke(0, 0, 0);
  strokeWeight(2);

  // Go through each row in table drawing each data item as a circle.

  for (int row=0; row<CorruptionIndex.getRowCount(); row++) { 
    // Get the data for the country. 
    String CountryName= CorruptionIndex.getString(row, "Country"); 
    float CountryScore = CorruptionIndex.getFloat(row, "Score"); 
    float circleSize = map(CountryScore, dataMin, dataMax, 0, 250 );
    float x = map(CountryScore, -250, 750, 0, width);
    float y = map(CountryScore, -35, 750, height, 150);

    ellipse(x, y, circleSize, circleSize);
  }
}

void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {

  noFill();

  if (axis == Y_AXIS) { 
    // Top to bottom gradient 
    for (int i = y; i <= y+h; i++) { 
      float inter = map(i, y, y+h, 0, 1); 
      color c = lerpColor(c1, c2, inter); 
      stroke(c); 
      line(x, i, x+w, i);
    }
  }
}

Mau

oh so it did work...hopefully this will be much easier to understand my code

Thanks guys for all your help ! ;-)

Mau

clankill3r,

Yes I managed to make the circles transparent. see i was going to introduce the GDP data later on once i had all my circles laid out.

With the GDP data what i wanted to do is only high light the circle