	Jupyter at Bryn Mawr College
Public notebooks: /services/public/dblank / CS110 Intro to Computing / 2015-Spring / Lectures

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.

Table of Contents¶

Visualization of Data

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.

int border;

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

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, y + 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();
}

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.

int border;
int prev_x = -1, prev_y = -1;

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

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, y + 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 = px + border + x;
    prev_y = h + y - border - py;
}

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

Bar charts¶

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

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 pos, float percent, color c) {
    pw = (w - (border * 2)) / total;
    px = x + border + (pw * pos);
    ph = percent/100.0 * (h - border * 2);
    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);
}

Pie charts¶

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);
    rstart = start/100 * (2 * PI);
    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 + 10, y + 10, w, h, 0, 25, color(255, 0, 0));
    drawPie(x - 10, y + 10, w, h, 25, 25, color(0, 255, 0));
    drawPie(x - 10, y - 10, w, h, 50, 10, color(0, 0, 255));
    drawPie(x + 10, y - 10, w, h, 60, 40, color(0, 255, 255));
}

Geographic: Maps + data¶

First, we need to download a SVG (Scalable Vector Graphics) image file. We use the metacommand %download.

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

Downloaded '20091105194402%21Blank_US_Map.svg'.

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

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

PShape usa;
PShape michigan;
PShape ohio;

void setup() {
    size(959, 593);  
    usa = loadShape("usa-wikipedia.svg");
    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();
}

Jupyter at Bryn Mawr College