Skip to content

Instantly share code, notes, and snippets.

@MKyhos
Last active December 27, 2019 15:35
Show Gist options
  • Save MKyhos/36e898df35d47387696a36a7c62c7351 to your computer and use it in GitHub Desktop.
Save MKyhos/36e898df35d47387696a36a7c62c7351 to your computer and use it in GitHub Desktop.
anavis_linechart
var data = [
{
"tas": 1.96318,
"pr": 37.2661,
"Year": 1991,
"Month": 1,
"Country": "DEU"
},
{
"tas": -1.6809,
"pr": 22.4209,
"Year": 1991,
"Month": 2,
"Country": "DEU"
},
{
"tas": 7.32229,
"pr": 31.5152,
"Year": 1991,
"Month": 3,
"Country": "DEU"
},
{
"tas": 7.57161,
"pr": 33.0151,
"Year": 1991,
"Month": 4,
"Country": "DEU"
},
{
"tas": 10.0722,
"pr": 44.6224,
"Year": 1991,
"Month": 5,
"Country": "DEU"
},
{
"tas": 13.9218,
"pr": 109.232,
"Year": 1991,
"Month": 6,
"Country": "DEU"
},
{
"tas": 19.6432,
"pr": 57.2709,
"Year": 1991,
"Month": 7,
"Country": "DEU"
},
{
"tas": 18.6568,
"pr": 46.7002,
"Year": 1991,
"Month": 8,
"Country": "DEU"
},
{
"tas": 15.7292,
"pr": 49.3299,
"Year": 1991,
"Month": 9,
"Country": "DEU"
},
{
"tas": 8.66857,
"pr": 31.5855,
"Year": 1991,
"Month": 10,
"Country": "DEU"
},
{
"tas": 4.35209,
"pr": 68.3662,
"Year": 1991,
"Month": 11,
"Country": "DEU"
},
{
"tas": 1.13781,
"pr": 65.1587,
"Year": 1991,
"Month": 12,
"Country": "DEU"
},
{
"tas": 0.96594,
"pr": 32.388,
"Year": 1992,
"Month": 1,
"Country": "DEU"
},
{
"tas": 3.02409,
"pr": 35.7886,
"Year": 1992,
"Month": 2,
"Country": "DEU"
},
{
"tas": 5.68544,
"pr": 84.5245,
"Year": 1992,
"Month": 3,
"Country": "DEU"
},
{
"tas": 8.62675,
"pr": 52.9984,
"Year": 1992,
"Month": 4,
"Country": "DEU"
},
{
"tas": 15.0011,
"pr": 29.8259,
"Year": 1992,
"Month": 5,
"Country": "DEU"
},
{
"tas": 17.421,
"pr": 67.0675,
"Year": 1992,
"Month": 6,
"Country": "DEU"
},
{
"tas": 19.1176,
"pr": 82.9984,
"Year": 1992,
"Month": 7,
"Country": "DEU"
},
{
"tas": 19.56,
"pr": 84.1925,
"Year": 1992,
"Month": 8,
"Country": "DEU"
},
{
"tas": 14.1997,
"pr": 37.4143,
"Year": 1992,
"Month": 9,
"Country": "DEU"
},
{
"tas": 6.80679,
"pr": 69.9493,
"Year": 1992,
"Month": 10,
"Country": "DEU"
},
{
"tas": 5.60251,
"pr": 94.5292,
"Year": 1992,
"Month": 11,
"Country": "DEU"
},
{
"tas": 1.3996,
"pr": 49.5743,
"Year": 1992,
"Month": 12,
"Country": "DEU"
},
{
"tas": 2.40357,
"pr": 71.4716,
"Year": 1993,
"Month": 1,
"Country": "DEU"
},
{
"tas": 0.00333,
"pr": 26.4425,
"Year": 1993,
"Month": 2,
"Country": "DEU"
},
{
"tas": 4.57159,
"pr": 17.887,
"Year": 1993,
"Month": 3,
"Country": "DEU"
},
{
"tas": 10.6612,
"pr": 36.1154,
"Year": 1993,
"Month": 4,
"Country": "DEU"
},
{
"tas": 14.7693,
"pr": 63.6253,
"Year": 1993,
"Month": 5,
"Country": "DEU"
},
{
"tas": 16.1237,
"pr": 72.5617,
"Year": 1993,
"Month": 6,
"Country": "DEU"
},
{
"tas": 16.5336,
"pr": 126.813,
"Year": 1993,
"Month": 7,
"Country": "DEU"
},
{
"tas": 16.2893,
"pr": 59.0249,
"Year": 1993,
"Month": 8,
"Country": "DEU"
},
{
"tas": 12.6361,
"pr": 85.906,
"Year": 1993,
"Month": 9,
"Country": "DEU"
},
{
"tas": 8.17951,
"pr": 67.1057,
"Year": 1993,
"Month": 10,
"Country": "DEU"
},
{
"tas": 0.74878,
"pr": 30.4555,
"Year": 1993,
"Month": 11,
"Country": "DEU"
},
{
"tas": 3.11583,
"pr": 118.31,
"Year": 1993,
"Month": 12,
"Country": "DEU"
},
{
"tas": 3.25906,
"pr": 73.8074,
"Year": 1994,
"Month": 1,
"Country": "DEU"
},
{
"tas": 0.36829,
"pr": 26.8628,
"Year": 1994,
"Month": 2,
"Country": "DEU"
},
{
"tas": 6.6699,
"pr": 82.0528,
"Year": 1994,
"Month": 3,
"Country": "DEU"
},
{
"tas": 8.71049,
"pr": 74.5891,
"Year": 1994,
"Month": 4,
"Country": "DEU"
},
{
"tas": 12.7059,
"pr": 68.5048,
"Year": 1994,
"Month": 5,
"Country": "DEU"
},
{
"tas": 16.3011,
"pr": 65.0938,
"Year": 1994,
"Month": 6,
"Country": "DEU"
},
{
"tas": 21.7445,
"pr": 54.584,
"Year": 1994,
"Month": 7,
"Country": "DEU"
},
{
"tas": 18.5173,
"pr": 90.227,
"Year": 1994,
"Month": 8,
"Country": "DEU"
},
{
"tas": 13.8828,
"pr": 76.8859,
"Year": 1994,
"Month": 9,
"Country": "DEU"
},
{
"tas": 8.12692,
"pr": 47.2555,
"Year": 1994,
"Month": 10,
"Country": "DEU"
},
{
"tas": 7.33281,
"pr": 48.1837,
"Year": 1994,
"Month": 11,
"Country": "DEU"
},
{
"tas": 3.59386,
"pr": 70.2163,
"Year": 1994,
"Month": 12,
"Country": "DEU"
},
{
"tas": 0.61905,
"pr": 91.0824,
"Year": 1995,
"Month": 1,
"Country": "DEU"
},
{
"tas": 5.09206,
"pr": 64.3742,
"Year": 1995,
"Month": 2,
"Country": "DEU"
},
{
"tas": 3.92955,
"pr": 70.8116,
"Year": 1995,
"Month": 3,
"Country": "DEU"
},
{
"tas": 8.68313,
"pr": 48.7567,
"Year": 1995,
"Month": 4,
"Country": "DEU"
},
{
"tas": 12.463,
"pr": 72.9682,
"Year": 1995,
"Month": 5,
"Country": "DEU"
},
{
"tas": 14.738,
"pr": 82.4929,
"Year": 1995,
"Month": 6,
"Country": "DEU"
},
{
"tas": 20.5315,
"pr": 68.1534,
"Year": 1995,
"Month": 7,
"Country": "DEU"
},
{
"tas": 18.777,
"pr": 77.0093,
"Year": 1995,
"Month": 8,
"Country": "DEU"
},
{
"tas": 13.2353,
"pr": 80.871,
"Year": 1995,
"Month": 9,
"Country": "DEU"
},
{
"tas": 12.3742,
"pr": 22.3478,
"Year": 1995,
"Month": 10,
"Country": "DEU"
},
{
"tas": 3.49484,
"pr": 47.4954,
"Year": 1995,
"Month": 11,
"Country": "DEU"
},
{
"tas": -1.3791,
"pr": 41.4347,
"Year": 1995,
"Month": 12,
"Country": "DEU"
},
{
"tas": -2.4147,
"pr": 5.06111,
"Year": 1996,
"Month": 1,
"Country": "DEU"
},
{
"tas": -1.6982,
"pr": 39.339,
"Year": 1996,
"Month": 2,
"Country": "DEU"
},
{
"tas": 1.25059,
"pr": 20.3115,
"Year": 1996,
"Month": 3,
"Country": "DEU"
},
{
"tas": 8.87259,
"pr": 21.9546,
"Year": 1996,
"Month": 4,
"Country": "DEU"
},
{
"tas": 11.1675,
"pr": 85.928,
"Year": 1996,
"Month": 5,
"Country": "DEU"
},
{
"tas": 15.6968,
"pr": 53.6882,
"Year": 1996,
"Month": 6,
"Country": "DEU"
},
{
"tas": 16.3067,
"pr": 78.5637,
"Year": 1996,
"Month": 7,
"Country": "DEU"
},
{
"tas": 17.5761,
"pr": 80.0962,
"Year": 1996,
"Month": 8,
"Country": "DEU"
},
{
"tas": 11.545,
"pr": 41.5761,
"Year": 1996,
"Month": 9,
"Country": "DEU"
},
{
"tas": 9.54582,
"pr": 69.0624,
"Year": 1996,
"Month": 10,
"Country": "DEU"
},
{
"tas": 4.81919,
"pr": 70.8388,
"Year": 1996,
"Month": 11,
"Country": "DEU"
},
{
"tas": -1.8692,
"pr": 35.0766,
"Year": 1996,
"Month": 12,
"Country": "DEU"
},
{
"tas": -2.4516,
"pr": 9.77542,
"Year": 1997,
"Month": 1,
"Country": "DEU"
},
{
"tas": 4.24402,
"pr": 67.7766,
"Year": 1997,
"Month": 2,
"Country": "DEU"
},
{
"tas": 6.60172,
"pr": 42.6296,
"Year": 1997,
"Month": 3,
"Country": "DEU"
},
{
"tas": 6.77604,
"pr": 41.2524,
"Year": 1997,
"Month": 4,
"Country": "DEU"
},
{
"tas": 12.7521,
"pr": 61.0386,
"Year": 1997,
"Month": 5,
"Country": "DEU"
},
{
"tas": 16.1819,
"pr": 87.0538,
"Year": 1997,
"Month": 6,
"Country": "DEU"
},
{
"tas": 17.5787,
"pr": 99.3591,
"Year": 1997,
"Month": 7,
"Country": "DEU"
},
{
"tas": 20.3683,
"pr": 45.054,
"Year": 1997,
"Month": 8,
"Country": "DEU"
},
{
"tas": 14.7543,
"pr": 28.2634,
"Year": 1997,
"Month": 9,
"Country": "DEU"
},
{
"tas": 8.28178,
"pr": 54.6171,
"Year": 1997,
"Month": 10,
"Country": "DEU"
},
{
"tas": 4.3859,
"pr": 37.353,
"Year": 1997,
"Month": 11,
"Country": "DEU"
},
{
"tas": 2.20162,
"pr": 66.4385,
"Year": 1997,
"Month": 12,
"Country": "DEU"
},
{
"tas": 2.82266,
"pr": 52.7454,
"Year": 1998,
"Month": 1,
"Country": "DEU"
},
{
"tas": 5.13231,
"pr": 20.2031,
"Year": 1998,
"Month": 2,
"Country": "DEU"
},
{
"tas": 5.72051,
"pr": 56.9272,
"Year": 1998,
"Month": 3,
"Country": "DEU"
},
{
"tas": 9.16443,
"pr": 71.2588,
"Year": 1998,
"Month": 4,
"Country": "DEU"
},
{
"tas": 14.4651,
"pr": 41.5037,
"Year": 1998,
"Month": 5,
"Country": "DEU"
},
{
"tas": 16.6004,
"pr": 92.8293,
"Year": 1998,
"Month": 6,
"Country": "DEU"
},
{
"tas": 16.635,
"pr": 75.8758,
"Year": 1998,
"Month": 7,
"Country": "DEU"
},
{
"tas": 17.2254,
"pr": 60.9335,
"Year": 1998,
"Month": 8,
"Country": "DEU"
},
{
"tas": 14.0119,
"pr": 93.2512,
"Year": 1998,
"Month": 9,
"Country": "DEU"
},
{
"tas": 9.09046,
"pr": 133.019,
"Year": 1998,
"Month": 10,
"Country": "DEU"
},
{
"tas": 1.87924,
"pr": 59.9116,
"Year": 1998,
"Month": 11,
"Country": "DEU"
},
{
"tas": 1.39982,
"pr": 44.2121,
"Year": 1998,
"Month": 12,
"Country": "DEU"
},
{
"tas": 2.69926,
"pr": 55.5056,
"Year": 1999,
"Month": 1,
"Country": "DEU"
},
{
"tas": 0.97467,
"pr": 61.2978,
"Year": 1999,
"Month": 2,
"Country": "DEU"
},
{
"tas": 5.81345,
"pr": 56.5648,
"Year": 1999,
"Month": 3,
"Country": "DEU"
},
{
"tas": 9.25519,
"pr": 54.7828,
"Year": 1999,
"Month": 4,
"Country": "DEU"
},
{
"tas": 13.8266,
"pr": 72.3148,
"Year": 1999,
"Month": 5,
"Country": "DEU"
},
{
"tas": 15.6576,
"pr": 76.2048,
"Year": 1999,
"Month": 6,
"Country": "DEU"
},
{
"tas": 19.4417,
"pr": 69.579,
"Year": 1999,
"Month": 7,
"Country": "DEU"
},
{
"tas": 17.6383,
"pr": 71.6999,
"Year": 1999,
"Month": 8,
"Country": "DEU"
},
{
"tas": 17.3007,
"pr": 50.0867,
"Year": 1999,
"Month": 9,
"Country": "DEU"
},
{
"tas": 9.41301,
"pr": 40.8223,
"Year": 1999,
"Month": 10,
"Country": "DEU"
},
{
"tas": 3.96911,
"pr": 46.2156,
"Year": 1999,
"Month": 11,
"Country": "DEU"
},
{
"tas": 2.21168,
"pr": 100.523,
"Year": 1999,
"Month": 12,
"Country": "DEU"
},
{
"tas": 1.10166,
"pr": 44.092,
"Year": 2000,
"Month": 1,
"Country": "DEU"
},
{
"tas": 3.99163,
"pr": 67.5469,
"Year": 2000,
"Month": 2,
"Country": "DEU"
},
{
"tas": 5.89024,
"pr": 79.2073,
"Year": 2000,
"Month": 3,
"Country": "DEU"
},
{
"tas": 10.5356,
"pr": 37.8503,
"Year": 2000,
"Month": 4,
"Country": "DEU"
},
{
"tas": 14.8181,
"pr": 64.3155,
"Year": 2000,
"Month": 5,
"Country": "DEU"
},
{
"tas": 17.2848,
"pr": 54.1672,
"Year": 2000,
"Month": 6,
"Country": "DEU"
},
{
"tas": 15.6626,
"pr": 100.574,
"Year": 2000,
"Month": 7,
"Country": "DEU"
},
{
"tas": 18.0981,
"pr": 67.8183,
"Year": 2000,
"Month": 8,
"Country": "DEU"
},
{
"tas": 14.6411,
"pr": 72.8817,
"Year": 2000,
"Month": 9,
"Country": "DEU"
},
{
"tas": 11.1252,
"pr": 56.0824,
"Year": 2000,
"Month": 10,
"Country": "DEU"
},
{
"tas": 6.6194,
"pr": 51.0663,
"Year": 2000,
"Month": 11,
"Country": "DEU"
},
{
"tas": 3.60372,
"pr": 42.39,
"Year": 2000,
"Month": 12,
"Country": "DEU"
},
{
"tas": 0.89059,
"pr": 50.6998,
"Year": 2001,
"Month": 1,
"Country": "DEU"
},
{
"tas": 2.38944,
"pr": 46.7744,
"Year": 2001,
"Month": 2,
"Country": "DEU"
},
{
"tas": 4.8538,
"pr": 91.2438,
"Year": 2001,
"Month": 3,
"Country": "DEU"
},
{
"tas": 7.76703,
"pr": 68.0754,
"Year": 2001,
"Month": 4,
"Country": "DEU"
},
{
"tas": 14.6977,
"pr": 40.9013,
"Year": 2001,
"Month": 5,
"Country": "DEU"
},
{
"tas": 14.3756,
"pr": 83.3405,
"Year": 2001,
"Month": 6,
"Country": "DEU"
},
{
"tas": 18.9581,
"pr": 71.4917,
"Year": 2001,
"Month": 7,
"Country": "DEU"
},
{
"tas": 18.999,
"pr": 66.1603,
"Year": 2001,
"Month": 8,
"Country": "DEU"
},
{
"tas": 12.1513,
"pr": 109.926,
"Year": 2001,
"Month": 9,
"Country": "DEU"
},
{
"tas": 13.0826,
"pr": 43.9049,
"Year": 2001,
"Month": 10,
"Country": "DEU"
},
{
"tas": 3.99286,
"pr": 70.6187,
"Year": 2001,
"Month": 11,
"Country": "DEU"
},
{
"tas": 0.03294,
"pr": 59.702,
"Year": 2001,
"Month": 12,
"Country": "DEU"
},
{
"tas": 1.72286,
"pr": 38.9526,
"Year": 2002,
"Month": 1,
"Country": "DEU"
},
{
"tas": 5.11861,
"pr": 87.347,
"Year": 2002,
"Month": 2,
"Country": "DEU"
},
{
"tas": 6.29248,
"pr": 53.8361,
"Year": 2002,
"Month": 3,
"Country": "DEU"
},
{
"tas": 8.6084,
"pr": 47.6672,
"Year": 2002,
"Month": 4,
"Country": "DEU"
},
{
"tas": 14.1608,
"pr": 76.3439,
"Year": 2002,
"Month": 5,
"Country": "DEU"
},
{
"tas": 17.6556,
"pr": 77.6167,
"Year": 2002,
"Month": 6,
"Country": "DEU"
},
{
"tas": 17.8886,
"pr": 106.106,
"Year": 2002,
"Month": 7,
"Country": "DEU"
},
{
"tas": 19.1396,
"pr": 105.818,
"Year": 2002,
"Month": 8,
"Country": "DEU"
},
{
"tas": 13.9748,
"pr": 52.9667,
"Year": 2002,
"Month": 9,
"Country": "DEU"
},
{
"tas": 8.47446,
"pr": 92.5462,
"Year": 2002,
"Month": 10,
"Country": "DEU"
},
{
"tas": 5.67982,
"pr": 99.9315,
"Year": 2002,
"Month": 11,
"Country": "DEU"
},
{
"tas": 0.62591,
"pr": 55.7503,
"Year": 2002,
"Month": 12,
"Country": "DEU"
},
{
"tas": -0.3015,
"pr": 63.7665,
"Year": 2003,
"Month": 1,
"Country": "DEU"
},
{
"tas": -1.1177,
"pr": 15.8144,
"Year": 2003,
"Month": 2,
"Country": "DEU"
},
{
"tas": 6.23304,
"pr": 23.5679,
"Year": 2003,
"Month": 3,
"Country": "DEU"
},
{
"tas": 8.76123,
"pr": 37.245,
"Year": 2003,
"Month": 4,
"Country": "DEU"
},
{
"tas": 14.5392,
"pr": 62.2271,
"Year": 2003,
"Month": 5,
"Country": "DEU"
},
{
"tas": 21.1638,
"pr": 62.4402,
"Year": 2003,
"Month": 6,
"Country": "DEU"
},
{
"tas": 19.2681,
"pr": 64.5237,
"Year": 2003,
"Month": 7,
"Country": "DEU"
},
{
"tas": 20.5164,
"pr": 31.8198,
"Year": 2003,
"Month": 8,
"Country": "DEU"
},
{
"tas": 14.5772,
"pr": 44.441,
"Year": 2003,
"Month": 9,
"Country": "DEU"
},
{
"tas": 6.48696,
"pr": 67.1054,
"Year": 2003,
"Month": 10,
"Country": "DEU"
},
{
"tas": 6.55806,
"pr": 38.5592,
"Year": 2003,
"Month": 11,
"Country": "DEU"
},
{
"tas": 2.03682,
"pr": 49.8697,
"Year": 2003,
"Month": 12,
"Country": "DEU"
},
{
"tas": -0.2687,
"pr": 85.931,
"Year": 2004,
"Month": 1,
"Country": "DEU"
},
{
"tas": 2.94233,
"pr": 41.7314,
"Year": 2004,
"Month": 2,
"Country": "DEU"
},
{
"tas": 4.98955,
"pr": 33.4883,
"Year": 2004,
"Month": 3,
"Country": "DEU"
},
{
"tas": 9.63575,
"pr": 35.8689,
"Year": 2004,
"Month": 4,
"Country": "DEU"
},
{
"tas": 11.702,
"pr": 66.5542,
"Year": 2004,
"Month": 5,
"Country": "DEU"
},
{
"tas": 15.3397,
"pr": 69.2817,
"Year": 2004,
"Month": 6,
"Country": "DEU"
},
{
"tas": 16.9063,
"pr": 97.6616,
"Year": 2004,
"Month": 7,
"Country": "DEU"
},
{
"tas": 19.0342,
"pr": 79.8017,
"Year": 2004,
"Month": 8,
"Country": "DEU"
},
{
"tas": 14.83,
"pr": 53.9349,
"Year": 2004,
"Month": 9,
"Country": "DEU"
},
{
"tas": 10.558,
"pr": 55.874,
"Year": 2004,
"Month": 10,
"Country": "DEU"
},
{
"tas": 4.38984,
"pr": 60.5306,
"Year": 2004,
"Month": 11,
"Country": "DEU"
},
{
"tas": 1.63245,
"pr": 38.9667,
"Year": 2004,
"Month": 12,
"Country": "DEU"
},
{
"tas": 2.34062,
"pr": 55.06,
"Year": 2005,
"Month": 1,
"Country": "DEU"
},
{
"tas": -0.8422,
"pr": 50.057,
"Year": 2005,
"Month": 2,
"Country": "DEU"
},
{
"tas": 4.03267,
"pr": 39.6769,
"Year": 2005,
"Month": 3,
"Country": "DEU"
},
{
"tas": 9.63464,
"pr": 49.4604,
"Year": 2005,
"Month": 4,
"Country": "DEU"
},
{
"tas": 13.2912,
"pr": 72.7666,
"Year": 2005,
"Month": 5,
"Country": "DEU"
},
{
"tas": 16.7495,
"pr": 53.768,
"Year": 2005,
"Month": 6,
"Country": "DEU"
},
{
"tas": 18.4984,
"pr": 106.233,
"Year": 2005,
"Month": 7,
"Country": "DEU"
},
{
"tas": 16.3473,
"pr": 83.3377,
"Year": 2005,
"Month": 8,
"Country": "DEU"
},
{
"tas": 15.886,
"pr": 48.2196,
"Year": 2005,
"Month": 9,
"Country": "DEU"
},
{
"tas": 11.5191,
"pr": 40.4804,
"Year": 2005,
"Month": 10,
"Country": "DEU"
},
{
"tas": 4.58487,
"pr": 41.7426,
"Year": 2005,
"Month": 11,
"Country": "DEU"
},
{
"tas": 0.84104,
"pr": 54.3627,
"Year": 2005,
"Month": 12,
"Country": "DEU"
},
{
"tas": -2.4452,
"pr": 22.4426,
"Year": 2006,
"Month": 1,
"Country": "DEU"
},
{
"tas": -0.1966,
"pr": 40.7821,
"Year": 2006,
"Month": 2,
"Country": "DEU"
},
{
"tas": 1.91574,
"pr": 67.5632,
"Year": 2006,
"Month": 3,
"Country": "DEU"
},
{
"tas": 8.39488,
"pr": 60.6753,
"Year": 2006,
"Month": 4,
"Country": "DEU"
},
{
"tas": 13.2609,
"pr": 83.4328,
"Year": 2006,
"Month": 5,
"Country": "DEU"
},
{
"tas": 17.2826,
"pr": 47.1597,
"Year": 2006,
"Month": 6,
"Country": "DEU"
},
{
"tas": 22.4364,
"pr": 49.4638,
"Year": 2006,
"Month": 7,
"Country": "DEU"
},
{
"tas": 16.1507,
"pr": 123.717,
"Year": 2006,
"Month": 8,
"Country": "DEU"
},
{
"tas": 17.3996,
"pr": 34.7254,
"Year": 2006,
"Month": 9,
"Country": "DEU"
},
{
"tas": 12.8346,
"pr": 58.2976,
"Year": 2006,
"Month": 10,
"Country": "DEU"
},
{
"tas": 7.67349,
"pr": 50.4835,
"Year": 2006,
"Month": 11,
"Country": "DEU"
},
{
"tas": 4.89768,
"pr": 45.4769,
"Year": 2006,
"Month": 12,
"Country": "DEU"
},
{
"tas": 4.56182,
"pr": 81.3176,
"Year": 2007,
"Month": 1,
"Country": "DEU"
},
{
"tas": 3.92031,
"pr": 62.358,
"Year": 2007,
"Month": 2,
"Country": "DEU"
},
{
"tas": 6.6104,
"pr": 58.5623,
"Year": 2007,
"Month": 3,
"Country": "DEU"
},
{
"tas": 13.6544,
"pr": 6.57799,
"Year": 2007,
"Month": 4,
"Country": "DEU"
},
{
"tas": 14.6649,
"pr": 115.284,
"Year": 2007,
"Month": 5,
"Country": "DEU"
},
{
"tas": 17.8249,
"pr": 103.776,
"Year": 2007,
"Month": 6,
"Country": "DEU"
},
{
"tas": 17.7532,
"pr": 115.144,
"Year": 2007,
"Month": 7,
"Country": "DEU"
},
{
"tas": 17.5315,
"pr": 89.7247,
"Year": 2007,
"Month": 8,
"Country": "DEU"
},
{
"tas": 13.1496,
"pr": 82.3765,
"Year": 2007,
"Month": 9,
"Country": "DEU"
},
{
"tas": 9.00071,
"pr": 25.2434,
"Year": 2007,
"Month": 10,
"Country": "DEU"
},
{
"tas": 3.96132,
"pr": 73.1414,
"Year": 2007,
"Month": 11,
"Country": "DEU"
},
{
"tas": 2.01925,
"pr": 54.477,
"Year": 2007,
"Month": 12,
"Country": "DEU"
},
{
"tas": 3.59217,
"pr": 63.6126,
"Year": 2008,
"Month": 1,
"Country": "DEU"
},
{
"tas": 4.4175,
"pr": 35.3325,
"Year": 2008,
"Month": 2,
"Country": "DEU"
},
{
"tas": 5.05507,
"pr": 71.4798,
"Year": 2008,
"Month": 3,
"Country": "DEU"
},
{
"tas": 8.42583,
"pr": 72.6018,
"Year": 2008,
"Month": 4,
"Country": "DEU"
},
{
"tas": 14.7832,
"pr": 32.9395,
"Year": 2008,
"Month": 5,
"Country": "DEU"
},
{
"tas": 17.438,
"pr": 59.4989,
"Year": 2008,
"Month": 6,
"Country": "DEU"
},
{
"tas": 18.5435,
"pr": 84.7327,
"Year": 2008,
"Month": 7,
"Country": "DEU"
},
{
"tas": 18.0275,
"pr": 80.6313,
"Year": 2008,
"Month": 8,
"Country": "DEU"
},
{
"tas": 13.0731,
"pr": 52.6422,
"Year": 2008,
"Month": 9,
"Country": "DEU"
},
{
"tas": 9.55051,
"pr": 73.5813,
"Year": 2008,
"Month": 10,
"Country": "DEU"
},
{
"tas": 5.33844,
"pr": 40.2931,
"Year": 2008,
"Month": 11,
"Country": "DEU"
},
{
"tas": 1.45098,
"pr": 40.4567,
"Year": 2008,
"Month": 12,
"Country": "DEU"
},
{
"tas": -1.3156,
"pr": 28.7774,
"Year": 2009,
"Month": 1,
"Country": "DEU"
},
{
"tas": 1.2332,
"pr": 50.7175,
"Year": 2009,
"Month": 2,
"Country": "DEU"
},
{
"tas": 4.66648,
"pr": 67.9714,
"Year": 2009,
"Month": 3,
"Country": "DEU"
},
{
"tas": 12.1542,
"pr": 26.8949,
"Year": 2009,
"Month": 4,
"Country": "DEU"
},
{
"tas": 14.257,
"pr": 74.5626,
"Year": 2009,
"Month": 5,
"Country": "DEU"
},
{
"tas": 15.0555,
"pr": 80.491,
"Year": 2009,
"Month": 6,
"Country": "DEU"
},
{
"tas": 18.6342,
"pr": 103.596,
"Year": 2009,
"Month": 7,
"Country": "DEU"
},
{
"tas": 19.2937,
"pr": 39.4341,
"Year": 2009,
"Month": 8,
"Country": "DEU"
},
{
"tas": 15.3057,
"pr": 39.5038,
"Year": 2009,
"Month": 9,
"Country": "DEU"
},
{
"tas": 8.46731,
"pr": 67.8487,
"Year": 2009,
"Month": 10,
"Country": "DEU"
},
{
"tas": 7.72052,
"pr": 86.7025,
"Year": 2009,
"Month": 11,
"Country": "DEU"
},
{
"tas": 0.55775,
"pr": 76.1358,
"Year": 2009,
"Month": 12,
"Country": "DEU"
},
{
"tas": -3.3708,
"pr": 39.5115,
"Year": 2010,
"Month": 1,
"Country": "DEU"
},
{
"tas": -0.3027,
"pr": 37.6736,
"Year": 2010,
"Month": 2,
"Country": "DEU"
},
{
"tas": 5.03831,
"pr": 44.8773,
"Year": 2010,
"Month": 3,
"Country": "DEU"
},
{
"tas": 9.59405,
"pr": 20.3981,
"Year": 2010,
"Month": 4,
"Country": "DEU"
},
{
"tas": 10.6384,
"pr": 95.0348,
"Year": 2010,
"Month": 5,
"Country": "DEU"
},
{
"tas": 16.6143,
"pr": 50.8322,
"Year": 2010,
"Month": 6,
"Country": "DEU"
},
{
"tas": 20.7858,
"pr": 73.4326,
"Year": 2010,
"Month": 7,
"Country": "DEU"
},
{
"tas": 17.3692,
"pr": 136.19,
"Year": 2010,
"Month": 8,
"Country": "DEU"
},
{
"tas": 13.2074,
"pr": 74.7062,
"Year": 2010,
"Month": 9,
"Country": "DEU"
},
{
"tas": 8.75287,
"pr": 34.3648,
"Year": 2010,
"Month": 10,
"Country": "DEU"
},
{
"tas": 5.04202,
"pr": 89.2769,
"Year": 2010,
"Month": 11,
"Country": "DEU"
},
{
"tas": -3.5006,
"pr": 73.8844,
"Year": 2010,
"Month": 12,
"Country": "DEU"
},
{
"tas": 1.35231,
"pr": 51.1855,
"Year": 2011,
"Month": 1,
"Country": "DEU"
},
{
"tas": 1.60671,
"pr": 27.3347,
"Year": 2011,
"Month": 2,
"Country": "DEU"
},
{
"tas": 5.8362,
"pr": 21.1754,
"Year": 2011,
"Month": 3,
"Country": "DEU"
},
{
"tas": 12.5957,
"pr": 24.7262,
"Year": 2011,
"Month": 4,
"Country": "DEU"
},
{
"tas": 14.2415,
"pr": 44.3132,
"Year": 2011,
"Month": 5,
"Country": "DEU"
},
{
"tas": 17.0922,
"pr": 83.8983,
"Year": 2011,
"Month": 6,
"Country": "DEU"
},
{
"tas": 16.6627,
"pr": 108.469,
"Year": 2011,
"Month": 7,
"Country": "DEU"
},
{
"tas": 18.1734,
"pr": 95.6143,
"Year": 2011,
"Month": 8,
"Country": "DEU"
},
{
"tas": 15.9234,
"pr": 53.4169,
"Year": 2011,
"Month": 9,
"Country": "DEU"
},
{
"tas": 10.1426,
"pr": 51.0425,
"Year": 2011,
"Month": 10,
"Country": "DEU"
},
{
"tas": 5.37125,
"pr": 2.7941,
"Year": 2011,
"Month": 11,
"Country": "DEU"
},
{
"tas": 3.72956,
"pr": 101.956,
"Year": 2011,
"Month": 12,
"Country": "DEU"
},
{
"tas": 2.13293,
"pr": 88.0822,
"Year": 2012,
"Month": 1,
"Country": "DEU"
},
{
"tas": -1.8876,
"pr": 20.9347,
"Year": 2012,
"Month": 2,
"Country": "DEU"
},
{
"tas": 7.50886,
"pr": 13.5742,
"Year": 2012,
"Month": 3,
"Country": "DEU"
},
{
"tas": 8.57598,
"pr": 38.5149,
"Year": 2012,
"Month": 4,
"Country": "DEU"
},
{
"tas": 14.4504,
"pr": 52.047,
"Year": 2012,
"Month": 5,
"Country": "DEU"
},
{
"tas": 16.0043,
"pr": 92.4244,
"Year": 2012,
"Month": 6,
"Country": "DEU"
},
{
"tas": 17.7196,
"pr": 94.8567,
"Year": 2012,
"Month": 7,
"Country": "DEU"
},
{
"tas": 19.2147,
"pr": 60.1739,
"Year": 2012,
"Month": 8,
"Country": "DEU"
},
{
"tas": 14.5496,
"pr": 46.0336,
"Year": 2012,
"Month": 9,
"Country": "DEU"
},
{
"tas": 9.30774,
"pr": 58.0037,
"Year": 2012,
"Month": 10,
"Country": "DEU"
},
{
"tas": 5.63998,
"pr": 56.2354,
"Year": 2012,
"Month": 11,
"Country": "DEU"
},
{
"tas": 1.46997,
"pr": 81.2424,
"Year": 2012,
"Month": 12,
"Country": "DEU"
},
{
"tas": 0.00579,
"pr": 55.1809,
"Year": 2013,
"Month": 1,
"Country": "DEU"
},
{
"tas": -0.237,
"pr": 43.6728,
"Year": 2013,
"Month": 2,
"Country": "DEU"
},
{
"tas": 0.88513,
"pr": 33.7977,
"Year": 2013,
"Month": 3,
"Country": "DEU"
},
{
"tas": 8.55046,
"pr": 37.7052,
"Year": 2013,
"Month": 4,
"Country": "DEU"
},
{
"tas": 12.2922,
"pr": 122.217,
"Year": 2013,
"Month": 5,
"Country": "DEU"
},
{
"tas": 15.9368,
"pr": 82.9789,
"Year": 2013,
"Month": 6,
"Country": "DEU"
},
{
"tas": 20.0602,
"pr": 40.1874,
"Year": 2013,
"Month": 7,
"Country": "DEU"
},
{
"tas": 18.7139,
"pr": 54.785,
"Year": 2013,
"Month": 8,
"Country": "DEU"
},
{
"tas": 13.7294,
"pr": 76.1078,
"Year": 2013,
"Month": 9,
"Country": "DEU"
},
{
"tas": 11.2751,
"pr": 73.7149,
"Year": 2013,
"Month": 10,
"Country": "DEU"
},
{
"tas": 4.78426,
"pr": 64.2731,
"Year": 2013,
"Month": 11,
"Country": "DEU"
},
{
"tas": 4.1685,
"pr": 41.792,
"Year": 2013,
"Month": 12,
"Country": "DEU"
},
{
"tas": 2.03831,
"pr": 42.6164,
"Year": 2014,
"Month": 1,
"Country": "DEU"
},
{
"tas": 5.06797,
"pr": 28.7792,
"Year": 2014,
"Month": 2,
"Country": "DEU"
},
{
"tas": 7.52772,
"pr": 18.8273,
"Year": 2014,
"Month": 3,
"Country": "DEU"
},
{
"tas": 11.5564,
"pr": 43.9076,
"Year": 2014,
"Month": 4,
"Country": "DEU"
},
{
"tas": 12.9111,
"pr": 88.0255,
"Year": 2014,
"Month": 5,
"Country": "DEU"
},
{
"tas": 16.47,
"pr": 48.4147,
"Year": 2014,
"Month": 6,
"Country": "DEU"
},
{
"tas": 19.8133,
"pr": 120.147,
"Year": 2014,
"Month": 7,
"Country": "DEU"
},
{
"tas": 16.5899,
"pr": 99.7195,
"Year": 2014,
"Month": 8,
"Country": "DEU"
},
{
"tas": 15.638,
"pr": 53.2429,
"Year": 2014,
"Month": 9,
"Country": "DEU"
},
{
"tas": 12.4821,
"pr": 63.5888,
"Year": 2014,
"Month": 10,
"Country": "DEU"
},
{
"tas": 6.91944,
"pr": 32.9145,
"Year": 2014,
"Month": 11,
"Country": "DEU"
},
{
"tas": 2.52786,
"pr": 68.9631,
"Year": 2014,
"Month": 12,
"Country": "DEU"
},
{
"tas": 1.85438,
"pr": 75.7349,
"Year": 2015,
"Month": 1,
"Country": "DEU"
},
{
"tas": 1.17579,
"pr": 20.1867,
"Year": 2015,
"Month": 2,
"Country": "DEU"
},
{
"tas": 5.51212,
"pr": 47.4465,
"Year": 2015,
"Month": 3,
"Country": "DEU"
},
{
"tas": 8.91448,
"pr": 37.8357,
"Year": 2015,
"Month": 4,
"Country": "DEU"
},
{
"tas": 12.656,
"pr": 47.1501,
"Year": 2015,
"Month": 5,
"Country": "DEU"
},
{
"tas": 16.0824,
"pr": 60.7635,
"Year": 2015,
"Month": 6,
"Country": "DEU"
},
{
"tas": 19.7579,
"pr": 62.7657,
"Year": 2015,
"Month": 7,
"Country": "DEU"
},
{
"tas": 20.25,
"pr": 73.0452,
"Year": 2015,
"Month": 8,
"Country": "DEU"
},
{
"tas": 13.5006,
"pr": 53.1218,
"Year": 2015,
"Month": 9,
"Country": "DEU"
},
{
"tas": 8.80112,
"pr": 46.8903,
"Year": 2015,
"Month": 10,
"Country": "DEU"
},
{
"tas": 7.84024,
"pr": 86.4119,
"Year": 2015,
"Month": 11,
"Country": "DEU"
},
{
"tas": 6.64561,
"pr": 33.58,
"Year": 2015,
"Month": 12,
"Country": "DEU"
}
];
.line {
fill: none;
stroke-width: 2px;
}
/* TASK: Add a CSS rule which adds a red color to the temperature line */
/* TASK: Add a CSS rule which adds a blue color to the rain line */
.line {
fill: none;
stroke-width: 2px;
}
/* TASK: Add a CSS rule which adds a red color to the temperature line */
/* TASK: Add a CSS rule which adds a blue color to the rain line */
<!DOCTYPE html>
<html>
<head>
<title>Line-Chart</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Average Rain and Temperature in Germany from 1991 to 2015</h1>
<!-- TASK: Add a div container and assign an identifier to it, such that you
can access it via JavaScript -->
<div id="line_chart">
<svg style="width: 800px; height: 800px;"></svg>
</div>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
// Hint: use the document.createElementNS function when creating svg-related elements and pass this namespace variable as the first paramter (see line 29 for an example)
var svgNamespace = "http://www.w3.org/2000/svg";
/*
TASK: Retrieve the node of the div element declared within the index.html
by its identifier and save it to a variable that we will use later
*/
var container = document.getElementById("line_chart");
// Specify margins such that the visualization is clearly visible and no elements are invisible due to the svg border
var margins = {
top: 20,
right: 20,
bottom: 20,
left: 20
};
// Specify the width and height of the svg as well as the width height of the viewport of the visualization.
var width = 800;
var height = 800;
var visWidth = width - margins.left - margins.right;
var visHeight = height - margins.top - margins.bottom;
/*
TASK: Create an svg element, set its width and height in pixels (via the
'element.style' attribute), and add it to the vis-container. Save the svg
element in a variable called 'svg'
*/
var svg = document.createElementNS(svgNamespace, "svg");
svg.style.width = width + "px";
svg.style.height = height + "px";
container.appendChild(svg);
// We add a group element to the svg to set the margin by translating the group.
// All visual elements which are part of the line-chart need to be added to the group.
var visG = document.createElementNS(svgNamespace, "g");
visG.setAttribute("transform", "translate(" + margins.left + "," + margins.top + ")");
svg.appendChild(visG);
// Initialization of an array which will hold the respective coordinates on the screen
var transformedPoints = [];
var maxYear = getMaxFromArrayOfObjects("Year", data);
var minYear = getMinFromArrayOfObjects("Year", data);
var pixelsPerYear = visWidth / (maxYear - minYear + 1);
// Data Preparation: For each year we want the average rain and temperature
// We intialize an empty array 'avgData' which will hold the average values and the respective years
var avgData = [];
for(i = 0; i < (maxYear-minYear+1); i++) {
var yearlyData = data.slice(12*i, 12*i+12);
var dp = {
year: null,
temperature: 0,
rain: 0
};
for(var j = 0; j < yearlyData.length; j++) {
var monthDataPoint = yearlyData[j];
dp.year = monthDataPoint.Year;
dp.temperature += monthDataPoint.tas;
dp.rain += monthDataPoint.pr;
}
dp.temperature = dp.temperature / 12;
dp.rain = dp.rain / 12;
avgData.push(dp);
}
// Check the browser console to see how the data looks like
console.log("Dataset:", avgData);
// Calculate necessary statistics to transform datapoints to screen coordinates
var maxTemp = getMaxFromArrayOfObjects("temperature", avgData);
var minTemp = getMinFromArrayOfObjects("temperature", avgData);
var minRain = 0;
var maxRain = getMaxFromArrayOfObjects("rain", avgData);
/*
TASK: Transform the data points to their respective screen coordinates.
1. Use a loop to iterate through the 'avgData' array
2. For each element in the array, determine the X position and the Y positions for rain and temperature
3. Add the resulting transformed point to the 'transformedPoints' array
*/
/*
TASK: Add the points to the screen
1. Use a loop to iterate through the 'transformedPoints' array
2. For each element:
- Create two circle elements (one for rain and one temperature)
- Set their 'cx', 'cy', and 'r' attribute
- Add them to the visG group
*/
/*
TASK: Add lines to the visualization. Use polylines to connect the previously created points.
1. Create an element "polyline" for temperature and rain
2. Extract the data that is necessary (list of x,y coordinates) for the "points" attribute of the polyline
You can make use of JavaScripts Array.prototype.map() function to extract the coordinates as an array.
3. Add the polyline to visG group
*/
/* Helper function to retrieve important statistics */
function getMaxFromArrayOfObjects(attributeName, arrOfObjects) {
return Math.max.apply(Math, arrOfObjects.map(function(d) {
return d[attributeName];
}));
}
function getMinFromArrayOfObjects(attributeName, arrOfObjects) {
return Math.min.apply(Math, arrOfObjects.map(function(d) {
return d[attributeName];
}));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment