# Visualization of Data¶

The goal of this experiment is to study the goal of making data more visual, more easily understandable, in an intuitive manner.

## Points¶

A plot made up of just points of data is sometimes called a "scatter plot" because the data are often scattered all over the graph.

In :
int border;

void setup() {
size(500, 200);
border = 30;
}

void drawAxises(int x, int y, int w, int h) {
fill(255);
rect(x, y, w, h);
line(x + border, y + border, x + border, y + h - border);
line(x + border, y + h - border, x + w - border, y + h - border);
}

void drawPoint(int x, int y, int w, int h, float px, float py) {
fill(255, 0, 0);
ellipse(px + border + x, h + y - border - py, 5, 5);
}

void draw() {
int chartX = 20;
int chartY = 10;
int chartWidth = width - chartX * 2;
int chartHeight = height - chartY * 2;
drawAxises(chartX, chartY, chartWidth, chartHeight);

for (int i = 0; i < chartWidth - border * 2; i += 10) {
drawPoint(chartX, chartY, chartWidth, chartHeight, i,
random(chartHeight - border * 2));
}
noLoop();
}

Sketch #6:

## Lines¶

To make a Line plot, we only need keep a running place holder for the last point draw, and connect to the current point.

In :
int border;
int prev_x, prev_y;

void setup() {
size(800, 200);
border = 30;
prev_x = -1;
prev_y = -1;
}
void drawAxises(int x, int y, int w, int h) {
fill(255);
rect(x, y, w, h);
line(x + border, y + border, x + border, y + h - border);
line(x + border, y + h - border, x + w - border, y + h - border);
}

void drawPoint(int x, int y, int w, int h, float px, float py) {
fill(255, 0, 0);
ellipse(px + border + x, h + y - border - py, 5, 5);
if (prev_x != -1) {
line(px + border + x, h + y - border - py, prev_x, prev_y);
}
prev_x = int(px + border + x);    // need to convert float to int
prev_y = int(h + y - border - py); // need to convert float to int
}

void draw() {
int chartX = 20;
int chartY = 10;
int chartWidth = width - chartX * 2;
int chartHeight = height - chartY * 2;
drawAxises(chartX, chartY, chartWidth, chartHeight);

for (int i = 0; i < chartWidth - border * 2; i += 10) {
drawPoint(chartX, chartY, chartWidth, chartHeight, i, random(chartHeight - border * 2));
}
noLoop();
}

Sketch #12:

## Bar charts¶

One can easily turn the points into height to draw a rectangle.

In :
int border;

void setup() {
size(500, 200);
border = 20;
}

void clear(int x, int y, int w, int h) {
fill(255);
rect(x, y, w, h);
}

void drawAxises(int x, int y, int w, int h) {
stroke(0);
line(x + border, y + border, x + border, y + h - border);
line(x + border, y + h - border, y + w - border, y + h - border);
}

void drawBar(int x, int y, int w, int h, int total,
int position, float percent, color c) {
float pw = (w - (border * 2)) / total;
float px = x + border + (pw * position);
float ph = percent/100.0 * (h - border * 2);
float py = y + h - border - ph;
fill(200);
noStroke();
rect(px + pw * .20 + 10, py + 10, pw - pw * .40, ph - 10);
fill(c);
stroke(c);
rect(px + pw * .20, py, pw - pw * .40, ph);
}

void draw() {
int chartX = 20;
int chartY = 10;
int chartWidth = width - chartX * 2;
int chartHeight = height - chartY * 2;
clear(chartX, chartY, chartWidth, chartHeight);

drawBar(chartX, chartY, chartWidth, chartHeight,
5, 0, 100, color(255, 0, 0));
drawBar(chartX, chartY, chartWidth, chartHeight,
5, 1, 50, color(0, 255, 0));
drawBar(chartX, chartY, chartWidth, chartHeight,
5, 2, 25, color(0, 128, 128));
drawBar(chartX, chartY, chartWidth, chartHeight,
5, 3, 75, color(0, 0, 255));
drawBar(chartX, chartY, chartWidth, chartHeight,
5, 4, 10, color(128, 255, 128));
drawAxises(chartX, chartY, chartWidth, chartHeight);
noLoop();
}

Sketch #13:

## Pie charts¶

In :
arc(50, 50, 50, 50, PI * 1.5, PI * 2);

Sketch #17:

In :
int border;

void setup() {
size(200, 200);
border = 20;
}

void drawBackground(int cx, int cy, int w, int h) {
fill(255);
ellipse(cx, cy, w, h);
}

void drawPie(int x, int y, int w, int h, float start, float percent, color c) {
fill(c);
stroke(0);
float rstart = start/100 * (2 * PI);
float rstop = rstart + percent/100 * (2 * PI);
arc(x, y, w, h, rstart, rstop);
}

void draw() {
int x = width/2;
int y = height/2;
int w = width - border * 2;
int h = height - border * 2;
//drawBackground(x, y, w, h);
drawPie(x +20, y+20, w, h, 0, 25, color(255, 0, 0));
drawPie(x, y, w, h, 25, 25, color(0, 255, 0));
drawPie(x, y, w, h, 50, 10, color(0, 0, 255));
drawPie(x, y, w, h, 60, 40, color(0, 255, 255));
}

Sketch #19:

## Geographic: Maps + data¶

In [ ]:
%download http://upload.wikimedia.org/wikipedia/commons/archive/3/32/20091105194402%21Blank_US_Map.svg


Next, we rename the file using the "shell" command "mv" -- short for "move":

In [ ]:
! mv 20091105194402%21Blank_US_Map.svg usa-wikipedia.svg


Now, we can use the usa-wikipedia.svg file.

### PShape¶

We will use a shape object from Processing, called PShape. We can load a shape from an SVG image file.

Likewise, we can get a part of the file by using the state abbreviations.

In :
PShape usa;
PShape michigan;
PShape ohio;

void setup() {
size(959, 593);
michigan = usa.getChild("MI");
ohio = usa.getChild("OH");
}

void draw() {
background(255);

// Draw the full map
shape(usa, 0, 0);

// Disable the colors found in the SVG file
michigan.disableStyle();
// Set our own coloring
fill(0, 51, 102);
noStroke();
// Draw a single state
shape(michigan, 0, 0); // Wolverines!

// Disable the colors found in the SVG file
ohio.disableStyle();
// Set our own coloring
fill(153, 0, 0);
noStroke();
// Draw a single state
shape(ohio, 0, 0);  // Buckeyes!
noLoop();
}

Sketch #20: