|
Jupyter at Bryn Mawr College |
|
|
| Public notebooks: /services/public/dblank / CS110 Intro to Computing / 2015-Fall / 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¶
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 [17]:
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.
In [21]:
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 = 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();
}
Bar charts¶
One can easily turn the points into height to draw a rectangle.
In [6]:
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) {
float pw = (w - (border * 2)) / total;
float px = x + border + (pw * pos);
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();
}
Pie charts¶
In [10]:
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, y, 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));
}
Geographic: Maps + data¶
First, we need to download a SVG (Scalable Vector Graphics) image file. We use the metacommand %download.
In [11]:
%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 [12]:
! 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 [13]:
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();
}