Skip to content

Instantly share code, notes, and snippets.

@maithuy

maithuy/annual_yields_36M_A.csv

Last active July 27, 2018 03:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maithuy/5766374df8119e76969b to your computer and use it in GitHub Desktop.
Save maithuy/5766374df8119e76969b to your computer and use it in GitHub Desktop.
Download ZIP
D3.js Multi-Line Chart example
Raw
annual_yields_36M_A.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 7 columns, instead of 8. in line 17.
Months,2008,2009,2010,2011,2012,2013
1,8.11,8.54,6.85,6.87,7.42,7.51
2,8.18,8.57,6.90,6.89,7.45,7.52
3,8.21,8.58,6.93,6.89,7.41,7.49
4,8.20,8.57,6.92,6.88,7.39,7.47
5,8.21,8.56,6.91,6.78,7.16,7.45
6,8.24,8.54,6.91,6.73,7.00,7.38
7,8.25,8.52,6.81,6.37,6.65,7.32
8,7.82,8.40,6.80,6.22,6.38,7.24
9,7.87,8.29,6.73,6.14,6.16,7.17
10,7.89,8.15,6.51,6.00,6.08,7.11
11,7.92,7.90,6.42,5.90,5.88,7.04
12,7.37,7.51,6.21,5.72,5.71,6.95
13,7.39,7.39,6.12,5.61,5.58,6.90
14,7.41,6.72,6.05,5.35,5.41,6.90
15,7.15,6.60,6.05,5.20,5.29,6.90
16,6.75,6.46,5.90,5.16,5.16,6.88
17,6.78,6.49,5.78,5.09,5.04,,
18,6.82,6.32,5.76,4.98,4.96,,
19,5.87,6.14,5.71,4.84,4.93,,
20,5.66,6.12,5.56,4.76,4.89,,
21,5.70,6.00,5.47,4.66,4.84,,
22,5.74,6.04,5.46,4.58,4.81,,
23,5.66,5.99,5.42,4.61,4.77,,
24,5.31,5.91,5.40,4.60,4.72,,
25,5.35,5.86,5.37,4.57,4.70,,
26,5.37,5.70,5.31,4.54,4.68,,
27,5.40,5.64,5.29,4.46,4.67,,
28,5.41,5.49,5.26,4.42,4.67,,
29,5.43,5.45,5.26,4.36,4.67,,
30,5.31,5.42,5.19,4.33,,,
31,5.32,5.37,5.16,4.31,,,
32,5.27,5.34,5.12,4.29,,,
33,5.27,5.29,5.09,4.28,,,
34,5.26,5.25,5.06,4.26,,,
35,5.25,5.25,5.03,4.26,,,
36,5.24,5.24,5.01,4.25,,,
Raw
annual_yields_36M_All.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 7 columns, instead of 8. in line 17.
Months,2008,2009,2010,2011,2012,2013
1,12.73,12.62,11.73,10.76,13.18,13.15
2,12.75,12.67,11.77,10.78,13.19,13.15
3,12.68,12.67,11.76,10.76,13.17,13.12
4,12.63,12.64,11.73,10.70,13.11,13.07
5,12.56,11.77,11.36,10.44,12.79,12.86
6,12.50,10.29,11.06,10.10,12.46,12.57
7,12.22,9.78,10.32,9.73,12.01,12.30
8,11.28,9.53,9.91,9.41,11.56,12.00
9,9.80,9.11,9.71,9.19,11.04,11.75
10,9.03,8.60,9.45,8.93,10.67,11.54
11,8.45,8.21,9.07,8.70,10.29,11.34
12,8.36,7.95,8.56,8.42,9.86,11.20
13,8.38,7.62,8.43,8.23,9.54,11.05
14,8.22,7.31,8.03,8.03,9.18,10.97
15,7.36,7.08,7.89,7.85,8.89,10.92
16,6.49,6.79,7.71,7.74,8.62,10.90
17,6.26,6.74,7.57,7.58,8.44,,
18,6.03,6.47,7.50,7.42,8.22,,
19,5.22,6.39,7.41,7.22,8.09,,
20,4.52,6.38,7.31,7.13,7.95,,
21,3.87,6.22,7.22,7.06,7.84,,
22,3.80,6.16,7.10,6.91,7.78,,
23,3.43,6.05,7.03,6.86,7.72,,
24,3.24,5.98,6.97,6.79,7.67,,
25,2.98,5.81,6.90,6.71,7.65,,
26,2.84,5.74,6.81,6.61,7.62,,
27,2.78,5.66,6.78,6.52,7.61,,
28,2.71,5.57,6.75,6.44,7.61,,
29,2.63,5.56,6.68,6.38,7.61,,
30,2.67,5.48,6.64,6.34,,,
31,2.64,5.44,6.60,6.30,,,
32,2.62,5.41,6.55,6.27,,,
33,2.60,5.37,6.51,6.26,,,
34,2.58,5.30,6.46,6.24,,,
35,2.49,5.30,6.40,6.22,,,
36,2.43,5.27,6.37,6.21,,,
Raw
annual_yields_36M_B.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 7 columns, instead of 8. in line 17.
Months,2008,2009,2010,2011,2012,2013
1,10.32,11.35,10.63,11.01,12.27,11.91
2,10.34,11.55,10.67,11.03,12.28,11.91
3,10.30,11.60,10.66,10.99,12.25,11.87
4,10.28,11.61,10.66,10.95,12.20,11.86
5,10.26,10.93,10.30,10.86,11.85,11.78
6,10.19,9.40,10.13,10.52,11.63,11.62
7,10.14,8.76,9.59,10.19,11.24,11.44
8,9.29,8.72,9.32,9.85,10.92,11.21
9,8.56,8.67,9.05,9.58,10.62,11.04
10,8.40,7.84,8.86,9.25,10.24,10.83
11,7.93,7.48,8.71,9.07,9.95,10.70
12,7.83,7.49,8.03,9.01,9.55,10.57
13,7.93,7.19,7.97,8.90,9.30,10.45
14,7.56,6.84,7.42,8.80,8.95,10.39
15,7.01,6.55,7.41,8.59,8.70,10.36
16,6.87,6.38,7.34,8.34,8.41,10.35
17,6.25,6.33,7.33,8.18,8.20,,
18,6.25,5.82,7.35,8.04,8.04,,
19,5.94,5.91,7.33,7.80,7.90,,
20,4.97,5.91,7.17,7.76,7.79,,
21,4.46,5.90,7.15,7.66,7.68,,
22,4.41,5.84,7.00,7.59,7.61,,
23,4.40,5.70,6.94,7.48,7.55,,
24,4.16,5.52,6.90,7.42,7.52,,
25,3.95,5.44,6.83,7.33,7.49,,
26,3.93,5.32,6.84,7.27,7.46,,
27,3.95,5.34,6.83,7.18,7.45,,
28,3.97,5.27,6.80,7.10,7.44,,
29,3.75,5.31,6.74,7.01,7.44,,
30,3.74,5.21,6.73,6.96,,,
31,3.63,5.15,6.66,6.91,,,
32,3.67,5.15,6.61,6.87,,,
33,3.70,5.15,6.57,6.85,,,
34,3.66,5.05,6.52,6.83,,,
35,3.58,5.03,6.46,6.80,,,
36,3.55,5.00,6.40,6.78,,,
Raw
annual_yields_36M_C.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 7 columns, instead of 8. in line 17.
Months,2008,2009,2010,2011,2012,2013
1,12.08,13.39,13.69,14.16,15.68,15.86
2,12.11,13.39,13.73,14.17,15.70,15.86
3,12.01,13.31,13.72,14.15,15.68,15.85
4,11.97,13.28,13.69,13.99,15.66,15.78
5,11.90,12.44,13.01,12.94,15.33,15.59
6,11.89,10.21,12.63,12.16,14.90,15.18
7,11.87,9.09,12.32,12.08,14.37,14.88
8,11.43,9.10,11.83,11.17,13.79,14.55
9,10.53,8.30,11.74,10.92,13.07,14.29
10,9.88,8.15,11.42,10.91,12.60,14.04
11,9.79,7.89,10.60,10.27,12.11,13.76
12,9.41,7.50,10.37,9.33,11.62,13.60
13,9.49,7.20,10.18,9.05,11.17,13.40
14,9.03,7.20,9.59,8.82,10.71,13.29
15,7.96,7.02,9.38,8.65,10.33,13.20
16,7.72,6.79,9.12,8.53,9.98,13.18
17,7.60,6.64,8.80,8.20,9.74,,
18,6.71,6.68,8.58,8.14,9.44,,
19,6.66,6.80,8.41,8.06,9.27,,
20,6.09,6.85,8.45,7.94,9.09,,
21,5.15,6.69,8.35,7.91,8.99,,
22,4.92,6.58,8.21,7.68,8.91,,
23,4.54,6.48,8.17,7.59,8.87,,
24,4.18,6.43,8.09,7.47,8.79,,
25,4.00,6.16,8.02,7.30,8.77,,
26,3.67,6.21,7.75,7.28,8.77,,
27,3.62,6.11,7.70,7.18,8.75,,
28,3.69,5.98,7.65,7.11,8.75,,
29,3.41,5.93,7.52,7.12,8.75,,
30,3.48,5.86,7.47,7.06,,,
31,3.24,5.81,7.43,7.00,,,
32,3.29,5.75,7.40,6.97,,,
33,3.19,5.73,7.33,6.96,,,
34,3.21,5.60,7.31,6.94,,,
35,3.22,5.58,7.31,6.94,,,
36,3.20,5.54,7.30,6.94,,,
Raw
annual_yields_36M_D.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 7 columns, instead of 8. in line 17.
Months,2008,2009,2010,2011,2012,2013
1,13.84,15.37,15.69,16.86,19.29,19.57
2,13.76,15.33,15.66,16.84,19.28,19.56
3,13.68,15.28,15.60,16.75,19.22,19.50
4,13.58,15.23,15.50,16.60,19.04,19.32
5,13.44,13.44,15.01,16.26,18.61,18.68
6,13.33,12.15,14.24,15.60,18.07,17.96
7,12.02,12.01,12.43,14.78,17.28,17.11
8,11.62,11.75,11.46,14.60,16.65,16.22
9,7.94,10.74,11.10,14.09,15.53,15.62
10,7.48,9.92,10.60,13.94,14.86,15.28
11,6.99,9.30,10.24,13.49,14.27,14.91
12,7.33,9.29,9.60,12.91,13.57,14.66
13,6.68,8.76,9.62,12.42,13.13,14.45
14,6.97,8.57,9.23,12.30,12.62,14.26
15,6.13,8.45,9.23,12.17,12.16,14.13
16,5.64,7.80,9.05,12.11,11.75,14.09
17,5.49,7.90,8.68,11.92,11.57,,
18,5.60,7.68,8.66,11.36,11.17,,
19,4.14,7.58,8.68,10.92,10.87,,
20,2.56,7.48,8.44,10.75,10.61,,
21,2.31,7.02,8.13,10.78,10.41,,
22,1.93,6.80,8.11,10.43,10.36,,
23,1.03,6.64,7.87,10.27,10.29,,
24,0.82,6.67,7.89,10.14,10.23,,
25,0.57,6.50,7.84,10.01,10.22,,
26,0.39,6.42,7.83,9.55,10.19,,
27,0.02,6.45,7.72,9.48,10.18,,
28,-0.43,6.39,7.71,9.27,10.18,,
29,-0.29,6.42,7.59,9.25,10.18,,
30,-0.17,6.39,7.55,9.25,,,
31,-0.07,6.29,7.53,9.18,,,
32,-0.30,6.27,7.51,9.14,,,
33,-0.36,6.27,7.47,9.14,,,
34,-0.35,6.25,7.34,9.10,,,
35,-0.38,6.26,7.22,9.03,,,
36,-0.43,6.21,7.20,9.03,,,
Raw
annual_yields_36M_E.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 7 columns, instead of 8. in line 17.
Months,2008,2009,2010,2011,2012,2013
1,15.32,17.18,17.51,19.23,22.24,22.88
2,15.38,16.95,17.55,19.23,22.22,22.86
3,15.30,16.98,17.53,19.17,22.23,22.79
4,15.24,16.87,17.51,19.12,22.11,22.56
5,15.26,14.27,16.84,18.93,22.03,21.10
6,15.14,12.11,16.39,18.26,20.68,20.06
7,15.02,12.44,15.73,17.28,20.61,19.57
8,14.89,10.59,15.41,17.44,19.00,18.58
9,13.66,10.25,15.30,16.56,17.93,17.45
10,12.45,9.96,15.24,16.00,17.59,16.90
11,10.25,9.59,14.66,16.04,16.47,16.36
12,9.92,8.34,14.04,15.93,15.71,16.18
13,10.11,7.62,12.65,15.21,14.35,15.75
14,10.28,7.56,11.90,15.11,13.87,15.57
15,9.95,7.84,10.27,14.74,13.26,15.59
16,7.46,7.05,9.98,14.89,13.29,15.56
17,6.97,6.48,10.01,14.58,13.25,,
18,6.50,5.91,9.29,14.01,12.66,,
19,6.16,5.31,8.77,13.69,12.68,,
20,5.81,5.59,8.75,13.25,12.39,,
21,4.91,5.61,8.72,13.25,12.33,,
22,4.87,5.69,8.87,13.02,12.12,,
23,4.73,5.64,9.02,13.11,12.00,,
24,4.49,5.81,8.80,13.00,11.80,,
25,4.60,5.59,8.60,12.79,11.83,,
26,4.61,5.50,8.41,12.15,11.76,,
27,4.71,5.24,8.50,12.09,11.77,,
28,4.48,5.24,8.47,12.07,11.77,,
29,4.47,5.10,8.42,11.68,11.77,,
30,4.49,4.96,8.38,11.63,,,
31,4.55,5.03,8.29,11.65,,,
32,4.48,5.08,8.15,11.64,,,
33,4.43,4.91,8.14,11.64,,,
34,4.28,4.94,8.15,11.65,,,
35,4.30,4.95,7.82,11.65,,,
36,4.28,4.96,7.82,11.65,,,
Raw
annual_yields_36M_FG.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 7 columns, instead of 8. in line 17.
Months,2008,2009,2010,2011,2012,2013
1,18.05,20.01,20.51,21.25,24.84,25.43
2,18.00,19.85,20.44,21.10,24.96,25.45
3,17.81,19.65,19.88,21.00,24.88,25.36
4,17.59,19.40,19.67,20.89,24.74,25.21
5,17.34,19.35,19.57,20.83,22.41,21.61
6,17.14,15.62,18.48,18.21,22.65,18.63
7,16.93,14.25,11.68,18.35,22.00,16.70
8,13.24,12.99,9.64,18.47,19.64,16.76
9,10.79,12.84,9.17,18.56,16.18,14.89
10,8.31,11.55,9.26,9.78,16.69,14.65
11,7.86,10.49,7.00,10.48,16.36,14.60
12,8.31,10.15,4.62,11.05,12.97,14.69
13,8.71,9.95,5.31,11.53,12.13,14.73
14,8.27,8.95,5.95,7.75,11.50,14.69
15,6.20,6.67,4.90,8.29,10.95,14.62
16,4.18,6.91,4.23,8.77,11.43,14.62
17,4.35,7.31,4.75,9.18,11.86,,
18,4.24,6.95,5.19,9.00,12.21,,
19,2.14,5.75,4.82,9.09,12.50,,
20,1.97,5.34,5.24,9.32,12.69,,
21,0.72,4.63,5.52,9.51,11.83,,
22,1.01,4.88,3.92,6.68,11.96,,
23,0.32,4.71,3.74,6.86,12.05,,
24,0.56,4.47,3.50,6.10,12.11,,
25,-0.43,3.88,2.66,6.26,12.14,,
26,-0.78,3.87,2.60,5.40,12.17,,
27,-0.88,2.86,2.34,5.51,12.19,,
28,-0.69,2.85,2.40,5.06,12.19,,
29,-0.73,2.91,2.50,5.15,,,
30,-0.60,2.70,2.60,5.22,,,
31,-0.50,2.76,2.66,5.28,,,
32,-0.41,2.62,2.47,5.33,,,
33,-0.35,2.19,2.38,5.36,,,
34,-0.35,2.23,2.33,5.38,,,
35,-0.81,2.27,2.21,5.38,,,
36,-1.02,2.27,2.21,5.38,,,
Raw
annual_yields_60M_A.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 5 columns, instead of 6. in line 17.
Months,2010,2011,2012,2013
1,6.63,7.92,8.19,8.83
2,6.81,8.03,8.28,8.94
3,6.88,8.10,8.32,8.91
4,6.89,8.13,8.32,8.94
5,6.89,8.13,8.32,8.94
6,6.90,8.14,8.31,8.94
7,6.90,8.14,6.03,8.94
8,6.42,8.15,6.29,8.63
9,6.43,8.14,6.49,8.63
10,6.47,8.14,6.66,8.39
11,6.05,8.12,6.79,8.18
12,5.75,8.11,6.91,7.97
13,5.32,7.43,7.00,7.99
14,5.42,7.46,7.07,8.01
15,5.32,7.48,6.83,8.02
16,5.39,7.51,6.90,8.01
17,5.27,7.53,6.95,,
18,5.14,7.54,6.99,,
19,5.20,7.55,7.02,,
20,5.26,7.12,6.45,,
21,5.31,6.74,6.48,,
22,5.36,6.78,6.50,,
23,5.25,6.45,6.51,,
24,5.29,6.48,6.52,,
25,5.34,6.52,6.21,,
26,5.34,6.22,6.21,,
27,5.37,6.12,6.22,,
28,5.40,6.15,6.22,,
29,5.24,6.18,6.22,,
30,5.26,6.21,,,
31,5.29,5.93,,,
32,5.21,5.94,,,
33,5.23,5.95,,,
34,5.25,5.96,,,
35,5.27,5.96,,,
36,5.20,5.74,,,
37,5.22,5.74,,,
38,5.24,5.74,,,
39,5.18,5.74,,,
40,5.14,5.74,,,
41,5.15,,,,
42,5.16,,,,
43,5.17,,,,
44,5.17,,,,
45,5.17,,,,
46,5.18,,,,
47,5.18,,,,
48,5.18,,,,
Raw
annual_yields_60M_All.csv
Months 2010 2011 2012 2013
1 14.64 16.30 19.54 19.16
2 14.67 16.34 19.54 19.15
3 14.64 16.27 19.49 19.13
4 14.61 16.22 19.38 19.06
5 14.47 15.61 19.01 18.82
6 14.17 14.98 18.46 18.36
7 13.67 14.27 17.62 17.96
8 12.94 13.66 16.75 17.49
9 12.45 12.81 15.93 17.03
10 12.11 12.06 15.26 16.61
11 11.62 11.44 14.66 16.40
12 10.98 11.19 14.28 16.18
13 10.56 10.62 13.64 15.94
14 9.95 10.40 13.14 15.83
15 9.63 9.98 12.55 15.78
16 9.17 9.71 12.12 15.71
17 9.03 9.38 11.73 15.71
18 8.94 9.07 11.48
19 8.77 8.91 11.22
20 8.71 8.66 10.96
21 8.52 8.55 10.80
22 8.47 8.45 10.68
23 8.40 8.28 10.61
24 8.27 8.07 10.53
25 8.14 7.98 10.50
26 7.94 7.79 10.44
27 7.79 7.72 10.42
28 7.62 7.58 10.41
29 7.55 7.54 10.41
30 7.49 7.47
31 7.45 7.42
32 7.42 7.41
33 7.36 7.40
34 7.36 7.39
35 7.35 7.37
36 7.31 7.37
37 7.27 7.36
38 7.20 7.35
39 7.19 7.36
40 7.11 7.35
41 7.11 7.35
42 7.03
43 7.03
44 7.03
45 7.03
46 7.02
47 7.02
48 7.02
Raw
annual_yields_60M_B.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 19 should actually have 5 columns, instead of 6. in line 18.
Months,2010,2011,2012,2013
1,11.06,11.49,12.63,12.22
2,11.11,11.57,12.67,12.25
3,11.09,11.57,12.65,12.24
4,11.08,11.55,12.58,12.14
5,10.94,11.54,12.45,12.14
6,10.95,11.13,12.20,11.98
7,10.90,10.73,11.72,11.80
8,10.40,10.34,11.42,11.42
9,9.62,9.77,10.78,11.25
10,9.40,9.39,10.48,11.12
11,8.98,9.07,10.06,11.05
12,8.29,9.01,9.82,11.00
13,8.10,8.80,9.67,10.95
14,7.84,8.66,9.38,10.92
15,7.77,8.31,9.15,10.89
16,7.55,8.17,9.08,10.86
17,7.18,7.91,8.90,10.86
18,6.94,7.86,8.79,,
19,6.60,7.97,8.73,,
20,6.64,7.82,8.53,,
21,6.57,7.80,8.45,,
22,6.32,7.63,8.38,,
23,6.37,7.31,8.28,,
24,6.34,7.18,8.28,,
25,6.25,7.13,8.27,,
26,5.99,6.85,8.25,,
27,5.96,6.82,8.20,,
28,6.06,6.74,8.20,,
29,6.01,6.72,8.20,,
30,5.83,6.57,,,
31,5.71,6.50,,,
32,5.71,6.47,,,
33,5.68,6.45,,,
34,5.73,6.45,,,
35,5.78,6.43,,,
36,5.71,6.44,,,
37,5.68,6.43,,,
38,5.65,6.43,,,
39,5.57,6.42,,,
40,5.48,6.42,,,
41,5.46,6.42,,,
42,5.41,,,,
43,5.44,,,,
44,5.46,,,,
45,5.47,,,,
46,5.45,,,,
47,5.44,,,,
48,5.44,,,,
Raw
annual_yields_60M_C.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 5 columns, instead of 6. in line 17.
Months,2010,2011,2012,2013
1,13.78,14.27,16.08,16.64
2,13.78,14.28,16.09,16.64
3,13.78,14.27,16.06,16.62
4,13.72,14.08,16.02,16.60
5,13.62,13.39,15.65,16.43
6,13.62,11.95,15.17,16.19
7,13.24,11.62,14.64,15.98
8,12.13,11.22,14.03,15.71
9,11.99,10.64,13.49,15.45
10,11.64,9.81,12.94,15.11
11,10.64,9.66,12.36,14.96
12,10.19,9.49,12.17,14.82
13,9.88,9.14,11.93,14.61
14,9.40,8.90,11.73,14.48
15,8.96,8.58,11.16,14.45
16,8.53,8.51,10.85,14.41
17,8.50,8.34,10.55,,
18,8.41,8.13,10.19,,
19,8.35,8.27,10.02,,
20,8.37,8.08,9.70,,
21,8.23,8.07,9.71,,
22,8.06,7.95,9.72,,
23,8.13,7.90,9.50,,
24,8.08,7.60,9.49,,
25,7.79,7.40,9.46,,
26,7.57,7.30,9.48,,
27,7.42,7.17,9.50,,
28,7.37,7.03,9.50,,
29,7.27,6.88,9.48,,
30,7.31,6.85,,,
31,7.34,6.79,,,
32,7.40,6.83,,,
33,7.42,6.81,,,
34,7.42,6.80,,,
35,7.30,6.76,,,
36,7.21,6.74,,,
37,7.10,6.73,,,
38,7.08,6.74,,,
39,7.06,6.74,,,
40,7.12,6.75,,,
41,7.09,,,,
42,7.13,,,,
43,7.06,,,,
44,7.09,,,,
45,7.10,,,,
46,7.07,,,,
47,7.07,,,,
48,7.07,,,,
Raw
annual_yields_60M_D.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 5 columns, instead of 6. in line 17.
Months,2010,2011,2012,2013
1,16.17,17.47,20.03,19.98
2,16.12,17.47,19.96,19.96
3,16.06,17.43,19.91,19.95
4,16.04,17.36,19.73,19.81
5,15.95,17.11,19.52,19.73
6,15.04,16.32,18.77,19.17
7,14.18,15.25,17.82,18.82
8,13.36,14.44,16.66,18.50
9,12.82,13.64,15.69,18.01
10,12.15,12.52,14.97,17.75
11,11.73,11.51,14.28,17.54
12,11.24,11.46,13.94,17.32
13,10.49,10.99,13.07,16.99
14,10.16,10.72,12.57,16.87
15,9.88,10.36,12.12,16.81
16,9.24,9.87,11.43,16.75
17,9.07,9.39,10.88,,
18,9.16,9.10,10.68,,
19,9.18,8.66,10.40,,
20,9.17,8.50,10.13,,
21,8.95,8.49,10.10,,
22,9.04,8.46,9.93,,
23,9.05,8.25,9.94,,
24,8.71,8.16,9.89,,
25,8.89,7.96,9.82,,
26,8.70,7.80,9.70,,
27,8.68,7.84,9.65,,
28,8.32,7.72,9.66,,
29,8.35,7.66,9.66,,
30,8.32,7.51,,,
31,8.26,7.57,,,
32,8.18,7.45,,,
33,8.16,7.42,,,
34,8.16,7.39,,,
35,8.26,7.39,,,
36,8.31,7.33,,,
37,8.26,7.35,,,
38,8.26,7.37,,,
39,8.33,7.37,,,
40,8.29,7.36,,,
41,8.34,,,,
42,8.18,,,,
43,8.15,,,,
44,8.18,,,,
45,8.11,,,,
46,8.12,,,,
47,8.13,,,,
48,8.13,,,,
Raw
annual_yields_60M_E.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 5 columns, instead of 6. in line 17.
Months,2010,2011,2012,2013
1,17.76,19.57,22.79,23.48
2,17.84,19.59,22.79,23.47
3,17.79,19.33,22.74,23.43
4,17.75,19.37,22.68,23.39
5,17.72,17.71,22.39,23.01
6,17.67,17.43,21.83,22.30
7,16.18,16.48,21.07,21.90
8,15.07,15.97,19.95,21.31
9,15.21,14.77,18.96,20.66
10,15.36,14.24,18.40,20.13
11,14.79,13.60,17.94,19.92
12,13.71,13.16,17.26,19.55
13,13.08,12.49,16.46,19.27
14,11.75,12.55,15.78,19.16
15,11.35,11.86,15.00,19.06
16,10.34,11.46,14.49,19.01
17,10.28,11.18,13.96,,
18,10.21,10.74,13.61,,
19,9.96,10.40,13.19,,
20,9.90,9.94,12.88,,
21,9.59,9.92,12.63,,
22,9.77,9.80,12.46,,
23,9.50,9.52,12.45,,
24,9.08,9.33,12.34,,
25,8.87,9.20,12.36,,
26,8.65,9.08,12.25,,
27,8.35,9.05,12.23,,
28,8.06,8.80,12.21,,
29,7.99,8.79,12.21,,
30,8.04,8.81,,,
31,8.04,8.65,,,
32,8.06,8.74,,,
33,7.98,8.71,,,
34,7.97,8.71,,,
35,7.82,8.70,,,
36,7.84,8.74,,,
37,7.90,8.70,,,
38,7.71,8.69,,,
39,7.80,8.70,,,
40,7.60,8.67,,,
41,7.54,,,,
42,7.36,,,,
43,7.41,,,,
44,7.40,,,,
45,7.43,,,,
46,7.41,,,,
47,7.42,,,
48,7.42,,,
Raw
annual_yields_60M_FG.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 18 should actually have 5 columns, instead of 6. in line 17.
Months,2010,2011,2012,2013
1,20.63,22.42,25.38,26.45
2,20.60,22.50,25.34,26.39
3,20.60,22.44,25.26,26.34
4,20.58,22.37,24.95,26.25
5,20.08,21.83,23.98,25.50
6,18.94,21.81,23.29,24.67
7,19.10,20.66,21.84,23.41
8,19.18,19.42,20.77,22.26
9,17.54,17.96,19.81,21.23
10,16.55,16.80,18.51,20.24
11,16.69,15.36,17.60,19.82
12,16.16,14.60,17.22,19.45
13,15.83,13.12,16.15,19.16
14,14.61,12.41,15.36,19.05
15,13.88,12.01,14.45,19.01
16,13.74,11.62,13.94,18.82
17,13.88,11.02,13.63,,
18,13.84,10.25,13.44,,
19,13.59,9.79,13.12,,
20,12.98,9.45,12.98,,
21,12.59,8.82,12.57,,
22,12.57,8.81,12.36,,
23,12.20,8.88,12.32,,
24,12.35,8.53,12.10,,
25,12.04,8.70,12.07,,
26,11.92,8.39,12.00,,
27,11.41,8.16,12.00,,
28,10.85,8.04,11.97,,
29,10.68,8.10,11.98,,
30,10.47,8.04,,,
31,10.41,8.09,,,
32,10.14,8.09,,,
33,9.82,8.15,,,
34,9.72,8.09,,,
35,9.78,8.06,,,
36,9.70,8.11,,,
37,9.56,8.11,,,
38,9.44,8.07,,,
39,9.35,8.08,,,
40,9.12,8.08,,,
41,9.20,,,,
42,9.11,,,,
43,9.15,,,,
44,9.04,,,,
45,9.03,,,,
46,9.04,,,,
47,9.05,,,,
48,9.05,,,,
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html { color: #585858; background-color: #fff; }
body { font-size: 13px; font-family: 'Helvetica',Helvetica,Arial,sans-serif; }
h1,h2,h3,h4,h5,h6,strong{ font-weight:bold; }
h1 { color: #585858; font-size: 28px; font-weight: lighter; }
h2 { color: #585858; font-size: 21px; font-weight: lighter; }
p { margin: 0; padding: 5px 0; color: #585858; font-size: 13px; font-weight: lighter; }
ol, ul, dl { margin-bottom: 1em; line-height: 1.2em; }
ol, ul { margin-left: 1.5em; }
ol li { list-style: decimal; }
blockquote { font-weight: bold; font-style: italic; }
blockquote p { padding: 10px 0 0 0; }
a { color:#206dd6;text-decoration:none; }
sup { vertical-align: super; height: 0; font-size: 10px; }
h1 sup, h2 sup, h3 sup { vertical-align: super; height: 0; font-size: 12px; }
abbr,acronym {border-bottom:1px dotted #000;cursor:help;}
em{font-style:italic;}
strong{font-weight:bold;}
del{text-decoration:line-through; }
.clear { clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0; }
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
/* D3 SVG common styles */
svg text { pointer-events: none; }
.axis path, .axis line { fill: none; shape-rendering: crispEdges; }
.bar { fill: steelblue; }
.y text { fill: #7d7d7d; font-family: 'Arial Narrow', Arial, sans-serif; font-stretch: condensed; font-size: 11px; }
.legend { font-weight: bold; font-size: 13px; }
.d3charts { position: relative; clear: both; }
.d3charts h4 { margin: 5px 0 15px 84px; font-size: 16px; color: #7d7d7d; font-weight: bold; text-transform: uppercase; }
/* D3 tooltip */
.d3-tip { width: 100px; line-height: 1; font-weight: bold; padding: 10px; background: transparent; color: #f5fafa; border-radius: 2px; text-align: left; pointer-events: none; }
.d3-tip strong { text-transform: uppercase; font-size: 10px; font-weight: lighter; letter-spacing: normal; pointer-events: none; }
.d3-tip span { display: inline-block; padding: 0; font-size: 18px; pointer-events: none; }
#annualYieldsChart { margin:0; padding: 10px 0 0; }
#annualYieldsChart .title { text-transform: uppercase; font-weight: bold; }
#annualYieldsChart .line { stroke-width: 3px; }
#annualYieldsChart .grid-background { fill: #f9f9f9; }
#annualYieldsChart .grid .tick { stroke: #fff; stroke-opacity: 0.7; shape-rendering: crispEdges; }
#annualYieldsChart .grid path { stroke-width: 1; opacity: 0.7; stroke: #fff; }
.annual-yields-year-axis {
position: relative; width: 100%; margin: 70px 0 0 0; clear: both; height: 32px;
-webkit-box-shadow: 0px 10px 4px 0px rgba(209,209,209,1); -moz-box-shadow: 0px 10px 4px 0px rgba(209,209,209,1); box-shadow: 0px 10px 4px 0px rgba(209,209,209,1);
}
.annual-yields-year-axis ul { margin: 0 0 0 80px; list-style-type: none; }
.annual-yields-year-axis li { float: left; width: 22px; margin: 0; padding: 0 0 3px 1px; border-bottom: 14px solid #ebf3f5; color: #b6b6b6; font-size: 22px; text-align: center; }
.annual-yields-year-axis span { display: inline-block; text-indent: -99999em; }
.annual-yields-year-axis span.marked { text-indent: 0; }
#annualYieldsChart .axis path,
#annualYieldsChart .axis line { fill: none; stroke: none; stroke-width: 1; shape-rendering: crispEdges; }
#annualYieldsChart .yAxis line { opacity: 0; }
#annualYieldsChart .overlay { fill: none; pointer-events: all; }
#annualYieldsChart .focus circle { fill: none; }
#annualYieldsChart .axis path, #annualYieldsChart .axis line { fill: none; stroke: #f8f8f8; shape-rendering: crispEdges; }
#annualYieldsChart .x.axis line { fill: none; stroke: #e4e4e4; shape-rendering: crispEdges; opacity: 0; }
#annualYieldsChart path.domain { opacity: 0; }
.annual-yield-chart-divider { margin: 25px auto 20px; }
#annualYieldsChart .x text { fill: #7d7d7d; font-family: 'Arial Narrow', Arial, sans-serif; font-stretch: condensed; font-size: 11px; }
#annualYieldsChart .annual-yield-grid-background { fill: #f1f1f1; }
#annualYieldsChart .year-legend { text-transform: none; font-weight: normal; }
#annualYieldsChart .legend-grade text { font-weight: bold; text-transform: normal; }
#annualYieldsChart .legend-controls-annual-yields text { font-weight: bold; text-transform: normal; }
.source { margin: 0 10px 10px 80px; }
</style>
<body>
<div id="annualYieldsChart" class="d3charts"></div>
<div class="source">
<p>This chart shows the net annualized return of loans by vintage, or by the year in which they were issued. The color of the line indicates the vintage. X axis indicates the number of months that have passed since the loan was issued.</p>
<p>You can use the controls above the chart to customize which loan grades and terms are included in the chart.</p>
<p>This chart is reproduced from my work at the LendingClub.com. The actual implementation of this and other charts are available at <a href="https://www.lendingclub.com/info/demand-and-credit-profile.action">Lendingclub.com's Loan Statistics</a>.</p>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var dataSource = "annual_yields_36M_All.csv";
renderAnnualYieldsChart(dataSource);
function renderAnnualYieldsChart(dataSource) {
var margin = {top: 50, right: 50, bottom: 30, left: 80},
canvasHeight = 370,
width = 830,
height = 380 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width], 0),
y = d3.scale.linear().range([height, 0]),
xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(""),
yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(function(d){ return d + "%"; });
/* Lines */
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.month); })
.y(function(d) { return y(d.percentage); });
/* Canvas */
var svg = d3.select("#annualYieldsChart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", canvasHeight)
.attr({"margin-top": margin.top, "margin-left":0})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* Set background */
svg.append("rect").attr("class", "annual-yield-grid-background").attr({"height": 300, "width": 805, "x": 1, "y":0});
/* Chart title */
svg.append("text")
.attr("class", "title")
.attr("x", 174).attr("y", -25).attr("text-anchor", "middle")
.style({"font-size":"18px", "fill":"#7d7d7d" })
.text("Net Annualized Return by Vintage");
/* Legend: Term controls */
svg.append("text").attr({"x": 410, "y": -25}).text("Term")
.style({"fill":"#a1a1a1", "font-family": "Arial Narrow"});
var colorLegend = d3.scale.ordinal().range(["#5278a5", "#6ec6e2", "#5aa335", "#89c540", "#eae200", "#ffca2c", "#f7951e", "#a1a1a1"]),
legendData = ["A","B","C","D","E","FG","All"],
termsControls = ["36","60"],
defaultPageLoad = true;
var legendControls = svg.selectAll(".legend")
.data(termsControls)
.enter().append("g")
.attr("class", "legend-controls-annual-yields")
.attr("id", function(d, i) { return "term-" + d;})
.attr("transform", function(d, i) {
var grades = termsControls.length;
return "translate(-" + (((grades - i) * 31 + (width/4))) + ", -43)"; }
);
legendControls.append("rect")
.attr("x", width - 118).attr("width", 26).attr("height", 26)
.attr("class", function(d) { return "avg-stated-interest-control" + d;})
.style({"fill":"#a1a1a1", "cursor":"pointer"});
legendControls.append("text").attr("x", 719)
.attr("y", 14).attr("dy", ".25em").attr("class", function(d){ return ("term-control-" + d); })
.text(function(d) { return d; }).style({"fill":"#fff", "cursor": "pointer"});
/* Legend: Grades */
colorLegend.domain(legendData);
svg.append("text").attr({"x": 551, "y": -25}).text("Grade").style({"fill":"#a1a1a1", "font-family": "Arial Narrow"});
var legend = svg.selectAll(".legend")
.data(colorLegend.domain().slice()).enter().append("g").attr("class", "legend-grade")
.attr("id", function(d, i) { return "grade-" + d;})
.attr("transform", function(d, i) {
var grades = legendData.length;
return "translate(-" + (((grades - i) * 31) - 29) + ", -43)"; }
);
legend.append("rect")
.attr("x", width - 52).attr({"width": 26,"height": 26})
.attr("class", function(d) { return "rect-grade-" + d; })
.style({"fill": colorLegend, "cursor":"pointer"});
legend.append("text").attr("x", width - 44)
.attr("y", 14).attr("dy", ".25em")
.text(function(d,i) { return d; })
.style({"fill": "#fff", "cursor": "pointer"})
.attr("font-weight", function(d, i){
if (d === "All") { return ("normal"); } else { return ("bold"); }
})
.attr("text-transform", function(d, i){
if (d === "All") { return ("none"); } else { return ("uppercase"); }
});
/* Static UI elements */
d3.select("#annualYieldsChart").select(".rect-grade-All").style({"fill":"#a1a1a1", "font-weight":"bold"}).attr({"width":30});
d3.select("#annualYieldsChart").select("#grade-FG").select("text").attr({"x":782});
/* Using for loop to draw multiple vertical lines */
var drawVerticalGridLines = function(gridWidth){
for (var j=gridWidth; j <= width; j=j+gridWidth) {
svg.append("svg:line")
.attr("class", "vertical-grid-lines")
.attr("x1", j-gridWidth)
.attr("y1", 0)
.attr("x2", j-gridWidth)
.attr("y2", height)
.style("stroke", function(){
return j%3===0 ? "#e4e4e4" : "#f8f8f8";
})
.style("stroke-width", 1.5);
};
};
/* Draw chart */
var drawData = function(data, dataTerm){
var colorVintage = [];
if (dataTerm === "36") {
colorVintage = d3.scale.ordinal().range(["#784a1c", "#007070", "#c70076", "#8f62cc", "#45bdbd", "#e996c8"]);
} else {
colorVintage = d3.scale.ordinal().range(["#c70076", "#8f62cc", "#45bdbd", "#e996c8"]);
}
/* Mapping data */
colorVintage.domain(d3.keys(data[0]).filter(function(key) { return key !== "Months"; }));
var vintageGrades = colorVintage.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
var percentValue = d[name];
if(percentValue !== "") { percentValue = +d[name] }
return {month: +d.Months, percentage: percentValue};
})
};
});
/* Remove some rows that percentage is null */
for(var i in vintageGrades){
var values = vintageGrades[i].values;
for(var j = values.length-1 ; j>=0 ; j--){
if(values[j].percentage === ""){
values.splice(j,1);
}
}
}
/* Set data for X Axis */
x.domain(data.map(function(d,i) { return d.Months ; }));
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis).append("text");
/* Set data for Y Axis */
var vintageMinPercentage = d3.min(vintageGrades, function(c) {
return d3.min(c.values, function(v) { return v.percentage; });
}),
vintageMaxPercentage = d3.max(vintageGrades, function(c) {
return Math.ceil(d3.max(c.values, function(v) { return v.percentage; }));
}),
resetVintageMin = vintageMinPercentage > 0 ? 0 : -5; /* -5 is the default hard coded negative percentage */
if (vintageMaxPercentage % 5 === 0) {
vintageMaxPercentage = vintageMaxPercentage + 5;
} else {
vintageMaxPercentage = vintageMaxPercentage + 5 - (vintageMaxPercentage%5);
}
y.domain([ resetVintageMin, vintageMaxPercentage ]);
svg.append("g")
.attr("class", "y axis yAxis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)");
/* Draw line for each vintage year - Data */
var vintage = svg.selectAll(".vintage")
.data(vintageGrades).enter()
.append("g")
.attr("class", "vintage");
vintage.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return colorVintage(d.name); })
.style("fill-opacity", 0)
.attr("id", function(d) { return d.name; })
.on("mouseout", function() { tooltip.style("display", "none"); })
.on("mouseover", function(d) {
var xPosition = d3.mouse(this)[0],
yPosition = d3.mouse(this)[1];
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")")
.style({"display": "block"})
.attr("fill",function() { return colorVintage(d.name); });
tooltip.select("text").text(function(){ return d.name; });
});
/* Animation */
/* Note: Firefox will crash after a number of animation loops, put a lazy check */
if(window.navigator.userAgent.toLowerCase().indexOf('firefox') < 0){
d3.select("#annualYieldsChart").selectAll("path.line").each(function(d,i) {
var eachPath = d3.select(this),
totalLength = eachPath.node().getTotalLength();
eachPath.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(1800)
.ease("linear")
.attr("stroke-dashoffset", 0);
});
}
/* Grid horizontal lines */
svg.insert("g", ".vintage")
.attr("class", "y axis")
.attr("transform", "translate(0,0)")
.call(d3.svg.axis().scale(y)
.orient("left")
.tickSize(-805, 0, 0)
.tickFormat("")
);
/* Month ticks for Grid vertical lines */
svg.insert("g", ".vintage")
.attr("class", "x axis")
.attr("transform", "translate(-10,0)")
.call(d3.svg.axis().scale(x).orient("bottom").tickSize(height, height, 0));
d3.select("#annualYieldsChart").select(".x").selectAll(".tick line").style({"opacity": "0", "stroke-width": "0"});
/* Tooltip, initial display is hidden */
var tooltip = svg.append("g")
.attr("class", "tooltip")
.style("display", "none");
tooltip.append("rect")
.attr("width", 50)
.attr("height", 20)
.attr("rx","5").attr("ry","5")
.style("opacity", 1);
tooltip.append("text")
.attr("x", 25) .attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr({"font-size":"12px", "fill":"#fff"});
/* Legend: year */
svg.append("text").attr("x", 821)
.attr("class", "year-legend-label")
.attr("y", 10).attr("dy", ".25em")
.text("Vintage")
.style({"fill":"#a1a1a1", "font-family": "Arial Narrow"});
var legendYear = svg.selectAll(".legend-year")
.data(function(d){
return colorVintage.domain().slice().reverse();
})
.enter().append("g")
.attr("class", "legend-year")
.attr("transform", "translate(0, 375)");
legendYear.append("text")
.attr("x", 825)
.attr("y",function(d,i) {
if (i===0) { return -(height+36); }
else { return -((height+36) - (i*25)); }
})
.attr("font-weight","bold")
.style("fill", colorVintage)
.text(function(d) { return d; });
};
/* Load chart data */
var loadChartData = function(dataSource, dataTerm){
d3.csv(dataSource, function(error, data){
drawData(data, dataTerm);
});
};
var formatMonthTicks = function(tickDivider){
d3.select("#annualYieldsChart").select(".x").selectAll(".tick text").each(function(d,i) {
i++;
if (i%tickDivider !==0) { d3.select(this).style("opacity", 0); }
});
}
/* Default selection ALL terms, ALL grades */
if (defaultPageLoad){
/* On page load, the default Data is "30" term for "All" grade
* Term "36" : selected
* Grade "All" : selected
* Default vertical grid width: width/months = 23
*/
var defaultVerticalGridWidth = 23, defaultTickDivider = 3, defaultTerm = "36";
d3.select("#annualYieldsChart").select("#term-36").select("text").classed("selected", true);
d3.select("#annualYieldsChart").select("#term-36").append("circle").attr("cx", 726).attr("cy", 33).attr("r", 3).attr("width", 3).attr("height", 3).style("fill", "#a1a1a1");
d3.select("#annualYieldsChart").select("#grade-All").select("text").classed("selected", true);
d3.select("#annualYieldsChart").select("#grade-All").append("circle").attr("cx", 793).attr("cy", 33).attr("r", 3).attr("width", 3).attr("height", 3).style("fill", "#a1a1a1");
drawVerticalGridLines(defaultVerticalGridWidth);
loadChartData(dataSource, defaultTerm);
defaultPageLoad = false;
}
/* Interaction: Term selection */
legendControls.on("click", function(e) {
var xPos = +(d3.select(this).select("rect").attr("x")) + 14;
d3.select("#annualYieldsChart").selectAll(".legend-controls-annual-yields").selectAll("text").classed("selected", false);
d3.select("#annualYieldsChart").selectAll(".legend-controls-annual-yields").selectAll("circle").remove();
d3.select("#annualYieldsChart").select("g.xAxis").remove();
d3.select("#annualYieldsChart").select("g.yAxis").remove();
d3.select("#annualYieldsChart").select(".year-legend-label").remove();
d3.select("#annualYieldsChart").selectAll(".legend-year").remove();
d3.select("#annualYieldsChart").selectAll(".vintage").remove();
d3.select("#annualYieldsChart").selectAll(".tick").remove();
d3.select("#annualYieldsChart").selectAll("line").remove();
d3.select("#annualYieldsChart").selectAll(".hline").remove();
/* Set the selected Term */
d3.select(this).select("text").classed("selected", true);
d3.select(this).append("circle").attr("cx", xPos).attr("cy", 33).attr("r", 3).attr("width", 3).attr("height", 3).style("fill", "#a1a1a1");
/* Get selected term and selected grade */
var selectedTerm = d3.select(this).text();
var selectedGrade = d3.select("#annualYieldsChart .legend-grade text.selected").text();
var selectedDataSource = "annual_yields_" + selectedTerm + "M_" + selectedGrade + ".csv";
if (selectedTerm === "36") {
verticalGridWidth = 23;
} else {
verticalGridWidth = 17.5;
}
drawVerticalGridLines(verticalGridWidth);
loadChartData(selectedDataSource, selectedTerm);
});
/* Interaction: Grade selection - Only one grade is selected at a time */
legend.on("click", function(e) {
var selectedAnnualYieldGrade = d3.select(this).text(),
xPos = +(d3.select(this).select("rect").attr("x")) + 14;
d3.select("#annualYieldsChart").selectAll(".legend-grade").classed("selected", false);
d3.select("#annualYieldsChart").selectAll(".legend-grade").selectAll("circle").remove();
d3.select("#annualYieldsChart").select("g.xAxis").remove();
d3.select("#annualYieldsChart").select("g.yAxis").remove();
d3.select("#annualYieldsChart").select(".year-legend-label").remove();
d3.select("#annualYieldsChart").selectAll(".legend-year").remove();
d3.select("#annualYieldsChart").selectAll(".vintage").remove();
d3.select("#annualYieldsChart").selectAll(".tick").remove();
d3.select("#annualYieldsChart").selectAll("line").remove();
d3.select("#annualYieldsChart").selectAll(".hline").remove();
/* Set the selected Grade & Term */
d3.select(this).classed("selected", true);
d3.select(this).select("text").classed("selected", true);
d3.select(this).append("circle")
.attr("cx", xPos).attr("cy", 33).attr("r", 3).attr("width", 3).attr("height", 3)
.style("fill", function(){
var selectedGradeId = "#grade-"+selectedAnnualYieldGrade,
circleColour = d3.select("#annualYieldsChart")
.select(selectedGradeId)
.select("rect").style("fill");
return circleColour;
});
/* Get the selected Grade & Term */
var selectedGrade = d3.select(this).text();
var selectedTerm = d3.select("#annualYieldsChart .legend-controls-annual-yields text.selected").text();
var selectedDataSource = "annual_yields_" + selectedTerm + "M_" + selectedGrade + ".csv";
if (selectedTerm === "36") {
verticalGridWidth = 23;
} else {
verticalGridWidth = 17.5;
}
drawVerticalGridLines(verticalGridWidth);
loadChartData(selectedDataSource, selectedTerm);
});
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment