How to represent data with Circles?

MauMau
edited April 2014 in How To...

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

Tagged:

Answers

  • Answer ✓

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

  • Hi Thanks for your response.

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

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

  • 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);
        }
      }
    }
    
  • edited April 2014

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

    And here a good tip: Screen Shot 2013-11-20 at 11.20.40 PM

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

    (quote if from d3 book)

  • 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.

  • Answer ✓

    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);
    
      }
    
  • 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

    Screen Shot 2014-04-28 at 17.44.52

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

  • MauMau
    edited April 2014

    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

    Screen Shot 2014-04-28 at 20.14.51

  • Answer ✓

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

  • 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.

  • Answer ✓

    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.

  • 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);
        }
      }
    }
    
  • oh so it did work...hopefully this will be much easier to understand my code

    Thanks guys for all your help ! ;-)

  • 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

Sign In or Register to comment.