Skip to content

Instantly share code, notes, and snippets.

@ammarasmro

ammarasmro/.block

Last active March 24, 2018 20:05
Show Gist options
  • Save ammarasmro/c7a2b1a6083294e6cb1fe4cfa667807b to your computer and use it in GitHub Desktop.
Save ammarasmro/c7a2b1a6083294e6cb1fe4cfa667807b to your computer and use it in GitHub Desktop.
Download ZIP
D3 Workshop: Part 3 - Conference Data
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="700px" height="300px">
</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', 1)
// .attr('height', 20)
// .attr('fill', 'white')
// .attr('x', 0)
// .attr('y', 0)
// dataRects = dataRects.merge(dataRectsEntered);
// dataRects
// .transition()
// .duration(500)
// .delay((d,i)=>i*10)
// .attr('x', (d,i) => {
// return i * 2;
// })
// .attr('y', 80)
// .attr('fill', d=>data[Math.floor(Math.random() * data.length)].color);
// e3.1
// let propertyToColor = "School Affiliation";
let propertyToColor = "Year of Study"; // e4.3
let uniquePropertyValues = d3.map(data, d=>d[propertyToColor]).keys();
let colorScale = d3.scaleOrdinal(d3.schemeCategory10);
let binIndexByProperty = {};
// e4.1
for (let prop of uniquePropertyValues) {
binIndexByProperty[prop] = 0;
}
console.log(binIndexByProperty)
// e2
let dataRects = svg.selectAll('.dataRects')
.data(data);
let dataRectsEntered = dataRects
.enter()
.append('rect')
.classed('dataRects', true)
.attr('width', 2) // e2.3
.attr('height', 20)
.attr('fill', 'white')
.attr('x', 0)
.attr('y', 0)
dataRects = dataRects.merge(dataRectsEntered);
dataRects
.transition()
.duration(1000)
.delay((d,i)=>i*10)
.attr('x', (d,i) => i*2) // e2.2
// .attr('y', (d,i) => 80) // e2.1
.attr('y', (d,i) => uniquePropertyValues.indexOf(d[propertyToColor]) * 25) // e3.2
// e2.4
.attr('fill', d=>colorScale(uniquePropertyValues.indexOf(d[propertyToColor])))
// e4.1
.transition()
.delay(data.length * 10)
.attr('x',(d,i) => {
binIndexByProperty[d[propertyToColor]]++;
return binIndexByProperty[d[propertyToColor]] * 2;
});
// e3.3
svg.selectAll('text')
.data(uniquePropertyValues)
.enter()
.append('text')
.attr('x', data.length * 2 + 10)
.attr('y', (d,i)=>i*25 + 14)
.text(d=>d + ' (' + binIndexByProperty[d] + ')') //e4.2
// e4.1
.transition()
.delay(1000 + data.length * 10 * 2)
.duration(1000)
.attr('x',(d,i) => {
return binIndexByProperty[d] * 2 + 10;
});
</script>
<!-- ---------------------------------------------------------- -->
<!-- ---------------------------------------------------------- -->
<!-- Ignore this text below, it's not relevant for the exercise -->
<!-- ---------------------------------------------------------- -->
<!-- ---------------------------------------------------------- -->
<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>
<style>
body {
margin: 20px;
}
ul > li {
font-weight: bold;
margin: 5px 0px;
}
ol li {
font-weight: normal;
margin-bottom: 0px;
}
ol li label {
cursor: pointer;
}
input:checked~.exercise {
text-decoration: line-through;
}
.notes {
margin-left: 24px;
margin-top: 5px;
font-size: 13px;
color: #c11;
}
</style>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment