Complete this warmup exercise to get an idea how to put all the different pieces together to generate an end-to-end data analysis viz report.
The data looks like this:
[
{
"AVG_GRD": 2.98,
"Activity_Type": "LEC - Lecture",
"AvgCourse": 5.4,
"AvgInstructor": 5.6,
"Course": "4808",
"CourseTitle": "Special Topics in World Areas History",
"CrsLvlNum": "4XXX",
"CrsPBAColl": "AS",
"CrsPBADept": "HIST",
"CrsPBADiv": "AH",
"Honors": "0",
"Hours": 3,
"Instruction_Mode": "P - In Person",
"Level": "Upper",
"NComb": 2,
"NIntrFCQ": 1,
"N": {
"ENROLL": 16,
"EOT": 16,
"GRADE": 16,
"INCOMP": 0,
"NOCRED": 0,
"PASS": 0,
"Ret": 15
},
"PCT": {
"A": 0.31,
"B": 0.5,
"C": 0.12,
"C_MINUS_OR_BELOW": 0.06,
"D": 0,
"DF": 0.06,
"F": 0.06,
"GRADE": 1,
"INCOMP": 0,
"WDRAW": 0
},
"RAP": "0",
"Section": "001",
"Subject": "HIST",
"Subject_Label": "History",
"Workload": {
"Hrs_Wk": "7-9",
"Raw": "3.40"
},
"YearTerm": "20137",
"Instructors": [
{
"group": "1 TTT",
"name": "MOJOLA, SANYU AMIMO",
"title": "ASST PROFESSOR"
},
{
"group": "1 TTT",
"name": "OSBORNE, MYLES GREGORY",
"title": "ASST PROFESSOR"
}
]
},
{
"AVG_GRD": 3.25,
"Activity_Type": "LEC - Lecture",
"AvgCourse": 5.15,
"AvgInstructor": 5,
"Course": "4820",
"CourseTitle": "Human Rights: Historical Perspectives",
"CrsLvlNum": "4XXX",
"CrsPBAColl": "AS",
"CrsPBADept": "HIST",
"CrsPBADiv": "AH",
"Honors": "0",
"Hours": 3,
"Instruction_Mode": "P - In Person",
"Level": "Upper",
"NComb": 1,
"NIntrFCQ": 1,
"N": {
"ENROLL": 30,
"EOT": 30,
"GRADE": 30,
"INCOMP": 0,
"NOCRED": 0,
"PASS": 0,
"Ret": 20
},
"PCT": {
"A": 0.5,
"B": 0.33,
"C": 0.13,
"C_MINUS_OR_BELOW": 0.03,
"D": 0.03,
"DF": 0.03,
"F": 0,
"GRADE": 1,
"INCOMP": 0,
"WDRAW": 0
},
"RAP": "0",
"Section": "002",
"Subject": "HIST",
"Subject_Label": "History",
"Workload": {
"Hrs_Wk": "7-9",
"Raw": "2.71"
},
"YearTerm": "20137",
"Instructors": [
{
"group": "1 TTT",
"name": "MUKHERJEE, MITHI",
"title": "ASSOCIATE PROFESSOR"
}
]
},
{
"AVG_GRD": 3.84,
"Activity_Type": "SEM - Seminar",
"AvgCourse": 4.73,
"AvgInstructor": 4.91,
"Course": "5000",
"CourseTitle": "Historical Methods: Introduction to the Professional Study of History",
"CrsLvlNum": "5XXX",
"CrsPBAColl": "AS",
"CrsPBADept": "HIST",
"CrsPBADiv": "AH",
"Honors": "0",
"Hours": 3,
"Instruction_Mode": "P - In Person",
"Level": "Masters",
"NComb": 1,
"NIntrFCQ": 1,
"N": {
"ENROLL": 13,
"EOT": 13,
"GRADE": 13,
"INCOMP": 0,
"NOCRED": 0,
"PASS": 0,
"Ret": 11
},
"PCT": {
"A": 1,
"B": 0,
"C": 0,
"C_MINUS_OR_BELOW": 0,
"D": 0,
"DF": 0,
"F": 0,
"GRADE": 1,
"INCOMP": 0,
"WDRAW": 0
},
"RAP": "1",
"Section": "801",
"Subject": "HIST",
"Subject_Label": "History",
"Workload": {
"Hrs_Wk": "10-12",
"Raw": "3.55"
},
"YearTerm": "20137",
"Instructors": [
{
"group": "1 TTT",
"name": "MUKHERJEE, MITHI",
"title": "ASSOCIATE PROFESSOR"
}
]
},
{
"AVG_GRD": 3.9,
"Activity_Type": "SEM - Seminar",
"AvgCourse": 5.27,
"AvgInstructor": 5.36,
"Course": "6410",
"CourseTitle": "Readings in Environmental History",
"CrsLvlNum": "6XXX",
"CrsPBAColl": "AS",
"CrsPBADept": "HIST",
"CrsPBADiv": "AH",
"Honors": "0",
"Hours": 3,
"Instruction_Mode": "P - In Person",
"Level": "Masters",
"NComb": 1,
"NIntrFCQ": 1,
"N": {
"ENROLL": 13,
"EOT": 13,
"GRADE": 13,
"INCOMP": 0,
"NOCRED": 0,
"PASS": 0,
"Ret": 11
},
"PCT": {
"A": 0.92,
"B": 0.08,
"C": 0,
"C_MINUS_OR_BELOW": 0,
"D": 0,
"DF": 0,
"F": 0,
"GRADE": 1,
"INCOMP": 0,
"WDRAW": 0
},
"RAP": "1",
"Section": "802",
"Subject": "HIST",
"Subject_Label": "History",
"Workload": {
"Hrs_Wk": "10-12",
"Raw": "4.36"
},
"YearTerm": "20137",
"Instructors": [
{
"group": "1 TTT",
"name": "SUTTER, PAUL SHRIVER",
"title": "ASSOCIATE PROFESSOR"
}
]
},
{
"AVG_GRD": 3.8,
"Activity_Type": "SEM - Seminar",
"AvgCourse": 5.71,
"AvgInstructor": 5.93,
"Course": "7052",
"CourseTitle": "Seminar: Modern European History",
"CrsLvlNum": "7XXX",
"CrsPBAColl": "AS",
"CrsPBADept": "HIST",
"CrsPBADiv": "AH",
"Honors": "0",
"Hours": 3,
"Instruction_Mode": "P - In Person",
"Level": "Doctoral",
"NComb": 1,
"NIntrFCQ": 1,
"N": {
"ENROLL": 14,
"EOT": 14,
"GRADE": 10,
"INCOMP": 4,
"NOCRED": 0,
"PASS": 0,
"Ret": 14
},
"PCT": {
"A": 0.8,
"B": 0.2,
"C": 0,
"C_MINUS_OR_BELOW": 0,
"D": 0,
"DF": 0,
"F": 0,
"GRADE": 0.71,
"INCOMP": 0.29,
"WDRAW": 0
},
"RAP": "1",
"Section": "801",
"Subject": "HIST",
"Subject_Label": "History",
"Workload": {
"Hrs_Wk": "10-12",
"Raw": "3.75"
},
"YearTerm": "20137",
"Instructors": [
{
"group": "1 TTT",
"name": "HANNA, MARTHA",
"title": "PROFESSOR"
}
]
},
{
"AVG_GRD": 4,
"Activit
<rect x="0"
y="20"
height="380"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(0 20)">
AS
</text>
<rect x="30"
y="355.62557924003704"
height="44.37442075996293"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(30 355.62557924003704)">
BU
</text>
<rect x="60"
y="383.682421995675"
height="16.317578004324993"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(60 383.682421995675)">
EB
</text>
<rect x="90"
y="332.73401297497685"
height="67.26598702502316"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(90 332.73401297497685)">
EN
</text>
<rect x="120"
y="394.0129749768304"
height="5.987025023169601"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(120 394.0129749768304)">
GR
</text>
<rect x="150"
y="388.7303058387396"
height="11.269694161260427"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(150 388.7303058387396)">
JR
</text>
<rect x="180"
y="379.3388940376892"
height="20.66110596231078"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(180 379.3388940376892)">
LW
</text>
<rect x="210"
y="371.7083719493358"
height="28.291628050664194"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(210 371.7083719493358)">
MB
</text>
<rect x="240"
y="396.4782205746061"
height="3.5217794253938832"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(240 396.4782205746061)">
XX
</text>
<rect x="270"
y="397.76953969725054"
height="2.230460302749459"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(270 397.76953969725054)">
undefined
</text>
<rect x="300"
y="392.95644114921225"
height="7.0435588507877664"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(300 392.95644114921225)">
AP
</text><rect x="${d.x}"
y="${d.y}"
height="${d.height}"
width="${d.width}"
style="fill:${d.color};
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(${d.x} ${d.y})">
${d.label}
</text>var groups = _.groupBy(data, 'CrsPBAColl')
var counts = _.map(groups, function(value, key) {
return {'name': key, 'count': _.pluck(value, 'Course').length}
})
console.log(counts)
// Produce a bottom-aligned bar chart with margins
function computeX(d, i) {
return i * 30
}
function computeHeight(d, i) {
var value = _.max(_.pluck(counts, 'count'))
return (d.count/(value/380))
}
function computeWidth(d, i) {
return 20
}
function computeY(d, i) {
return 400 - computeHeight(d, i)
}
function computeColor(d, i) {
return 'red'
}
function computeLabel(d, i) {
return d.name
}
var viz = _.map(counts, function(d, i) {
return {
x: computeX(d, i),
y: computeY(d, i),
height: computeHeight(d, i),
width: computeWidth(d, i),
color: computeColor(d, i),
label: computeLabel(d, i)
}
})
console.log(viz)
var result = _.map(viz, function(d) {
// invoke the compiled template function on each viz data
return template({d: d})
})
return result.join('\n')