Use only Javascript and SVG to produce a data analysis / visualization report.
This report is prepared by
<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>
<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>
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')
<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>
<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>
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')
<rect x="0"
y="0"
height="8"
width="159.39999999999998"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="167.39999999999998" y="10" font-size="10">
LEWIS, CLAYTON H
</text>
<rect x="0"
y="10"
height="8"
width="187.5"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="195.5" y="20" font-size="10">
LAMARCHE, JEFFREY STEVEN
</text>
<rect x="0"
y="20"
height="8"
width="236.99999999999997"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="244.99999999999997" y="30" font-size="10">
HOENIGMAN, RHONDA OLCOTT
</text>
<rect x="0"
y="30"
height="8"
width="244.50000000000003"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="252.50000000000003" y="40" font-size="10">
WHITE, ELIZABETH K.
</text>
<rect x="0"
y="40"
height="8"
width="244.50000000000003"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="252.50000000000003" y="50" font-size="10">
HAN, RICHARD YEHWHEI
</text>
<rect x="0"
y="50"
height="8"
width="230.16666666666669"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="238.16666666666669" y="60" font-size="10">
JESSUP, ELIZABETH R
</text>
<rect x="0"
y="60"
height="8"
width="286.3333333333333"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="294.3333333333333" y="70" font-size="10">
BLACK, JOHN
</text>
<rect x="0"
y="70"
height="8"
width="122.50000000000001"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="130.5" y="80" font-size="10">
BAKER, JAMES EDWARD
</text>
<rect x="0"
y="80"
height="8"
width="141.5"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="149.5" y="90" font-size="10">
MCBURNETT, NEAL
</text>
<rect x="0"
y="90"
height="8"
width="196.12500000000003"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="204.12500000000003" y="100" font-size="10">
KING, ROGER A
</text>
<rect x="0"
y="100"
height="8"
width="228.5"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="236.5" y="110" font-size="10">
CORRELL, NICOLAUS J
</text>
<rect x="0"
y="110"
height="8"
width="178.16666666666669"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="186.16666666666669" y="120" font-size="10">
STAFFORD, JUDITH ALYCE
</text>
<rect x="0"
y="120"
height="8"
width="287.5"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="295.5" y="130" font-size="10">
DEHUS, MARK D
</text>
<rect x="0"
y="130"
height="8"
width="277"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="285" y="140" font-size="10">
SCHREUDER, WILLEM A
</text>
<rect x="0"
y="140"
height="8"
width="226.75"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="234.75" y="150" font-size="10">
GOLDBERG, DEBRA S
</text>
<rect x="0"
y="150"
height="8"
width="236"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="244" y="160" font-size="10">
HAUSER, THOMAS A
</text>
<rect x="0"
y="160"
height="8"
width="254.5"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="262.5" y="170" font-size="10">
YEH, PEI HSIU
</text>
<rect x="0"
y="170"
height="8"
width="245.00000000000003"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="253.00000000000003" y="180" font-size="10">
TUFO, HENRY
</text>
<rect x="0"
y="180"
height="8"
width="250.5"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="258.5" y="190" font-size="10">
CLAUSET, AARON JULIAN
</text>
<rect x="0"
y="190"
height="8"
width="247.75"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="255.75" y="200" font-size="10">
EHRENFEUCHT, ANDRZEJ
</text>
<rect x="0"
y="200"
height="8"
width="241.5"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="249.5" y="210" font-size="10">
CHANG, BOR-YUH EVAN
</text>
<rect x="0"
y="210"
height="8"
width="283"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="291" y="220" font-size="10">
SANKARANARAYANAN, SRIRAM
</text>
<rect x="0"
y="220"
height="8"
width="245.83333333333334"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="253.83333333333334" y="230" font-size="10">
MISHRA, SHIVAKANT
</text>
<rect x="0"
y="230"
height="8"
width="255.50000000000003"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="263.5" y="240" font-size="10">
MARTIN, JAMES H
</text>
<rect x="0"
y="240"
height="8"
width="289.75"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="297.75" y="250" font-size="10">
PALEN, LEYSIA A
</text>
<rect x="0"
y="250"
height="8"
width="250.75000000000003"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="258.75" y="260" font-size="10">
MOZER, MICHAEL C
</text>
<rect x="0"
y="260"
height="8"
width="116.75"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="124.75" y="270" font-size="10">
CACCAMISE, DONNA J
</text>
<rect x="0"
y="270"
height="8"
width="254.25"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="262.25" y="280" font-size="10">
BOESE, ELIZABETH SUGAR
</text>
<rect x="0"
y="280"
height="8"
width="251.5"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="259.5" y="290" font-size="10">
GRUNWALD, DIRK C
</text>
<rect x="0"
y="290"
height="8"
width="138"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="146" y="300" font-size="10">
OKOYE, IFEYINWA U.
</text>
<rect x="0"
y="300"
height="8"
width="264"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="272" y="310" font-size="10">
HUGHES, DANA THURSTON
</text>
<rect x="0"
y="310"
height="8"
width="276"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="284" y="320" font-size="10">
NIES, ZACH T
</text>
<rect x="0"
y="320"
height="8"
width="176.5"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="184.5" y="330" font-size="10">
WILDER, MATTHEW H.
</text>
<rect x="0"
y="330"
height="8"
width="231.5"
style="fill:teal;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="239.5" y="340" font-size="10">
WAGER, TOR DESSART
</text>
<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 + 10}" font-size="10">
${d.label}
</text>
var list=_.filter(data, function(e){
return e['Subject'] == 'CSCI'
})
console.log(list)
var listInstructors = _.flatten(_.map(list, function(course){
var instructors=course['Instructors']
var avgGrd=course['AvgInstructor']
return _.map(instructors, function(instructor){
return {"instructor": instructor['name'], "avgGRD": avgGrd}
})
})
)
var groups=_.groupBy(listInstructors, function(instructor){
return instructor['instructor']
})
var avgGroups=_.mapValues(groups, function(group){
return _.sum(group, function(course){
return course['avgGRD']
})/_.size(group)
})
var keys=_.keys(avgGroups)
var avgList=_.map(keys, function(key){
return {"name": key, "avgGRD": avgGroups[key]}
})
console.log(avgList)
function computeX(d, i) {
return 0
}
function computeHeight(d, i) {
return 8
}
function computeWidth(d, i) {
return d.avgGRD *50
}
function computeY(d, i) {
return 10 * i
}
function computeColor(d, i) {
return 'teal'
}
function computeLabel(d, i) {
return d.name
}
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: 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')
Use the warmup exercise as the template to produce an answer here. Remove this question if you work as a unit of two.