book

Report

Use only Javascript and SVG to produce a data analysis / visualization report.

Authors

This report is prepared by

(Question 1)

What is the average GPA across colleges?[top]

Viz AS BU EB EN GR JR LW MB XX undefined AP
<rect x="0"
      y="184.99620018535657"
      height="215.00379981464343"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<text x="0" y="184.99620018535657">AS</text>
<rect x="50"
      y="195.24629629629615"
      height="204.75370370370385"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<text x="50" y="195.24629629629615">BU</text>
<rect x="100"
      y="145.33093525179848"
      height="254.66906474820152"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<text x="100" y="145.33093525179848">EB</text>
<rect x="150"
      y="172.33507853403134"
      height="227.66492146596866"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<text x="150" y="172.33507853403134">EN</text>
<rect x="200"
      y="149.70196078431366"
      height="250.29803921568634"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<text x="200" y="149.70196078431366">GR</text>
<rect x="250"
      y="163.071875"
      height="236.928125"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<text x="250" y="163.071875">JR</text>
<rect x="300"
      y="197.0795454545454"
      height="202.9204545454546"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<text x="300" y="197.0795454545454">LW</text>
<rect x="350"
      y="154.233195020747"
      height="245.766804979253"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<text x="350" y="154.233195020747">MB</text>
<rect x="400"
      y="141.77000000000004"
      height="258.22999999999996"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<text x="400" y="141.77000000000004">XX</text>
<rect x="450"
      y="169.69999999999996"
      height="230.30000000000004"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<text x="450" y="169.69999999999996">undefined</text>
<rect x="500"
      y="169.82833333333332"
      height="230.17166666666668"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<text x="500" y="169.82833333333332">AP</text>
Solution: SVG Template
<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 x="${d.x}" y="${d.y}">${d.label.name}</text>
Solution: Javascript
var groups=_.groupBy(data, function(group){
	return group['CrsPBAColl']
})
var avgJson=_.mapValues(groups, function(group){
    return _.sum(group, function(e){
    	return e["AVG_GRD"]
    })/_.size(group)
})
var keys=_.keys(avgJson)
var avgList=_.map(keys, function(key){
	return {"name": key, "AvgGPA": avgJson[key]}
})
console.log(avgList)

function computeX(d, i) {
    return 50*i
}

function computeHeight(d, i) {
    return d['AvgGPA']*70
}

function computeWidth(d, i) {
    return 20 
}

function computeY(d, i) {
    return 400-d['AvgGPA']*70
}

function computeColor(d, i) {
    return 'red'
}

var viz = _.map(avgList, 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: d
            }
         })
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')
Console
[{"name":"AS","AvgGPA":3.071482854494906},{"name":"BU","AvgGPA":2.925052910052912},{"name":"EB","AvgGPA":3.638129496402879},{"name":"EN","AvgGPA":3.2523560209424094},{"name":"GR","AvgGPA":3.575686274509805},{"name":"JR","AvgGPA":3.3846875},{"name":"LW","AvgGPA":2.898863636363637},{"name":"MB","AvgGPA":3.5109543568464714},{"name":"XX","AvgGPA":3.688999999999999},{"name":"undefined","AvgGPA":3.2900000000000005},{"name":"AP","AvgGPA":3.2881666666666667}]
[{"x":0,"y":184.99620018535657,"height":215.00379981464343,"width":20,"color":"red","label":{"name":"AS","AvgGPA":3.071482854494906}},{"x":50,"y":195.24629629629615,"height":204.75370370370385,"width":20,"color":"red","label":{"name":"BU","AvgGPA":2.925052910052912}},{"x":100,"y":145.33093525179848,"height":254.66906474820152,"width":20,"color":"red","label":{"name":"EB","AvgGPA":3.638129496402879}},{"x":150,"y":172.33507853403134,"height":227.66492146596866,"width":20,"color":"red","label":{"name":"EN","AvgGPA":3.2523560209424094}},{"x":200,"y":149.70196078431366,"height":250.29803921568634,"width":20,"color":"red","label":{"name":"GR","AvgGPA":3.575686274509805}},{"x":250,"y":163.071875,"height":236.928125,"width":20,"color":"red","label":{"name":"JR","AvgGPA":3.3846875}},{"x":300,"y":197.0795454545454,"height":202.9204545454546,"width":20,"color":"red","label":{"name":"LW","AvgGPA":2.898863636363637}},{"x":350,"y":154.233195020747,"height":245.766804979253,"width":20,"color":"red","label":{"name":"MB","AvgGPA":3.5109543568464714}},{"x":400,"y":141.77000000000004,"height":258.22999999999996,"width":20,"color":"red","label":{"name":"XX","AvgGPA":3.688999999999999}},{"x":450,"y":169.69999999999996,"height":230.30000000000004,"width":20,"color":"red","label":{"name":"undefined","AvgGPA":3.2900000000000005}},{"x":500,"y":169.82833333333332,"height":230.17166666666668,"width":20,"color":"red","label":{"name":"AP","AvgGPA":3.2881666666666667}}]

Use the warmup exercise as the template to produce an answer here.

(Question 2)

What is the enrollment across colleges?[top]

Viz AS: 119563 BU: 17523 EB: 3198 EN: 27047 GR: 1177 JR: 2982 LW: 5166 MB: 7034 XX: 559 undefined: 384 AP: 1400 
<rect x="0"
      y="0"
      height="20"
      width="597.815"
      style="fill:teal;
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="605.815" y="17">
    AS: 119563
</text>
<rect x="0"
      y="35"
      height="20"
      width="87.615"
      style="fill:teal;
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="95.615" y="52">
    BU: 17523
</text>
<rect x="0"
      y="70"
      height="20"
      width="15.99"
      style="fill:teal;
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="23.990000000000002" y="87">
    EB: 3198
</text>
<rect x="0"
      y="105"
      height="20"
      width="135.235"
      style="fill:teal;
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="143.235" y="122">
    EN: 27047
</text>
<rect x="0"
      y="140"
      height="20"
      width="5.885"
      style="fill:teal;
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="13.885" y="157">
    GR: 1177
</text>
<rect x="0"
      y="175"
      height="20"
      width="14.91"
      style="fill:teal;
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="22.91" y="192">
    JR: 2982
</text>
<rect x="0"
      y="210"
      height="20"
      width="25.83"
      style="fill:teal;
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="33.83" y="227">
    LW: 5166
</text>
<rect x="0"
      y="245"
      height="20"
      width="35.17"
      style="fill:teal;
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="43.17" y="262">
    MB: 7034
</text>
<rect x="0"
      y="280"
      height="20"
      width="2.795"
      style="fill:teal;
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="10.795" y="297">
    XX: 559
</text>
<rect x="0"
      y="315"
      height="20"
      width="1.92"
      style="fill:teal;
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="9.92" y="332">
    undefined: 384
</text>
<rect x="0"
      y="350"
      height="20"
      width="7"
      style="fill:teal;
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="15" y="367">
    AP: 1400
</text>
Solution: SVG Template
<rect x="${d.x}"
      y="${d.y}"
      height="${d.height}"
      width="${d.width}"
      style="fill:${d.color};
             stroke-width:1;
             stroke:rgb(0,0,0)" />
<text x="${d.width + 8}" y="${d.y + 17}">
    ${d.label}: ${d.count}
</text>
Solution: Javascript
var groups = _.groupBy(data, function(d){
    return d['CrsPBAColl']
})

var count = _.mapValues(groups, function(g) {
    return _.sum(_.pluck(g, 'N.ENROLL'))
})

var keys = _.keys(count)

var final = _.map(keys, function(key) {
    return {"name": key, "enroll": count[key]}
})

console.log(final)

/* SVG Functions */
function computeX(d, i) {
    return 0
}

function computeHeight(d, i) {
    return 20
}

function computeWidth(d, i) {
    return d.enroll / 200
}

function computeY(d, i) {
    return 35 * i
}

function computeColor(d, i) {
    return 'teal'
}

function computeLabel(d, i) {
    return d.name
}

function computeLabel2(d, i) {
	return d.enroll
}

var viz = _.map(final, 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),
        count: computeLabel2(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')
Console
[{"name":"AS","enroll":119563},{"name":"BU","enroll":17523},{"name":"EB","enroll":3198},{"name":"EN","enroll":27047},{"name":"GR","enroll":1177},{"name":"JR","enroll":2982},{"name":"LW","enroll":5166},{"name":"MB","enroll":7034},{"name":"XX","enroll":559},{"name":"undefined","enroll":384},{"name":"AP","enroll":1400}]
[{"x":0,"y":0,"height":20,"width":597.815,"color":"teal","label":"AS","count":119563},{"x":0,"y":35,"height":20,"width":87.615,"color":"teal","label":"BU","count":17523},{"x":0,"y":70,"height":20,"width":15.99,"color":"teal","label":"EB","count":3198},{"x":0,"y":105,"height":20,"width":135.235,"color":"teal","label":"EN","count":27047},{"x":0,"y":140,"height":20,"width":5.885,"color":"teal","label":"GR","count":1177},{"x":0,"y":175,"height":20,"width":14.91,"color":"teal","label":"JR","count":2982},{"x":0,"y":210,"height":20,"width":25.83,"color":"teal","label":"LW","count":5166},{"x":0,"y":245,"height":20,"width":35.17,"color":"teal","label":"MB","count":7034},{"x":0,"y":280,"height":20,"width":2.795,"color":"teal","label":"XX","count":559},{"x":0,"y":315,"height":20,"width":1.92,"color":"teal","label":"undefined","count":384},{"x":0,"y":350,"height":20,"width":7,"color":"teal","label":"AP","count":1400}]

What is the average instructor rating across CS classes?[top]

Viz Computer Science as a Field of Work and Study: 5.02 Computer Science 1: Starting Computing: 4.26 Computer Science 2: Data Structures: 4.890000000000001 Computer Systems: 4.61 Linear Algebra with Computer Science Applications: 3.17 Discrete Structures: 4.785 Algorithms: 5.34 Human-Centered Computing Professional Development: 0 Principles of Programming Languages: 3.69 Introduction to Artificial Intelligence: 2.83 Database and Information Systems: 2.73 Introduction to Robotics: 4.57 Software Engineering Methods and Tools: 3.12 Unix System Administration: 5.75 Computer Graphics: 5.46 Network Systems: 4.96 Software Engineering Project 1: 3.84 Algorithms for Molecular Biology: 4.37 High-Performance Scientific Computing: 4.72 Computer Animation: 4.23 Special Topics in Computer Science: 5.1825 Network Analysis and Modeling: 5.11 Introduction to Theory of Computation: 5.06 Fundamental Concepts of Programming Languages: 4.73 Principles of Numerical Computation: 5.5 Linear Programming: 5.68 Distributed Systems: 5.44 Natural Language Processing: 5.11 HCC Survey and Synthesis: Foundations and Trajectories: 6 Introduction to the Computer Science PhD Program: 5.54 Topics in Nonsymbolic Artificial Intelligence: 5.4 Topics in Cognitive Science: 2.335 Computer Science 1: Programming: 5.205 HCC Foundations/User-Centered Design and Development 1: 5.38 SoftwareDevelopment Methods and Tools: 2.76 Theory of Computation: 4.7 Numerical Computation: 5.14 Operating Systems: 4.58 Advanced Computer Graphics: 5.62 Software Engineering Project 2: 3.73 Object-Oriented Analysis and Design: 5.28 Design and Analysis of Algorithms: 4.85 Machine Learning: 3.53 Database Systems: 3.9 Issues and Methods in Cognitive Science: 4.63 Advanced Algorithms: 5.7 
<rect x="0"
      y="0"
      height="10"
      width="50.199999999999996"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="58.199999999999996" y="12">
    Computer Science as a Field of Work and Study: 5.02
</text>
<rect x="0"
      y="25"
      height="10"
      width="42.599999999999994"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="50.599999999999994" y="37">
    Computer Science 1: Starting Computing: 4.26
</text>
<rect x="0"
      y="50"
      height="10"
      width="48.900000000000006"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="56.900000000000006" y="62">
    Computer Science 2: Data Structures: 4.890000000000001
</text>
<rect x="0"
      y="75"
      height="10"
      width="46.1"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="54.1" y="87">
    Computer Systems: 4.61
</text>
<rect x="0"
      y="100"
      height="10"
      width="31.7"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="39.7" y="112">
    Linear Algebra with Computer Science Applications: 3.17
</text>
<rect x="0"
      y="125"
      height="10"
      width="47.85"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="55.85" y="137">
    Discrete Structures: 4.785
</text>
<rect x="0"
      y="150"
      height="10"
      width="53.4"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="61.4" y="162">
    Algorithms: 5.34
</text>
<rect x="0"
      y="175"
      height="10"
      width="0"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="8" y="187">
    Human-Centered Computing Professional Development: 0
</text>
<rect x="0"
      y="200"
      height="10"
      width="36.9"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="44.9" y="212">
    Principles of Programming Languages: 3.69
</text>
<rect x="0"
      y="225"
      height="10"
      width="28.3"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="36.3" y="237">
    Introduction to Artificial Intelligence: 2.83
</text>
<rect x="0"
      y="250"
      height="10"
      width="27.3"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="35.3" y="262">
    Database and Information Systems: 2.73
</text>
<rect x="0"
      y="275"
      height="10"
      width="45.7"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="53.7" y="287">
    Introduction to Robotics: 4.57
</text>
<rect x="0"
      y="300"
      height="10"
      width="31.200000000000003"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="39.2" y="312">
    Software Engineering Methods and Tools: 3.12
</text>
<rect x="0"
      y="325"
      height="10"
      width="57.5"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="65.5" y="337">
    Unix System Administration: 5.75
</text>
<rect x="0"
      y="350"
      height="10"
      width="54.6"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="62.6" y="362">
    Computer Graphics: 5.46
</text>
<rect x="0"
      y="375"
      height="10"
      width="49.6"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="57.6" y="387">
    Network Systems: 4.96
</text>
<rect x="0"
      y="400"
      height="10"
      width="38.4"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="46.4" y="412">
    Software Engineering Project 1: 3.84
</text>
<rect x="0"
      y="425"
      height="10"
      width="43.7"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="51.7" y="437">
    Algorithms for Molecular Biology: 4.37
</text>
<rect x="0"
      y="450"
      height="10"
      width="47.199999999999996"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="55.199999999999996" y="462">
    High-Performance Scientific Computing: 4.72
</text>
<rect x="0"
      y="475"
      height="10"
      width="42.300000000000004"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="50.300000000000004" y="487">
    Computer Animation: 4.23
</text>
<rect x="0"
      y="500"
      height="10"
      width="51.825"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="59.825" y="512">
    Special Topics in Computer Science: 5.1825
</text>
<rect x="0"
      y="525"
      height="10"
      width="51.1"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="59.1" y="537">
    Network Analysis and Modeling: 5.11
</text>
<rect x="0"
      y="550"
      height="10"
      width="50.599999999999994"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="58.599999999999994" y="562">
    Introduction to Theory of Computation: 5.06
</text>
<rect x="0"
      y="575"
      height="10"
      width="47.300000000000004"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="55.300000000000004" y="587">
    Fundamental Concepts of Programming Languages: 4.73
</text>
<rect x="0"
      y="600"
      height="10"
      width="55"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="63" y="612">
    Principles of Numerical Computation: 5.5
</text>
<rect x="0"
      y="625"
      height="10"
      width="56.8"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="64.8" y="637">
    Linear Programming: 5.68
</text>
<rect x="0"
      y="650"
      height="10"
      width="54.400000000000006"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="62.400000000000006" y="662">
    Distributed Systems: 5.44
</text>
<rect x="0"
      y="675"
      height="10"
      width="51.1"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="59.1" y="687">
    Natural Language Processing: 5.11
</text>
<rect x="0"
      y="700"
      height="10"
      width="60"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="68" y="712">
    HCC Survey and Synthesis: Foundations and Trajectories: 6
</text>
<rect x="0"
      y="725"
      height="10"
      width="55.4"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="63.4" y="737">
    Introduction to the Computer Science PhD Program: 5.54
</text>
<rect x="0"
      y="750"
      height="10"
      width="54"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="62" y="762">
    Topics in Nonsymbolic Artificial Intelligence: 5.4
</text>
<rect x="0"
      y="775"
      height="10"
      width="23.35"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="31.35" y="787">
    Topics in Cognitive Science: 2.335
</text>
<rect x="0"
      y="800"
      height="10"
      width="52.05"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="60.05" y="812">
    Computer Science 1: Programming: 5.205
</text>
<rect x="0"
      y="825"
      height="10"
      width="53.8"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="61.8" y="837">
    HCC Foundations/User-Centered Design and Development 1: 5.38
</text>
<rect x="0"
      y="850"
      height="10"
      width="27.599999999999998"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="35.599999999999994" y="862">
    SoftwareDevelopment Methods and Tools: 2.76
</text>
<rect x="0"
      y="875"
      height="10"
      width="47"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="55" y="887">
    Theory of Computation: 4.7
</text>
<rect x="0"
      y="900"
      height="10"
      width="51.4"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="59.4" y="912">
    Numerical Computation: 5.14
</text>
<rect x="0"
      y="925"
      height="10"
      width="45.8"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="53.8" y="937">
    Operating Systems: 4.58
</text>
<rect x="0"
      y="950"
      height="10"
      width="56.2"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="64.2" y="962">
    Advanced Computer Graphics: 5.62
</text>
<rect x="0"
      y="975"
      height="10"
      width="37.3"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="45.3" y="987">
    Software Engineering Project 2: 3.73
</text>
<rect x="0"
      y="1000"
      height="10"
      width="52.800000000000004"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="60.800000000000004" y="1012">
    Object-Oriented Analysis and Design: 5.28
</text>
<rect x="0"
      y="1025"
      height="10"
      width="48.5"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="56.5" y="1037">
    Design and Analysis of Algorithms: 4.85
</text>
<rect x="0"
      y="1050"
      height="10"
      width="35.3"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="43.3" y="1062">
    Machine Learning: 3.53
</text>
<rect x="0"
      y="1075"
      height="10"
      width="39"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="47" y="1087">
    Database Systems: 3.9
</text>
<rect x="0"
      y="1100"
      height="10"
      width="46.3"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="54.3" y="1112">
    Issues and Methods in Cognitive Science: 4.63
</text>
<rect x="0"
      y="1125"
      height="10"
      width="57"
      style="fill:green;
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="65" y="1137">
    Advanced Algorithms: 5.7
</text>
Solution: SVG Template
<rect x="${d.x}"
      y="${d.y}"
      height="${d.height}"
      width="${d.width}"
      style="fill:${d.color};
             stroke-width:0;
             stroke:rgb(0,0,0)" />
<text x="${d.width + 8}" y="${d.y + 12}">
    ${d.label}: ${d.count}
</text>
Solution: Javascript
var groups = _.filter(data, function(d){
    if (d.Subject === "CSCI") 
      return d
})

groups = _.groupBy(groups, function(n) {
  return n.CourseTitle
})

var count = _.mapValues(groups, function(g) {
    return _.sum(_.pluck(g, 'AvgInstructor')) / g.length
})

var keys = _.keys(count)

var final = _.map(keys, function(key) {
    return {"name": key, "rating": count[key]}
})

console.log(count)

/* SVG Functions */
function computeX(d, i) {
    return 0
}

function computeHeight(d, i) {
    return 10
}

function computeWidth(d, i) {
    return d.rating * 10
}

function computeY(d, i) {
    return 25 * i
}

function computeColor(d, i) {
    return 'green'
}

function computeLabel(d, i) {
    return d.name
}

function computeLabel2(d, i) {
  return d.rating
}

var viz = _.map(final, 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),
        count: computeLabel2(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')
Console
{"Computer Science as a Field of Work and Study":5.02,"Computer Science 1: Starting Computing":4.26,"Computer Science 2: Data Structures":4.890000000000001,"Computer Systems":4.61,"Linear Algebra with Computer Science Applications":3.17,"Discrete Structures":4.785,"Algorithms":5.34,"Human-Centered Computing Professional Development":0,"Principles of Programming Languages":3.69,"Introduction to Artificial Intelligence":2.83,"Database and Information Systems":2.73,"Introduction to Robotics":4.57,"Software Engineering Methods and Tools":3.12,"Unix System Administration":5.75,"Computer Graphics":5.46,"Network Systems":4.96,"Software Engineering Project 1":3.84,"Algorithms for Molecular Biology":4.37,"High-Performance Scientific Computing":4.72,"Computer Animation":4.23,"Special Topics in Computer Science":5.1825,"Network Analysis and Modeling":5.11,"Introduction to Theory of Computation":5.06,"Fundamental Concepts of Programming Languages":4.73,"Principles of Numerical Computation":5.5,"Linear Programming":5.68,"Distributed Systems":5.44,"Natural Language Processing":5.11,"HCC Survey and Synthesis: Foundations and Trajectories":6,"Introduction to the Computer Science PhD Program":5.54,"Topics in Nonsymbolic Artificial Intelligence":5.4,"Topics in Cognitive Science":2.335,"Computer Science 1: Programming":5.205,"HCC Foundations/User-Centered Design and Development 1":5.38,"SoftwareDevelopment Methods and Tools":2.76,"Theory of Computation":4.7,"Numerical Computation":5.14,"Operating Systems":4.58,"Advanced Computer Graphics":5.62,"Software Engineering Project 2":3.73,"Object-Oriented Analysis and Design":5.28,"Design and Analysis of Algorithms":4.85,"Machine Learning":3.53,"Database Systems":3.9,"Issues and Methods in Cognitive Science":4.63,"Advanced Algorithms":5.7}
[{"x":0,"y":0,"height":10,"width":50.199999999999996,"color":"green","label":"Computer Science as a Field of Work and Study","count":5.02},{"x":0,"y":25,"height":10,"width":42.599999999999994,"color":"green","label":"Computer Science 1: Starting Computing","count":4.26},{"x":0,"y":50,"height":10,"width":48.900000000000006,"color":"green","label":"Computer Science 2: Data Structures","count":4.890000000000001},{"x":0,"y":75,"height":10,"width":46.1,"color":"green","label":"Computer Systems","count":4.61},{"x":0,"y":100,"height":10,"width":31.7,"color":"green","label":"Linear Algebra with Computer Science Applications","count":3.17},{"x":0,"y":125,"height":10,"width":47.85,"color":"green","label":"Discrete Structures","count":4.785},{"x":0,"y":150,"height":10,"width":53.4,"color":"green","label":"Algorithms","count":5.34},{"x":0,"y":175,"height":10,"width":0,"color":"green","label":"Human-Centered Computing Professional Development","count":0},{"x":0,"y":200,"height":10,"width":36.9,"color":"green","label":"Principles of Programming Languages","count":3.69},{"x":0,"y":225,"height":10,"width":28.3,"color":"green","label":"Introduction to Artificial Intelligence","count":2.83},{"x":0,"y":250,"height":10,"width":27.3,"color":"green","label":"Database and Information Systems","count":2.73},{"x":0,"y":275,"height":10,"width":45.7,"color":"green","label":"Introduction to Robotics","count":4.57},{"x":0,"y":300,"height":10,"width":31.200000000000003,"color":"green","label":"Software Engineering Methods and Tools","count":3.12},{"x":0,"y":325,"height":10,"width":57.5,"color":"green","label":"Unix System Administration","count":5.75},{"x":0,"y":350,"height":10,"width":54.6,"color":"green","label":"Computer Graphics","count":5.46},{"x":0,"y":375,"height":10,"width":49.6,"color":"green","label":"Network Systems","count":4.96},{"x":0,"y":400,"height":10,"width":38.4,"color":"green","label":"Software Engineering Project 1","count":3.84},{"x":0,"y":425,"height":10,"width":43.7,"color":"green","label":"Algorithms for Molecular Biology","count":4.37},{"x":0,"y":450,"height":10,"width":47.199999999999996,"color":"green","label":"High-Performance Scientific Computing","count":4.72},{"x":0,"y":475,"height":10,"width":42.300000000000004,"color":"green","label":"Computer Animation","count":4.23},"... 26 more"]