Data visualization has been a hot topic. There is so much data available that I get overwhelmed by all the potential. To help with this I like to organize data into simple graphs and charts, but they are so 2 dimensional and don't capture some of the obvious connections. One solution that I have seen is to create visualizations that are alive. Slider bars and knobs that immediately affect the visualization when adjusted help me to see relationships in large data. The problem until now has been the amount of work required to get simple visualizations programmed. I just installed processing.js on my site and can now use Processing Sketches to help with the visualizations. This is a huge step and I am excited for the next few weeks to be filled with processing coding and data manipulation
[processing]
int xspacing = 16; // How far apart should each horizontal location be spaced
int w; // Width of entire wave
int maxwaves = 4; // total # of waves to add together
int total = 0;
float theta = 0.0f;
float[] amplitude = new float[maxwaves]; // Height of wave
float[] dx = new float[maxwaves]; // Value for incrementing X, to be calculated as a function of period and xspacing
float[] yvalues; // Using an array to store height values for the wave (not entirely necessary)
float[] last;
int pos;
int rel;
int numLines;
int idealLines;
int idealSpacing;
int targetX;
void setup() {
size(600, 150);
//frameRate(24);
colorMode(RGB,255,255,255,100);
//background(0);
smooth();
w = width+16;
for (int i = 0; i < maxwaves; i++) {
amplitude[i] = random(20,30);
float period = random(100,300); // How many pixels before the wave repeats
dx[i] = (TWO_PI / period) * xspacing;
}
last = new float[maxwaves];
idealLines = numLines = int(w/xspacing);
idealSpacing = xspacing;
yvalues = new float[numLines];
}
void draw() {
pos = constrain(mouseX, 75, width-75);
rel = 1 - ((pos - 75) / (width - 150));
//background(0);
fill(0, 10 + ((1 - rel) * 100));
rect(0, 0, width, height);
//numLines = idealLines + ((1 - rel) * idealLines);
//xspacing = idealSpacing - (((1 - rel) * idealSpacing) / 2);
calcWave();
renderWave();
renderChart();
}
void calcWave() {
// Increment theta (try different values for 'angular velocity' here
theta += 0.02;
// Set all height values to zero
for (int i = 0; i < numLines; i++) {
yvalues[i] = 0.0f;
}
total = 0;
// Accumulate wave height values
for (int j = 0; j < maxwaves; j++) {
float x = theta;
last[j] = 0;
for (int i = 0; i < numLines; i++) {
// Every other wave is cosine instead of sine
int diff = j % 2 == 0 ? sin(x) : cos(x);
int add = diff*amplitude[j];
last[j] += add;
yvalues[i] += add;
total += add;
x+=dx[j]; // - (((1 - rel) * dx[j]) / 2);
}
}
}
void renderWave() {
noStroke();
fill(254,60,0, 120 * rel);
beginShape();
vertex(0,height);
for (int x = 0; x < numLines; x++) {
vertex(x*xspacing,height/2+yvalues[x]+-5);
vertex((x*xspacing) + 10,height/2+yvalues[x]-5);
}
vertex(width,height);
endShape(CLOSE);
fill(255,0,0, 120 * rel);
beginShape();
vertex(0,height);
for (int x = 0; x < numLines; x++) {
vertex(x*xspacing,height/2+yvalues[x]);
vertex((x*xspacing) + 10,height/2+yvalues[x]);
}
vertex(width,height);
endShape(CLOSE);
//fill(255,0,0,255 - ((x/numLines)*200));
//rect(x*xspacing,height/2+yvalues[x],10,height*2);
// - ((1-rel) * 4)
for (int x = 0; x < numLines; x++) {
fill(255,0,0,255 - ((x/numLines)*200));
rect(x*xspacing,height/2+yvalues[x],10,height*2);
// - ((1-rel) * 4)
}
}
void renderChart() {
int h = 0;
for (int i=0; i