We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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
Answers
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:
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)
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.
Something like this maybe:
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
Then the file is not in the data folder or you spelled it wrong.
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
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.
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.
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