Skip to content

Instantly share code, notes, and snippets.

@ideaOwl

ideaOwl/.block

Last active March 7, 2020 23:18
Show Gist options
  • Save ideaOwl/8c5674fda909552a84d840c81a1325be to your computer and use it in GitHub Desktop.
Save ideaOwl/8c5674fda909552a84d840c81a1325be to your computer and use it in GitHub Desktop.
Download ZIP
Sandbox - StudentDevCon2020 Workshop Sandbox
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>
<div>
<svg>
</svg>
</div>
<div>
<input type="button"
value="Start" onclick="draw('start')">
<input type="button"
value="Scatter!" onclick="draw('scatter')">
<input type="button" value="Line" onclick="draw('line')">
<input type="button" value="Grid" onclick="draw('grid')">
<input type="button"
value="Sandbox 1" onclick="draw('sandbox1')">
</div>
<div>
<input type="button"
value="Follow Mouse" onclick="draw('followMouse')">
<input type="button"
value="Unfollow Mouse" onclick="draw('unfollowMouse')">
</div>
<div>
<input type="button"
value="Color By School" onclick="draw('colBySch')">
<input type="button" value="Bars" onclick="draw('bars')">
<input type="button"
value="Time" onclick="draw('time')">
</div>
<input type="button" value="Sandbox 2" onclick="draw('sandbox2')">
<input type="button" value="Sandbox 3" onclick="draw('sandbox3')">
<script>
svgWidth = 800;
svgHeight = 400;
// 215 records
function draw(option) {
let dataRects = bindAndDrawInitialRectangles();
if (option === 'start') {
dataRects
.transition()
.duration(1000)
.attr('width', 20)
.attr('height', 20)
.attr('x', 0)
.attr('y', 0)
.style('fill', 'black');
} else if (option === 'scatter') {
// Goal: Make squares move to random locations and
// use random colors
// Tips:
// - To get a random number between 0 and 1
// use Math.random()
// - For a random color, use getRandomColor()
dataRects
.transition()
.duration(1000)
.attr('width', 20)
.attr('height', 20)
.attr('x', function (d,i) { return Math.random() * svgWidth})
.attr('y', (d,i) => Math.random() * svgHeight)
.style('fill', ()=> getRandomColor());
} else if (option === 'line') {
// Goal: Create a single line of squares with
// gradually changing colors
// Tips:
// - colors are determined from "rgb(*,*,*)",
// where "*" represents a number from 0 to 255
dataRects
.transition()
.duration(1000)
.attr('width', 10)
.attr('height', 10)
.attr('x', (d,i) => i * 12)
.attr('y', 0)
.style('fill', (d,i)=> 'rgb('+(100 + i * 5)+',50,50)');
} else if (option === 'grid') {
// Goal: Create grid, initially with no delay,
// but later delay on 4th row on
dataRects
.transition()
.duration(1000)
.delay((d,i)=> (parseInt(i / 15) < 4) ? 0 : i * 10)
.attr('width', 10)
.attr('height', 10)
.attr('x', (d,i) => (i % 15) * 12)
.attr('y', (d,i) => parseInt(i / 15) * 12)
.style('fill', (d,i)=> 'rgb('+(100 + i * 5)+',50,50)');
} else if (option === 'sandbox1') {
// Goal: Play! Make something!
} else if (option === 'followMouse') {
// Goal: Move rects to mouse location on click
// Tips:
// - "d3.mouse(this)" returns a single [x,y] array
// where x and y are the 0 and 1 index values
d3.select('svg')
.on('click', function() {
dataRects
.transition()
.duration(1000)
.delay((d,i)=> i * 10)
.attr('width', 10)
.attr('height', 10)
.attr('x', (d,i) => d3.mouse(this)[0])
.attr('y', (d,i) => d3.mouse(this)[1])
.style('fill', 'blue');
})
} else if (option === 'unfollowMouse') {
// Done: Remove ability for rects to follow clicks
d3.select('svg')
.on('click', function() {})
} else if (option === 'colBySch') {
// Goal: Color rects by school source
dataRects
.transition()
.duration(1000)
.delay((d,i)=> i * 10)
.attr('width', 10)
.attr('height', 10)
.style('fill', (d,i) => {
if (d['School Affiliation'] === 'University of Alberta') return 'green';
if (d['School Affiliation'] === 'NAIT') return 'blue';
if (d['School Affiliation'] === 'High School') return 'purple';
if (d['School Affiliation'] === 'MacEwan University') return 'red';
if (d['School Affiliation'] === 'Other Post-Secondary') return 'yellow';
});
// A more d3 way of doing things:
// let colorScale = d3.scaleOrdinal(d3.schemeCategory10);
} else if (option === 'bars') {
let uniqueSchoolAff = [];
data.forEach((d,i) => {
if (uniqueSchoolAff.indexOf(d['School Affiliation']) < 0) {
uniqueSchoolAff.push(d['School Affiliation'])
}
})
let uniqueSchoolBin = uniqueSchoolAff.map(() => 0)
dataRects
.transition()
.duration(1000)
.attr('width', 2)
.attr('height', 30)
.attr('y', (d,i) => uniqueSchoolAff.indexOf(d['School Affiliation']) * 35)
.attr('x', (d,i) => {
uniqueSchoolBin[uniqueSchoolAff.indexOf(d['School Affiliation'])] += 1;
return uniqueSchoolBin[uniqueSchoolAff.indexOf(d['School Affiliation'])]* 2
});
} else if (option === 'time') {
let baseDate = Date.parse(data[0]['Paid at']);
dataRects
.transition()
.duration(1000)
.delay((d,i)=> i * 80)
.attr('width', 3)
.attr('height', 50)
.attr('x', (d,i)=> (Date.parse(d['Paid at']) - baseDate) / 1000 // seconds
/ 60 // minutes
/ 60 // hours
/ 24 // days
* 3)
.attr('y', 0)
.style('opacity', 0.1)
.style('fill', 'green');
} else if (option === 'sandbox2') {
// Goal: Play! Make something!
} else if (option === 'sandbox3') {
// Goal: Play! Make something!
}
}
function getRandomColor() {
return 'rgba('+rand255()+','+rand255()+','+rand255()+', 1)';
}
function rand255() {
return parseInt(Math.random() * 256);
}
function bindAndDrawInitialRectangles() {
let svg = d3.select('svg');
svg.style('width', svgWidth + 'px')
.style('height', svgHeight + 'px')
let dataRects = svg.selectAll('.dataRects')
.data(data);
let dataRectsEntered = dataRects
.enter()
.append('rect')
.classed('dataRects', true)
.attr('width', 0)
.attr('height', 0)
.attr('fill', 'white')
return dataRects = dataRects.merge(dataRectsEntered);
}
</script>
<script>
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"
}
];
draw('start');
</script>
<style>
body {
margin: 20px;
}
div {
margin-bottom: 8px;
}
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