-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathScatter Plot Grid Axis.html
More file actions
116 lines (106 loc) · 10.2 KB
/
Scatter Plot Grid Axis.html
File metadata and controls
116 lines (106 loc) · 10.2 KB
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Scatter Plot Grid Axis</title>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
</head>
<body>
<script>
var csvData = "Date,AAPL,MSFT\n2014-01-02,-0.01406,-0.00668\n2014-01-03,-0.02197,-0.00673\n2014-01-06,0.00545,-0.02113\n2014-01-07,-0.00715,0.00775\n2014-01-08,0.00633,-0.01785\n2014-01-09,-0.01277,-0.00643\n2014-01-10,-0.00667,0.01435\n2014-01-13,0.00524,-0.02941\n2014-01-14,0.0199,0.02287\n2014-01-15,0.02008,0.02739\n2014-01-16,-0.00558,0.00354\n2014-01-17,-0.0245,-0.01382\n2014-01-21,0.01554,-0.00577\n2014-01-22,0.00444,-0.00664\n2014-01-23,0.00847,0.00362\n2014-01-24,-0.01818,0.0208\n2014-01-27,0.00811,-0.02119\n2014-01-28,-0.07993,0.00666\n2014-01-29,-0.01135,0.01075\n2014-01-30,-0.00194,0.00546\n2014-01-31,0.00164,0.02659\n2014-02-03,0.00186,-0.03594\n2014-02-04,0.01448,-0.00356\n2014-02-05,0.00747,-0.01458\n2014-02-06,0.00583,0.01005\n2014-02-07,0.01399,0.0105\n2014-02-10,0.01791,0.00656\n2014-02-11,0.01318,0.01005\n2014-02-12,-7E-05,0.00807\n2014-02-13,0.01588,0.00374\n2014-02-14,-0.00081,0.00027\n2014-02-18,0.00368,0.00214\n2014-02-19,-0.01579,0.00241\n2014-02-20,-0.01157,0.0064\n2014-02-21,-0.01111,0.00609\n2014-02-24,0.00438,-0.00764\n2014-02-25,-0.01041,-0.00398\n2014-02-26,-0.00902,-0.00186\n2014-02-27,0.01995,0.01041\n2014-02-28,-0.00271,0.01189\n2014-03-03,0.00289,-0.01383\n2014-03-04,0.00659,0.01668\n2014-03-05,0.00211,-0.00781\n2014-03-06,-0.00302,0.00105\n2014-03-07,-0.00058,-0.00655\n2014-03-10,0.0009,-0.00211\n2014-03-11,0.00974,0.00529\n2014-03-12,0.00097,0.00658\n2014-03-13,-0.01111,-0.00993\n2014-03-14,-0.01123,-0.00501\n2014-03-17,0.00391,0.00928\n2014-03-18,0.00885,0.03942\n2014-03-19,-0.00026,-0.00708\n2014-03-20,-0.00482,0.02699\n2014-03-21,0.00789,-0.00422\n2014-03-24,0.01186,0.00847\n2014-03-25,0.01076,-0.00395\n2014-03-26,-0.00956,-0.01363\n2014-03-27,-0.0043,-0.01081\n2014-03-28,-0.00112,0.02388\n2014-03-31,-0.00022,0.01712\n2014-04-01,0.00915,0.01049\n2014-04-02,0.00166,-0.00169\n2014-04-03,-0.00693,-0.00822\n2014-04-04,-0.01294,-0.0278\n2014-04-07,-0.0157,-0.00176\n2014-04-08,-6E-05,0.0005\n2014-04-09,0.01314,0.01632\n2014-04-10,-0.0129,-0.02743\n2014-04-11,-0.00739,-0.00381\n2014-04-14,0.00398,-0.00077\n2014-04-15,-0.00713,0.01455\n2014-04-16,0.00203,0.01635\n2014-04-17,0.01143,-0.00965\n2014-04-21,0.01187,-0.00175\n2014-04-22,0.001,0.00125\n2014-04-23,-0.01307,-0.0075\n2014-04-24,0.08198,0.00428\n2014-04-25,0.00734,0.00125\n2014-04-28,0.03873,0.02405\n2014-04-29,-0.00296,-0.00881\n2014-04-30,-0.00378,-0.00272\n2014-05-01,0.00236,-0.0099\n2014-05-02,0.00186,-0.00775\n2014-05-05,0.01414,-0.00655\n2014-05-06,-0.0109,-0.00938\n2014-05-07,-0.0035,0.00922\n2014-05-08,-0.00178,0.00558\n2014-05-09,-0.00417,-0.00252\n2014-05-12,0.01245,0.01088\n2014-05-13,0.00157,0.01839\n2014-05-14,0.00019,-0.00445\n2014-05-15,-0.0085,-0.0159\n2014-05-16,0.01476,0.00581\n2014-05-19,0.01185,-0.00201\n2014-05-20,0.0002,-0.00176\n2014-05-21,0.00265,0.01689\n2014-05-22,0.00158,-0.0062\n2014-05-23,0.0113,0.0005\n2014-05-27,0.01873,0.00174\n2014-05-28,-0.00259,-0.00448\n2014-05-29,0.01822,0.00825\n2014-05-30,-0.00375,0.01487\n2014-06-02,-0.00687,-0.00366\n2014-06-03,0.01414,-0.01226\n2014-06-04,0.01142,0.00074\n2014-06-05,0.00392,0.02207\n2014-06-06,-0.00275,0.00655\n2014-06-09,0.016,-0.00506\n2014-06-10,0.00587,-0.00388\n2014-06-11,-0.00414,-0.00608\n2014-06-12,-0.01673,-0.00685\n2014-06-13,-0.01094,0.01602\n2014-06-16,0.01008,0.00655\n2014-06-17,-0.0013,0.00434\n2014-06-18,0.00109,-0.00072\n2014-06-19,-0.00347,-0.00336\n2014-06-20,-0.01034,0.0041\n2014-06-23,-0.00088,0.00744\n2014-06-24,-0.00606,-0.00572\n2014-06-25,0.00089,0.00671\n2014-06-26,0.00598,-0.00738\n2014-06-27,0.01188,0.0127\n2014-06-30,0.01033,-0.01302\n2014-07-01,0.00635,0.00408\n2014-07-02,-0.00043,0.00072\n2014-07-03,0.00588,-0.00239\n2014-07-07,0.02063,0.00455\n2014-07-08,-0.00646,-0.005\n2014-07-09,0.00042,-0.00263\n2014-07-10,-0.00367,0.00048\n2014-07-11,0.00189,0.00959\n2014-07-14,0.01292,0.00119\n2014-07-15,-0.01172,0.00736\n2014-07-16,-0.00567,0.0384\n2014-07-17,-0.01783,0.01021\n2014-07-18,0.01439,0.00359\n2014-07-21,-0.00519,0.00336\n2014-07-22,0.0083,-0.00022\n2014-07-23,0.02608,0.00089\n2014-07-24,-0.00165,-0.01047\n2014-07-25,0.0066,0.00225\n2014-07-28,0.01382,-0.01191\n2014-07-29,-0.00646,-0.00182\n2014-07-30,-0.00234,-0.00706\n2014-07-31,-0.02598,-0.00964\n2014-08-01,0.00554,-0.00695\n2014-08-04,-0.00562,0.0119\n2014-08-05,-0.00492,-0.00669\n2014-08-06,-0.00168,-0.00789\n2014-08-07,-0.00011,0.01146\n2014-08-08,0.00275,-0.00069\n2014-08-11,0.01319,0\n2014-08-12,-0.00021,0.00741\n2014-08-13,0.01323,0.01287\n2014-08-14,0.00267,0.00431\n2014-08-15,0.00492,0.01175\n2014-08-18,0.01204,0.00714\n2014-08-19,0.01382,0.01115\n2014-08-20,0.0004,-0.00838\n2014-08-21,0.0001,0.00601\n2014-08-22,0.00736,-0.00155\n2014-08-25,0.00217,0.00044\n2014-08-26,-0.0064,-0.00354\n2014-08-27,0.01229,-0.00311\n2014-08-28,0.00118,0.00022\n2014-08-29,0.00244,0.01225\n2014-09-02,0.0078,-0.00748\n2014-09-03,-0.04221,-0.00288\n2014-09-04,-0.00829,0.00667\n2014-09-05,0.00866,0.01436\n2014-09-08,-0.00616,0.0122\n2014-09-09,-0.00376,0.00624\n2014-09-10,0.03072,0.00171\n2014-09-11,0.00426,0.00342\n2014-09-12,0.00227,-0.00638\n2014-09-15,-0.0003,-0.00985\n2014-09-16,-0.00758,0.01125\n2014-09-17,0.00714,-0.00513\n2014-09-18,0.00207,0.00344\n2014-09-19,-0.00815,0.01799\n2014-09-22,0.00099,-0.00968\n2014-09-23,0.01563,-0.01062\n2014-09-24,-0.00867,0.01117\n2014-09-25,-0.03813,-0.02209\n2014-09-26,0.02943,0.00804\n2014-09-29,-0.00635,0.00065\n2014-09-30,0.00639,-0.00172\n2014-10-01,-0.01558,-0.00992\n2014-10-02,0.00726,-0.00305\n2014-10-03,-0.0028,0.00721\n2014-10-06,0,0\n2014-10-07,-0.00873,-0.01215\n2014-10-08,0.02076,0.02745\n2014-10-09,0.00218,-0.01988\n2014-10-10,-0.00287,-0.03969\n2014-10-13,-0.00913,-0.00863\n2014-10-14,-0.01062,0.00183\n2014-10-15,-0.01225,-0.01166\n2014-10-16,-0.01312,-0.01111\n2014-10-17,0.01465,0.02082\n2014-10-20,0.0214,0.01031\n2014-10-21,0.02717,0.01815\n2014-10-22,0.00507,-0.01114\n2014-10-23,0.01787,0.01442\n2014-10-24,0.00372,0.02466\n2014-10-27,-0.00105,-0.00477\n2014-10-28,0.01551,0.01263\n2014-10-29,0.00562,0.0028\n2014-10-30,-0.00335,-0.01223\n2014-10-31,0.00953,0.01954\n2014-11-03,0.01296,0.01044\n2014-11-04,-0.00731,0.00274\n2014-11-05,0.00239,0.0061\n2014-11-06,0.00286,0.01755\n2014-11-07,0.00285,-0.00041\n2014-11-10,-0.00165,0.00431\n2014-11-11,0.00799,-0.00041\n2014-11-12,0.01413,-0.00184\n2014-11-13,0.01411,0.01702\n2014-11-14,0.01205,-0.0006\n2014-11-17,-0.00166,-0.00242\n2014-11-18,0.01298,-0.00834\n2014-11-19,-0.00693,-0.01067\n2014-11-20,0.0143,0.00995\n2014-11-21,0.00138,-0.01478\n2014-11-24,0.01855,-0.00813\n2014-11-25,-0.00868,-0.00252\n2014-11-26,0.0119,0.0059\n2014-11-28,-0.00059,0.00126\n2014-12-01,-0.03246,0.01694\n2014-12-02,-0.00382,-0.00329\n2014-12-03,0.01134,-0.00784\n2014-12-04,-0.0038,0.01581\n2014-12-05,-0.00424,-0.0086\n2014-12-08,-0.02261,-0.01487\n2014-12-09,0.0153,-0.00231\n2014-12-10,-0.01902,-0.0145\n2014-12-11,-0.00295,0.00576\n2014-12-12,-0.01693,-0.00466\n2014-12-15,-0.01367,-0.00596\n2014-12-16,-0.01367,-0.03235\n2014-12-17,0.02492,0.01284\n2014-12-18,0.02961,0.03892\n2014-12-19,-0.00772,0.00295\n2014-12-22,0.01038,0.00671\n2014-12-23,-0.00354,0.0098\n2014-12-24,-0.00471,-0.0064\n2014-12-26,0.01768,-0.0054\n2014-12-29,-0.0007,-0.00898\n2014-12-30,-0.0122,-0.00906\n2014-12-31,-0.01902,-0.01212";
var data = d3.csvParse(csvData, function(d) {
return {
X: +d.AAPL,
Y: +d.MSFT
}
});
var xExtent = d3.extent(data, function(d) { return d.X; });
var yExtent = d3.extent(data, function(d) {
return d.Y;
});
var maxExtent = d3.max(xExtent.concat(yExtent), function(d) {
return Math.abs(d);
})
var graphWidth = 400, graphHeight = 400;
var radius = 5;
var margins = { left: 50, top: 50, right: 50, bottom: 50 };
var axisPadding = 3;
var totalHeight = graphHeight + margins.top + margins.bottom;
var totalWidth = graphWidth + margins.left + margins.right;
var scale = d3.scaleLinear()
.domain([-maxExtent, maxExtent])
.range([0, graphWidth]);
var svg = d3.select('body')
.append('svg')
.attrs({
width: totalWidth,
height: totalHeight
});
svg.append('g')
.attrs({transform: 'translate(' + margins.left + ',' + margins.top + ')'})
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attrs({
cx: function(d) { return scale(d.X); },
cy: function(d) { return scale(d.Y); },
r: radius,
fill: 'none',
stroke: 'steelblue'
});
var yGridLinesAxis = d3.axisLeft(scale)
.tickSize(graphWidth + axisPadding)
.tickFormat("");
var yGridlineNodes = svg.append('g')
.attrs({
transform: 'translate(' + (margins.left + graphWidth) + ',' + margins.top + ')'
})
.call(yGridLinesAxis);
yGridlineNodes.selectAll('.domain')
.attrs({
fill: 'none',
stroke: 'none'
});
yGridlineNodes.selectAll('.tick line')
.attrs({
fill: 'none',
'stroke-width': 1,
stroke: 'lightgray'
});
var xGridLinesAxis = d3.axisBottom(scale)
.tickSize(graphHeight + axisPadding)
.tickFormat("");
var xGridLineNodes = svg.append('g')
.attrs({
transform: 'translate(' + margins.left + ',' + margins.top + ')'
})
.call(xGridLinesAxis);
xGridLineNodes.selectAll('.domain')
.attrs({
fill: 'none',
stroke: 'none'
});
xGridLineNodes.selectAll('.tick line')
.attrs({
fill: 'none',
'stroke-width': 1,
stroke: 'lightgray'
});
var xAxis = d3.axisBottom(scale);
svg.append('g')
.attrs({
transform: 'translate(' + margins.left + ',' + (margins.top + graphHeight) + ')'
})
.call(xAxis);
var yAxis = d3.axisLeft(scale);
svg.append('g')
.attrs({
transform: 'translate(' + (margins.left - axisPadding) + ',' + margins.top + ')'
})
.call(yAxis);
</script>
</body>
</html>