Hey everybody,
I'm working on my first data viz project based on chapter 3 of Ben Fry's Visualizing Data book.
I have a map of the US states with different sized ellipses drawn for data in each state.
I am trying to figure out how when the mouse is pressed I can change the size and colour of the ellipses and also introduce some audio.
For this I have I have my sketch followed by void mousePressed(). This allows me to generate a duplicate image and also change the colour of the ellipses.
My problem at the moment is that I can't get the second image to 'stay' on the screen.I've tried with a global boolean variable but just can't get the code right!
And also although I am able to change the colour of the ellipses I am unable to make them expand over time.
Here is what I have so far, and suggestions appreciated
boolean button = false;
PImage mapImage;
PImage mapImage2;
Table locationTable;
int rowCount;
float index = 0;
Table dataTable;
float dataMin = MAX_FLOAT;
float dataMax = MIN_FLOAT;
void setup() {
size(1280, 800);
frameRate(10);
//noLoop();
mapImage = loadImage("bigmap.png");
mapImage2 = loadImage("bigmap2.png");//
// Make a data table from a file that contains
// the coordinates of each state.
locationTable = new Table("locations.tsv");
// The row count will be used a lot, store it locally.
rowCount = locationTable.getRowCount();//this reads each locations x,y valuses
//read the data Table
dataTable = new Table("random2.tsv");
//find the minimum and maximum values
for (int row = 0; row< rowCount; row++) {
float value =dataTable.getFloat(row, 1);
if (value>dataMax) {
dataMax = value;
}
if (value< dataMin) {
dataMin = value;
}
}
}
void draw() {
background(0);
image(mapImage, 0, 0);
// Drawing attributes for the ellipses
smooth();
fill(255, 0, 0);
noStroke();
// Loop through the rows of the locations file and draw the points
for (int row = 0; row < rowCount; row++) {
String abbrev = dataTable.getRowName(row); // column 1
float x = locationTable.getFloat(abbrev, 1);
float y = locationTable.getFloat(abbrev, 2); // column 2
drawData (x, y, abbrev);
}
}
//map the size of the elloipse to the data value
void drawData(float x, float y, String abbrev) {
//get data value for state
index = index+1;
float value = dataTable.getFloat(abbrev, 1);
//re-map the value to a number between 2 and 40
float mapped = map(value, dataMin, dataMax, 4, 80);
//draw and ellipse for this item
ellipse(x*2, y*2, mapped, mapped);
String s = " the murder rate of";
String i = "is";
//println(abbrev + value);
println(s, abbrev, i, value);
}
void mousePressed() {
button =! button;//not working
image(mapImage2, 0, 0);
println("image2works");
// Drawing attributes for the ellipses
smooth();
fill( 0, 255, 0);
noStroke();
// Loop through the rows of the locations file and draw the points
for (int row = 0; row < rowCount; row++) {
String abbrev = dataTable.getRowName(row); // column 1
float x = locationTable.getFloat(abbrev, 1);
float y = locationTable.getFloat(abbrev, 2); // column 2
drawData2 (x, y, abbrev);
}
}
//map the size of the ellipse to the data value
void drawData2(float x, float y, String abbrev) {
//get data value for state
float value2 = dataTable.getFloat(abbrev, 1);
//re-map the value to a number between 2 and 40
float mapped2 = map(value2, dataMin, dataMax, 4, 80);
//draw and ellipse for this item
mapped2= mapped2+ 1;
// an attempt to make ellipses expand that doesn't work
ellipse(x*2, y*2, mapped2, mapped2);
println("duplicate works");
}