rev |
line source |
paulo@89
|
1 var myChart;
|
paulo@89
|
2 var myData;
|
paulo@89
|
3 var showCorrBtn = document.getElementById('showcorr');
|
paulo@89
|
4
|
paulo@89
|
5 nv.addGraph(function() {
|
paulo@89
|
6 myChart = nv.models.scatterChart()
|
paulo@89
|
7 .showLegend(false)
|
paulo@89
|
8 .showDistX(true)
|
paulo@89
|
9 .showDistY(true)
|
paulo@89
|
10 .xDomain([-1, 1])
|
paulo@89
|
11 .yDomain([-1, 1])
|
paulo@89
|
12 .duration(350)
|
paulo@89
|
13 .color(d3.scale.category10().range());
|
paulo@89
|
14 myChart.tooltip.contentGenerator(function(data) {
|
paulo@89
|
15 return '(' + data.point.x.toFixed(2) + ', ' + data.point.y.toFixed(2) + ')';
|
paulo@89
|
16 });
|
paulo@89
|
17
|
paulo@89
|
18 myChart.xAxis.tickFormat(d3.format('.02f'));
|
paulo@89
|
19 myChart.yAxis.tickFormat(d3.format('.02f'));
|
paulo@89
|
20
|
paulo@89
|
21 reload();
|
paulo@89
|
22
|
paulo@89
|
23 return myChart;
|
paulo@89
|
24 });
|
paulo@89
|
25
|
paulo@89
|
26
|
paulo@89
|
27 function randomData(groups, points) {
|
paulo@89
|
28 var data = [],
|
paulo@89
|
29 shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
|
paulo@89
|
30 random = d3.random.normal();
|
paulo@89
|
31
|
paulo@89
|
32 for (i = 0; i < groups; i++) {
|
paulo@89
|
33 data.push({
|
paulo@89
|
34 key: 'Group ' + i,
|
paulo@89
|
35 values: []
|
paulo@89
|
36 });
|
paulo@89
|
37
|
paulo@89
|
38 for (j = 0; j < points; j++) {
|
paulo@89
|
39 data[i].values.push({
|
paulo@89
|
40 x: random(),
|
paulo@89
|
41 y: random(),
|
paulo@89
|
42 size: Math.random(),
|
paulo@89
|
43 shape: (Math.random() > 0.95) ? shapes[j % 6] : 'circle'
|
paulo@89
|
44 });
|
paulo@89
|
45 }
|
paulo@89
|
46 }
|
paulo@89
|
47
|
paulo@89
|
48 return data;
|
paulo@89
|
49 }
|
paulo@89
|
50
|
paulo@89
|
51 function myDataGen() {
|
paulo@89
|
52 var data = [];
|
paulo@89
|
53 var values = [];
|
paulo@89
|
54 var n = 25;
|
paulo@89
|
55 var m = 2*Math.random() - 1.0;
|
paulo@89
|
56 var dv = Math.random();
|
paulo@89
|
57 var normal = d3.random.normal(0.0, dv)
|
paulo@89
|
58
|
paulo@89
|
59 for (i = 0; i < n; i++) {
|
paulo@89
|
60 var x = i/n + 0.5*normal() - 0.5;
|
paulo@89
|
61 var y = m*x + normal();
|
paulo@89
|
62 values.push({
|
paulo@89
|
63 x: x,
|
paulo@89
|
64 y: y,
|
paulo@89
|
65 size: 2.0,
|
paulo@89
|
66 shape: 'circle',
|
paulo@89
|
67 });
|
paulo@89
|
68 }
|
paulo@89
|
69
|
paulo@89
|
70 data.push({
|
paulo@89
|
71 //key: 'Points',
|
paulo@89
|
72 values: values,
|
paulo@89
|
73 //slope: m,
|
paulo@89
|
74 //intercept: 0.001,
|
paulo@89
|
75 })
|
paulo@89
|
76
|
paulo@89
|
77 return data;
|
paulo@89
|
78 }
|
paulo@89
|
79
|
paulo@89
|
80 function corr(values) {
|
paulo@89
|
81 var x_a = [];
|
paulo@89
|
82 var y_a = [];
|
paulo@89
|
83
|
paulo@89
|
84 for (i = 0; i < values.length; i++) {
|
paulo@89
|
85 x_a.push(values[i].x);
|
paulo@89
|
86 y_a.push(values[i].y);
|
paulo@89
|
87 }
|
paulo@89
|
88
|
paulo@89
|
89 return ss.sampleCorrelation(x_a, y_a);
|
paulo@89
|
90 }
|
paulo@89
|
91
|
paulo@89
|
92 function lr(values) {
|
paulo@89
|
93 var x_y = [];
|
paulo@89
|
94
|
paulo@89
|
95 for (i = 0; i < values.length; i++) {
|
paulo@89
|
96 x_y.push([values[i].x, values[i].y]);
|
paulo@89
|
97 }
|
paulo@89
|
98
|
paulo@89
|
99 return ss.linearRegression(x_y);
|
paulo@89
|
100 }
|
paulo@89
|
101
|
paulo@89
|
102 function print_corr() {
|
paulo@89
|
103 console.log('corr = ' + corr(myData[0].values))
|
paulo@89
|
104 }
|
paulo@89
|
105
|
paulo@89
|
106 function print_lr() {
|
paulo@89
|
107 var lro = lr(myData[0].values);
|
paulo@89
|
108 console.log('m = ' + lro.m);
|
paulo@89
|
109 console.log('b = ' + lro.b);
|
paulo@89
|
110 }
|
paulo@89
|
111
|
paulo@89
|
112 function add_lr(lro, data) {
|
paulo@89
|
113 data.push({
|
paulo@89
|
114 values: [],
|
paulo@89
|
115 slope: lro.m,
|
paulo@89
|
116 intercept: lro.b,
|
paulo@89
|
117 })
|
paulo@89
|
118 }
|
paulo@89
|
119
|
paulo@89
|
120 function show_corr() {
|
paulo@89
|
121 var ans = corr(myData[0].values);
|
paulo@89
|
122 showCorrBtn.textContent = ans.toFixed(2);
|
paulo@89
|
123 showCorrBtn.onclick = reload;
|
paulo@89
|
124 }
|
paulo@89
|
125
|
paulo@89
|
126 function reload() {
|
paulo@89
|
127 myData = myDataGen();
|
paulo@89
|
128 add_lr(lr(myData[0].values), myData);
|
paulo@89
|
129 showCorrBtn.disabled = false;
|
paulo@89
|
130 showCorrBtn.textContent = 'Show Correlation';
|
paulo@89
|
131 showCorrBtn.onclick = show_corr;
|
paulo@89
|
132
|
paulo@89
|
133 d3.select('#chart svg')
|
paulo@89
|
134 .style('height', '95%')
|
paulo@89
|
135 .datum(myData)
|
paulo@89
|
136 .call(myChart);
|
paulo@89
|
137
|
paulo@89
|
138 nv.utils.windowResize(myChart.update);
|
paulo@89
|
139 }
|