D3 Workshop: Part 3 - Conference Data

Built with blockbuilder.org

forked from ideaOwl's block: D3 Workshop: Part 3 - Conference Data

forked from zendre1's block: D3 Workshop: Part 3 - Conference Data

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

</svg>
  
  
  <script>

let svg = d3.select('svg');

let data = [
      {
        "Order ID": 110,
        "Paid at": "2017-09-16 14:26",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 111,
        "Paid at": "2017-09-16 16:58",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 112,
        "Paid at": "2017-10-22 20:18",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 113,
        "Paid at": "2017-11-01 11:23",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 114,
        "Paid at": "2017-11-03 9:10",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 115,
        "Paid at": "2017-12-02 23:37",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 116,
        "Paid at": "2017-12-05 20:37",
        "Area Code": 403,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 117,
        "Paid at": "2017-12-19 23:12",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 118,
        "Paid at": "2018-01-08 16:37",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 119,
        "Paid at": "2018-01-08 21:45",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 120,
        "Paid at": "2018-01-11 13:41",
        "Area Code": 403,
        "School Affiliation": "Other Post-Secondary",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 121,
        "Paid at": "2018-01-15 1:09",
        "Area Code": 705,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 122,
        "Paid at": "2018-01-15 19:13",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 123,
        "Paid at": "2018-01-16 8:03",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 124,
        "Paid at": "2018-01-18 8:35",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 125,
        "Paid at": "2018-01-22 17:31",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 126,
        "Paid at": "2018-01-22 18:53",
        "Area Code": 403,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 127,
        "Paid at": "2018-01-22 19:32",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 128,
        "Paid at": "2018-01-23 12:30",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 129,
        "Paid at": "2018-01-23 13:20",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 130,
        "Paid at": "2018-01-24 22:00",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 131,
        "Paid at": "2018-01-27 11:25",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 132,
        "Paid at": "2018-01-30 14:13",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 133,
        "Paid at": "2018-02-01 8:33",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 134,
        "Paid at": "2018-02-01 14:18",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 135,
        "Paid at": "2018-02-01 14:20",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 136,
        "Paid at": "2018-02-02 23:23",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 137,
        "Paid at": "2018-02-03 19:23",
        "Area Code": 403,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 138,
        "Paid at": "2018-02-03 23:25",
        "Area Code": 780,
        "School Affiliation": "High School",
        "Year of Study": "High School\r"
      },
      {
        "Order ID": 139,
        "Paid at": "2018-02-06 15:50",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 140,
        "Paid at": "2018-02-08 13:28",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 141,
        "Paid at": "2018-02-12 8:31",
        "Area Code": 587,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 142,
        "Paid at": "2018-02-15 17:10",
        "Area Code": 587,
        "School Affiliation": "High School",
        "Year of Study": "High School\r"
      },
      {
        "Order ID": 143,
        "Paid at": "2018-02-16 14:32",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 144,
        "Paid at": "2018-02-16 17:44",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 145,
        "Paid at": "2018-02-17 13:13",
        "Area Code": 343,
        "School Affiliation": "NAIT",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 146,
        "Paid at": "2018-02-21 12:55",
        "Area Code": 587,
        "School Affiliation": "Other Post-Secondary",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 147,
        "Paid at": "2018-02-21 16:52",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 148,
        "Paid at": "2018-02-21 17:21",
        "Area Code": 403,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 149,
        "Paid at": "2018-02-21 17:43",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 150,
        "Paid at": "2018-02-22 11:45",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 151,
        "Paid at": "2018-02-22 15:11",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 152,
        "Paid at": "2018-02-22 17:15",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 153,
        "Paid at": "2018-02-25 9:58",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 154,
        "Paid at": "2018-02-26 10:09",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 155,
        "Paid at": "2018-02-26 15:24",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 156,
        "Paid at": "2018-02-26 15:29",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 157,
        "Paid at": "2018-02-27 9:42",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 158,
        "Paid at": "2018-02-27 9:47",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 159,
        "Paid at": "2018-02-27 15:59",
        "Area Code": 604,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 160,
        "Paid at": "2018-02-27 16:16",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 161,
        "Paid at": "2018-02-27 16:49",
        "Area Code": 403,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 162,
        "Paid at": "2018-02-27 18:01",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 163,
        "Paid at": "2018-02-27 18:54",
        "Area Code": 587,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 164,
        "Paid at": "2018-02-27 21:33",
        "Area Code": 403,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 165,
        "Paid at": "2018-02-28 13:19",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 166,
        "Paid at": "2018-03-01 11:18",
        "Area Code": 555,
        "School Affiliation": "High School",
        "Year of Study": "High School\r"
      },
      {
        "Order ID": 167,
        "Paid at": "2018-03-01 11:20",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 168,
        "Paid at": "2018-03-01 11:22",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 169,
        "Paid at": "2018-03-01 11:23",
        "Area Code": 226,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 170,
        "Paid at": "2018-03-01 11:25",
        "Area Code": 403,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 171,
        "Paid at": "2018-03-01 11:26",
        "Area Code": 555,
        "School Affiliation": "High School",
        "Year of Study": "High School\r"
      },
      {
        "Order ID": 172,
        "Paid at": "2018-03-01 11:28",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 173,
        "Paid at": "2018-03-01 11:29",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 174,
        "Paid at": "2018-03-01 11:30",
        "Area Code": 555,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 175,
        "Paid at": "2018-03-01 11:31",
        "Area Code": 555,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 176,
        "Paid at": "2018-03-01 11:31",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 177,
        "Paid at": "2018-03-01 16:44",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 178,
        "Paid at": "2018-03-02 8:55",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 179,
        "Paid at": "2018-03-02 9:51",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 180,
        "Paid at": "2018-03-02 12:15",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 181,
        "Paid at": "2018-03-02 17:53",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 182,
        "Paid at": "2018-03-02 19:56",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 183,
        "Paid at": "2018-03-03 15:43",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 184,
        "Paid at": "2018-03-04 15:17",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 185,
        "Paid at": "2018-03-04 23:46",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 186,
        "Paid at": "2018-03-05 17:02",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 187,
        "Paid at": "2018-03-05 20:42",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 188,
        "Paid at": "2018-03-05 21:36",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 189,
        "Paid at": "2018-03-06 11:53",
        "Area Code": 587,
        "School Affiliation": "NAIT",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 190,
        "Paid at": "2018-03-06 12:58",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 191,
        "Paid at": "2018-03-06 16:46",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 192,
        "Paid at": "2018-03-06 18:47",
        "Area Code": 587,
        "School Affiliation": "High School",
        "Year of Study": "High School\r"
      },
      {
        "Order ID": 193,
        "Paid at": "2018-03-07 0:12",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 194,
        "Paid at": "2018-03-07 12:50",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 195,
        "Paid at": "2018-03-07 16:32",
        "Area Code": 780,
        "School Affiliation": "High School",
        "Year of Study": "High School\r"
      },
      {
        "Order ID": 196,
        "Paid at": "2018-03-07 17:40",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 197,
        "Paid at": "2018-03-07 22:29",
        "Area Code": 403,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 198,
        "Paid at": "2018-03-08 11:50",
        "Area Code": 403,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 199,
        "Paid at": "2018-03-08 14:17",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 200,
        "Paid at": "2018-03-08 21:18",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 201,
        "Paid at": "2018-03-08 21:34",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 202,
        "Paid at": "2018-03-09 12:05",
        "Area Code": 587,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 203,
        "Paid at": "2018-03-09 16:51",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 204,
        "Paid at": "2018-03-09 19:20",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 205,
        "Paid at": "2018-03-09 19:22",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 206,
        "Paid at": "2018-03-10 14:08",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 207,
        "Paid at": "2018-03-10 14:56",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 208,
        "Paid at": "2018-03-10 17:53",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 209,
        "Paid at": "2018-03-10 21:56",
        "Area Code": 587,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 210,
        "Paid at": "2018-03-12 10:54",
        "Area Code": 780,
        "School Affiliation": "High School",
        "Year of Study": "High School\r"
      },
      {
        "Order ID": 211,
        "Paid at": "2018-03-12 20:16",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 212,
        "Paid at": "2018-03-12 23:53",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 213,
        "Paid at": "2018-03-13 12:12",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 214,
        "Paid at": "2018-03-13 16:51",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 215,
        "Paid at": "2018-03-13 17:56",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 216,
        "Paid at": "2018-03-13 18:38",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 217,
        "Paid at": "2018-03-13 22:01",
        "Area Code": 780,
        "School Affiliation": "Other Post-Secondary",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 218,
        "Paid at": "2018-03-13 23:22",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 219,
        "Paid at": "2018-03-14 0:06",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 220,
        "Paid at": "2018-03-14 11:33",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 221,
        "Paid at": "2018-03-14 11:36",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 222,
        "Paid at": "2018-03-14 11:36",
        "Area Code": 780,
        "School Affiliation": "High School",
        "Year of Study": "High School\r"
      },
      {
        "Order ID": 223,
        "Paid at": "2018-03-14 11:43",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 224,
        "Paid at": "2018-03-14 11:50",
        "Area Code": 306,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 225,
        "Paid at": "2018-03-14 13:21",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 226,
        "Paid at": "2018-03-14 15:25",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 227,
        "Paid at": "2018-03-14 20:21",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 228,
        "Paid at": "2018-03-15 13:16",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 229,
        "Paid at": "2018-03-16 10:10",
        "Area Code": 250,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 230,
        "Paid at": "2018-03-16 12:17",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 231,
        "Paid at": "2018-03-16 19:10",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 232,
        "Paid at": "2018-03-16 22:53",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 233,
        "Paid at": "2018-03-17 0:23",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 234,
        "Paid at": "2018-03-17 9:45",
        "Area Code": 587,
        "School Affiliation": "NAIT",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 235,
        "Paid at": "2018-03-18 10:31",
        "Area Code": 204,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 236,
        "Paid at": "2018-03-18 13:47",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 237,
        "Paid at": "2018-03-18 14:14",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 238,
        "Paid at": "2018-03-18 17:10",
        "Area Code": 587,
        "School Affiliation": "High School",
        "Year of Study": "High School\r"
      },
      {
        "Order ID": 239,
        "Paid at": "2018-03-18 17:19",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 240,
        "Paid at": "2018-03-18 18:16",
        "Area Code": 780,
        "School Affiliation": "Other Post-Secondary",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 241,
        "Paid at": "2018-03-18 18:51",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 242,
        "Paid at": "2018-03-18 21:57",
        "Area Code": 403,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 243,
        "Paid at": "2018-03-18 23:35",
        "Area Code": 587,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 244,
        "Paid at": "2018-03-19 9:39",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 245,
        "Paid at": "2018-03-19 9:49",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 246,
        "Paid at": "2018-03-19 12:25",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 247,
        "Paid at": "2018-03-19 15:11",
        "Area Code": 587,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 248,
        "Paid at": "2018-03-19 18:29",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 249,
        "Paid at": "2018-03-19 19:30",
        "Area Code": 403,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 250,
        "Paid at": "2018-03-19 19:44",
        "Area Code": 587,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 251,
        "Paid at": "2018-03-20 11:11",
        "Area Code": 587,
        "School Affiliation": "Other Post-Secondary",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 252,
        "Paid at": "2018-03-20 11:36",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 253,
        "Paid at": "2018-03-20 12:17",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 254,
        "Paid at": "2018-03-20 13:10",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 255,
        "Paid at": "2018-03-20 13:12",
        "Area Code": 431,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 256,
        "Paid at": "2018-03-20 13:13",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 257,
        "Paid at": "2018-03-20 13:14",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 258,
        "Paid at": "2018-03-20 13:16",
        "Area Code": 306,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 259,
        "Paid at": "2018-03-20 13:20",
        "Area Code": 403,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 260,
        "Paid at": "2018-03-20 13:25",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 261,
        "Paid at": "2018-03-20 13:26",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 262,
        "Paid at": "2018-03-20 13:27",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 263,
        "Paid at": "2018-03-20 13:28",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 264,
        "Paid at": "2018-03-20 13:29",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 265,
        "Paid at": "2018-03-20 15:05",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 266,
        "Paid at": "2018-03-20 18:09",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 267,
        "Paid at": "2018-03-20 18:20",
        "Area Code": 905,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 268,
        "Paid at": "2018-03-20 20:17",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 269,
        "Paid at": "2018-03-20 20:19",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 270,
        "Paid at": "2018-03-20 20:58",
        "Area Code": 403,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 271,
        "Paid at": "2018-03-20 21:20",
        "Area Code": 250,
        "School Affiliation": "Other Post-Secondary",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 272,
        "Paid at": "2018-03-20 22:26",
        "Area Code": 306,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 273,
        "Paid at": "2018-03-20 22:36",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 274,
        "Paid at": "2018-03-20 22:41",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 275,
        "Paid at": "2018-03-20 22:55",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 276,
        "Paid at": "2018-03-21 8:48",
        "Area Code": 403,
        "School Affiliation": "Other Post-Secondary",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 277,
        "Paid at": "2018-03-21 9:13",
        "Area Code": 780,
        "School Affiliation": "Other Post-Secondary",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 279,
        "Paid at": "2018-03-21 11:06",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 280,
        "Paid at": "2018-03-21 12:10",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 281,
        "Paid at": "2018-03-21 12:28",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 282,
        "Paid at": "2018-03-21 13:58",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 283,
        "Paid at": "2018-03-21 13:59",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 284,
        "Paid at": "2018-03-21 14:01",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 285,
        "Paid at": "2018-03-21 14:04",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 286,
        "Paid at": "2018-03-21 14:15",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 287,
        "Paid at": "2018-03-21 14:17",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 288,
        "Paid at": "2018-03-21 16:34",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 289,
        "Paid at": "2018-03-21 17:57",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 290,
        "Paid at": "2018-03-21 20:16",
        "Area Code": 780,
        "School Affiliation": "Other Post-Secondary",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 291,
        "Paid at": "2018-03-21 21:20",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 292,
        "Paid at": "2018-03-21 22:52",
        "Area Code": 639,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 293,
        "Paid at": "2018-03-21 23:06",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 294,
        "Paid at": "2018-03-22 10:20",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 295,
        "Paid at": "2018-03-22 15:23",
        "Area Code": 905,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 296,
        "Paid at": "2018-03-22 17:51",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 297,
        "Paid at": "2018-03-22 17:55",
        "Area Code": 780,
        "School Affiliation": "High School",
        "Year of Study": "High School\r"
      },
      {
        "Order ID": 298,
        "Paid at": "2018-03-22 18:20",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 299,
        "Paid at": "2018-03-22 18:27",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 300,
        "Paid at": "2018-03-22 19:00",
        "Area Code": 587,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 301,
        "Paid at": "2018-03-22 22:00",
        "Area Code": 416,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 302,
        "Paid at": "2018-03-22 22:09",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 303,
        "Paid at": "2018-03-22 22:41",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 304,
        "Paid at": "2018-03-23 1:43",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 305,
        "Paid at": "2018-03-23 2:28",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 306,
        "Paid at": "2018-03-23 8:25",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 307,
        "Paid at": "2018-03-23 10:24",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 308,
        "Paid at": "2018-03-23 10:50",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 309,
        "Paid at": "2018-03-23 11:19",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Graduate Program\r"
      },
      {
        "Order ID": 310,
        "Paid at": "2018-03-23 11:45",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 311,
        "Paid at": "2018-03-23 12:30",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 312,
        "Paid at": "2018-03-23 12:42",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 313,
        "Paid at": "2018-03-23 13:19",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 314,
        "Paid at": "2018-03-23 13:25",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - Second Year\r"
      },
      {
        "Order ID": 315,
        "Paid at": "2018-03-23 14:13",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 316,
        "Paid at": "2018-03-23 14:18",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 317,
        "Paid at": "2018-03-23 14:58",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Third Year\r"
      },
      {
        "Order ID": 318,
        "Paid at": "2018-03-23 16:25",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 319,
        "Paid at": "2018-03-23 18:37",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 320,
        "Paid at": "2018-03-23 18:46",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 321,
        "Paid at": "2018-03-23 19:11",
        "Area Code": 780,
        "School Affiliation": "MacEwan University",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 322,
        "Paid at": "2018-03-23 20:18",
        "Area Code": 587,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - Fourth Year\r"
      },
      {
        "Order ID": 323,
        "Paid at": "2018-03-23 21:14",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - First Year\r"
      },
      {
        "Order ID": 324,
        "Paid at": "2018-03-23 22:48",
        "Area Code": 780,
        "School Affiliation": "NAIT",
        "Year of Study": "Other\r"
      },
      {
        "Order ID": 325,
        "Paid at": "2018-03-23 22:55",
        "Area Code": 780,
        "School Affiliation": "University of Alberta",
        "Year of Study": "Under Grad - First Year\r"
      }
    ];

// Start coding here

// e1.1
    let dataRects = svg.selectAll('.dataRects')
    .data(data);

let dataRectsEntered = dataRects
    .enter()
    .append('rect')
    .classed('dataRects', true)
    .attr('width', 20)
    .attr('height', 20)
    .attr('fill', 'white')
    .attr('x', 0)
    .attr('y', 0)

dataRects = dataRects.merge(dataRectsEntered);

dataRects
      .transition() 
      .duration(500)
      .attr('x', () => Math.floor((Math.random() * 380)))
      .attr('y', () => Math.floor((Math.random() * 280)))
      .attr('fill', d=>data[Math.floor(Math.random() * data.length)].color);

</script>

<p class="exercise">
    <hr/>
    <h3>Exercise:</h3>
  	<ul>
      
      <li>Part 1</li>
      <ol>
        <li>
          <label>
            <input type="checkbox" checked/>
            <span class="exercise">Already added: Using code from the previous session, remove all svg contents, code for everything except Part 3.3 to Part 3.5</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Note: this is the same code from before, we just loaded in data from the conference.  Look at the data</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Refresh the page and notice what happens</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Inspect the rectangle data in the developer tools</span>
          </label>
          <div class="notes">Hover over rect -> Right-click -> Inspect -> Properties tab -> rect -> __data</div>
          
        </li>
      </ol>

<li>Part 2</li>
      <ol>
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Change y to 80 instead of random, see what happens</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Instead of randomly spreading them, put them side by side in a line.  What happens?</span>
          </label>
          <div class="notes">Get the index of each element and use it on the x axis</div>
        </li>
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Change the widths of rectangles to 2</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Add a delay immediately after the transition</span>
          </label>
          <div class="notes">.delay((d,i)=>i*10)</div>
        </li>
      </ol>

<li>Part 3</li>
      <ol>
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Change the colors to reflect university affiliation</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Give them different y values based on affiliation</span>
          </label>
        </li>

<li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Add text for affiliation at the end</span>
          </label>
        </li>    
      </ol>

<li>Part 4</li>
      <ol>
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Using another transition and a delay, slide the 
            rects together (and the text) to form a bar chart</span>
          </label>
        </li> 
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Add the count to the text</span>
          </label>
        </li> 
        <li>
          <label>
            <input type="checkbox"/>
            <span class="exercise">Change affiliation to "Year of Study"</span>
          </label>
        </li>        
      </ol>        
  	</ul>
  </p>

https://d3js.org/d3.v4.min.js