Using scatter plots to gain a better understanding of statistics

The subject of Statistics can become a little complicated, but if you are like me visualizing what is going on can help to make something complicated easier to understand. In this post I will be using scatter plots to help gain a better understanding of certain subjects in statistics.

The basic idea of a scatter plot

A scatter plot is just a collection of points in a plain. It can be just a collection of 2d points, making it a common choice to visualize data that can be expressed with two dimensions. However there can also have a 3d scatter plot, as well as use colors, and shapes to add additional dimensions if needed.

To get started playing around with scatter plots in javaScript I will need some kind of module that will store the data that will be graphed, and a way to render it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
var data = [12, 24, 38, 20, 40, 42, 57]
var scatter = (function() {
var api = {
points: []
};
api.plotRand = function(count, bx) {
count = count || 10;
bx = bx || {};
bx.x = bx.x || 10;
bx.y = bx.y || 10;
bx.w = bx.w || 310;
bx.h = bx.h || 220;
this.points = [];
var i = count;
while (i--) {
this.points.push({
x: Math.random() * (bx.w - bx.x) + bx.x,
y: Math.random() * (bx.h - bx.y) + bx.y
});
}
};
// a plot data method
api.plotData = function(data, func) {
api.points = [];
data.forEach(function(n, i) {
var pt = func(n, i);
api.points.push(pt);
});
};
return api;
}());
// start by plotting some random numbers
scatter.plotRand();
// and of course I need a way to render the scatter plot
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = 320;
canvas.height = 240;
ctx.fillStyle = '#afafaf';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = '#000000';
scatter.points.forEach(function(pt) {
ctx.beginPath();
ctx.arc(pt.x, pt.y, 4, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
});
document.body.appendChild(canvas);

Conclusion

Sorry for the short post for now. I am postponing development of my posts on statistics for now, but will defiantly get back to this one at some point. Scatter plots strike me as a very nice graphical way of making sense of data, and concepts in statistics such as standard deviation.