D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ideaOwl
Full window
Github gist
D3 Workshop: Part 3 - Conference Data
Built with
blockbuilder.org
<!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', 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> <!-- ---------------------------------------------------------- --> <!-- ---------------------------------------------------------- --> <!-- 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>
https://d3js.org/d3.v4.min.js