Use only Javascript and SVG to produce a data analysis / visualization report.
This report is prepared by
<g transform="translate(0 0)">
<rect x="0"
width="327.218378831633"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">LEC - Lecture</text>
<text transform="translate(329.218378831633 15)">3.17</text>
</g>
<g transform="translate(0 20)">
<rect x="0"
width="351.1462962397056"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">SEM - Seminar</text>
<text transform="translate(353.1462962397056 15)">3.4</text>
</g>
<g transform="translate(0 40)">
<rect x="0"
width="400"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">INT - Internship</text>
<text transform="translate(402 15)">3.88</text>
</g>
<g transform="translate(0 60)">
<rect x="0"
width="395.11334328763405"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">PRA - Practicum</text>
<text transform="translate(397.11334328763405 15)">3.83</text>
</g>
<g transform="translate(0 80)">
<rect x="0"
width="312.5358457894981"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">MLS - Main Lab</text>
<text transform="translate(314.5358457894981 15)">3.03</text>
</g>
<g transform="translate(0 100)">
<rect x="0"
width="387.8919505904709"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">OTH - Other</text>
<text transform="translate(389.8919505904709 15)">3.76</text>
</g>
<g transform="translate(0 120)">
<rect x="0"
width="379.42132143341934"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">STU - Studio</text>
<text transform="translate(381.42132143341934 15)">3.68</text>
</g>
<g transform="translate(0 140)">
<rect x="0"
width="374.13691688158906"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">FLD - Field</text>
<text transform="translate(376.13691688158906 15)">3.63</text>
</g>
<g transform="translate(0 160)">
<rect x="0"
width="386.8603230623049"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">IND - Ind Study</text>
<text transform="translate(388.8603230623049 15)">3.75</text>
</g>
<g transform="translate(0 180)">
<rect x="0"
width="364.88665671236595"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">CLN - Clinical</text>
<text transform="translate(366.88665671236595 15)">3.54</text>
</g>
<g transform="translate(0 200)">
<rect x="0"
width="343.87584272204873"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">LAB - Laboratory</text>
<text transform="translate(345.87584272204873 15)">3.33</text>
</g>
<g transform="translate(0 220)">
<rect x="0"
width="356.11782272295363"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">WKS - Workshop</text>
<text transform="translate(358.11782272295363 15)">3.45</text>
</g>
<g transform="translate(0 240)">
<rect x="0"
width="383.7654404778064"
height="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">DIS - Dissert</text>
<text transform="translate(385.7654404778064 15)">3.72</text>
</g><g transform="translate(0 ${d.y})">
<rect x="${d.x}"
width="${d.width}"
height="${d.height}"
style="fill:${d.color};
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">${d.label}</text>
<text transform="translate(${d.valLabelLoc} 15)">${d.valLabel}</text>
</g>// first I need to remove all entries that don't have an AVG_GRD (I have seen a couple!)
var graded = _.filter(data,function(d){
return d.hasOwnProperty("AVG_GRD");
})
var groups = _.groupBy(graded, 'Activity_Type');
var gpa = _.map(groups, function(d,key){
var avg = _.reduce(d, function(total,e){
return total+e.AVG_GRD;
},0)/_.size(d);
//var avg = 3;
var obj = {}
obj.type = key;
obj.avg = avg;
return obj;
})
console.log(gpa)
function computeX(d, i) {
return 0
}
function computeHeight(d, i) {
return 20
}
function computeWidth(d, i,data) {
var width = 400; // svg window width
var max = _.max(data,function(d){
return d.avg;
});
var scale = width / max.avg;
return d.avg * scale;
return 100
}
function computeY(d, i) {
return 20 * i
}
function computeColor(d, i) {
return 'red'
}
function computeLabel(d){
return d.type
}
function computeValLabel(d) {
return _.round(d.avg,2)
}
function computeValLabelLoc(d,i,data) {
var width = computeWidth(d,i,data);
return width + 2;
}
var viz = _.map(gpa, function(d, i, data){
return {
x: computeX(d, i),
y: computeY(d, i),
height: computeHeight(d, i),
width: computeWidth(d,i,data),
color: computeColor(d, i),
label: computeLabel(d),
valLabel : computeValLabel(d),
valLabelLoc : computeValLabelLoc(d,i,data)
}
})
var result = _.map(viz, function(d){
// invoke the compiled template function on each viz data
return template({d: d})
})
return result.join('\n')<g transform="translate(0 0)">
<rect x="0"
width="331.28285610683804"
height="20"
style="fill:blue;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">AS</text>
<text transform="translate(333.28285610683804 15)">3.13</text>
</g>
<g transform="translate(0 20)">
<rect x="0"
width="331.9882069618812"
height="20"
style="fill:blue;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">BU</text>
<text transform="translate(333.9882069618812 15)">3.13</text>
</g>
<g transform="translate(0 40)">
<rect x="0"
width="400"
height="20"
style="fill:blue;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">EB</text>
<text transform="translate(402 15)">3.77</text>
</g>
<g transform="translate(0 60)">
<rect x="0"
width="361.769454591286"
height="20"
style="fill:blue;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">EN</text>
<text transform="translate(363.769454591286 15)">3.41</text>
</g>
<g transform="translate(0 80)">
<rect x="0"
width="378.9930478816007"
height="20"
style="fill:blue;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">GR</text>
<text transform="translate(380.9930478816007 15)">3.58</text>
</g>
<g transform="translate(0 100)">
<rect x="0"
width="358.74876408938087"
height="20"
style="fill:blue;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">JR</text>
<text transform="translate(360.74876408938087 15)">3.38</text>
</g>
<g transform="translate(0 120)">
<rect x="0"
width="360.51308417375253"
height="20"
style="fill:blue;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">LW</text>
<text transform="translate(362.51308417375253 15)">3.4</text>
</g>
<g transform="translate(0 140)">
<rect x="0"
width="380.0161548181244"
height="20"
style="fill:blue;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">MB</text>
<text transform="translate(382.0161548181244 15)">3.59</text>
</g>
<g transform="translate(0 160)">
<rect x="0"
width="391.00336167688357"
height="20"
style="fill:blue;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">XX</text>
<text transform="translate(393.00336167688357 15)">3.69</text>
</g>
<g transform="translate(0 180)">
<rect x="0"
width="368.08560191593614"
height="20"
style="fill:blue;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">undefined</text>
<text transform="translate(370.08560191593614 15)">3.47</text>
</g>
<g transform="translate(0 200)">
<rect x="0"
width="354.4254481956544"
height="20"
style="fill:blue;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">AP</text>
<text transform="translate(356.4254481956544 15)">3.34</text>
</g><g transform="translate(0 ${d.y})">
<rect x="${d.x}"
width="${d.width}"
height="${d.height}"
style="fill:${d.color};
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(2 15)">${d.label}</text>
<text transform="translate(${d.valLabelLoc} 15)">${d.valLabel}</text>
</g>var graded = _.filter(data,function(d){
return d.hasOwnProperty("AVG_GRD");
})
var groups = _.groupBy(graded, 'CrsPBAColl');
var gpa = _.map(groups, function(d,key){
var avg = _.reduce(d, function(total,e){
return total+e.AVG_GRD;
},0)/_.size(d);
//var avg = 3;
var obj = {}
obj.type = key;
obj.avg = avg;
return obj;
})
console.log(gpa)
function computeX(d, i) {
return 0
}
function computeHeight(d, i) {
return 20
}
function computeWidth(d, i,data) {
var width = 400; // svg window width
var max = _.max(data,function(d){
return d.avg;
});
var scale = width / max.avg;
return d.avg * scale;
return 100
}
function computeY(d, i) {
return 20 * i
}
function computeColor(d, i) {
return 'blue'
}
function computeLabel(d){
return d.type
}
function computeValLabel(d) {
return _.round(d.avg,2)
}
function computeValLabelLoc(d,i,data) {
var width = computeWidth(d,i,data);
return width + 2;
}
var viz = _.map(gpa, function(d, i, data){
return {
x: computeX(d, i),
y: computeY(d, i),
height: computeHeight(d, i),
width: computeWidth(d,i,data),
color: computeColor(d, i),
label: computeLabel(d),
valLabel : computeValLabel(d),
valLabelLoc : computeValLabelLoc(d,i,data)
}
})
var result = _.map(viz, function(d){
// invoke the compiled template function on each viz data
return template({d: d})
})
return result.join('\n')<circle cx="133.20000000000002"
cy="250.99999999999997"
r="4"
stroke-width="1"
fill="yellow" />
<circle cx="132"
cy="187.5"
r="4"
stroke-width="1"
fill="green" />
<circle cx="73.80000000000003"
cy="238.49999999999997"
r="4"
stroke-width="1"
fill="green" />
<circle cx="65.39999999999999"
cy="257"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="73.80000000000003"
cy="247.00000000000003"
r="4"
stroke-width="1"
fill="green" />
<circle cx="107.99999999999999"
cy="209.50000000000003"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="161.4"
cy="158.5"
r="4"
stroke-width="1"
fill="green" />
<circle cx="139.2"
cy="196.5"
r="4"
stroke-width="1"
fill="orange" />
<circle cx="32.400000000000006"
cy="288.5"
r="4"
stroke-width="1"
fill="green" />
<circle cx="207"
cy="122.50000000000001"
r="4"
stroke-width="1"
fill="green" />
<circle cx="159.60000000000002"
cy="141.5"
r="4"
stroke-width="1"
fill="green" />
<circle cx="207"
cy="136.5"
r="4"
stroke-width="1"
fill="orange" />
<circle cx="85.79999999999998"
cy="228.5"
r="4"
stroke-width="1"
fill="green" />
<circle cx="172.79999999999998"
cy="156"
r="4"
stroke-width="1"
fill="green" />
<circle cx="34.20000000000002"
cy="287.5"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="47.400000000000006"
cy="273"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="69.60000000000001"
cy="248"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="113.39999999999998"
cy="192"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="132"
cy="218.5"
r="4"
stroke-width="1"
fill="green" />
<circle cx="82.2"
cy="236"
r="4"
stroke-width="1"
fill="red" />
<circle cx="106.19999999999997"
cy="211.50000000000003"
r="4"
stroke-width="1"
fill="green" />
<circle cx="20.99999999999998"
cy="285.5"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="47.400000000000006"
cy="264.5"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="90"
cy="245.00000000000003"
r="4"
stroke-width="1"
fill="green" />
<circle cx="79.80000000000001"
cy="255.50000000000003"
r="4"
stroke-width="1"
fill="red" />
<circle cx="93.59999999999998"
cy="252.99999999999997"
r="4"
stroke-width="1"
fill="orange" />
<circle cx="84.00000000000003"
cy="236.50000000000003"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="52.2"
cy="275"
r="4"
stroke-width="1"
fill="green" />
<circle cx="28.199999999999985"
cy="284"
r="4"
stroke-width="1"
fill="green" />
<circle cx="45"
cy="272"
r="4"
stroke-width="1"
fill="green" />
<circle cx="62.999999999999986"
cy="255.50000000000003"
r="4"
stroke-width="1"
fill="green" />
<circle cx="13.199999999999985"
cy="300"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="60"
cy="277"
r="4"
stroke-width="1"
fill="orange" />
<circle cx="52.2"
cy="270"
r="4"
stroke-width="1"
fill="green" />
<circle cx="85.79999999999998"
cy="233.5"
r="4"
stroke-width="1"
fill="yellow" />
<circle cx="41.40000000000002"
cy="276"
r="4"
stroke-width="1"
fill="green" />
<circle cx="69.60000000000001"
cy="244.49999999999997"
r="4"
stroke-width="1"
fill="green" />
<circle cx="88.80000000000003"
cy="229.5"
r="4"
stroke-width="1"
fill="green" />
<circle cx="77.4"
cy="251.5"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="54.60000000000001"
cy="282"
r="4"
stroke-width="1"
fill="green" />
<circle cx="78.59999999999998"
cy="269"
r="4"
stroke-width="1"
fill="orange" />
<circle cx="80.99999999999997"
cy="245.5"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="108.59999999999998"
cy="246.5"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="152.4"
cy="138"
r="4"
stroke-width="1"
fill="green" />
<circle cx="108.59999999999998"
cy="235"
r="4"
stroke-width="1"
fill="green" />
<circle cx="80.99999999999997"
cy="257"
r="4"
stroke-width="1"
fill="green" />
<circle cx="91.80000000000001"
cy="229"
r="4"
stroke-width="1"
fill="green" />
<circle cx="47.400000000000006"
cy="281"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="121.79999999999998"
cy="186.5"
r="4"
stroke-width="1"
fill="blue" />
<circle cx="63.59999999999998"
cy="264"
r="4"
stroke-width="1"
fill="green" />
<circle cx="60"
cy="241.5"
r="4"
stroke-width="1"
fill="green" />
<circle cx="62.999999999999986"
cy="279.5"
r="4"
stroke-width="1"
fill="green" />
<circle cx="70.79999999999998"
cy="236.50000000000003"
r="4"
stroke-width="1"
fill="orange" />
<circle cx="57.000000000000014"
cy="244.49999999999997"
r="4"
stroke-width="1"
fill="green" />
<circle cx="26.400000000000023"
cy="276"
r="4"
stroke-width="1"
fill="green" />
<circle cx="99.00000000000003"
cy="242.49999999999997"
r="4"
stroke-width="1"
fill="orange" />
<circle cx="132"
cy="176.5"
r="4"
stroke-width="1"
fill="green" />
<circle cx="122.99999999999999"
cy="195"
r="4"
stroke-width="1"
fill="green" />
<circle cx="114.00000000000003"
cy="231.5"
r="4"
stroke-width="1"
fill="orange" />
<circle cx="42.000000000000014"
cy="285"
r="4"
stroke-width="1"
fill="green" /><circle cx="${d.x}"
cy="${d.y}"
r="4"
stroke-width="1"
fill="${d.color}" />var csci = _.filter(data, function(d){
return (d.CrsPBADept == 'CSCI') &&
d.hasOwnProperty("AvgCourse") &&
d.hasOwnProperty("AvgInstructor")
});
console.log(_.size(csci));
var stuff = _.map(csci, function(d){
var obj = {}
obj.AvgCourse = d.AvgCourse;
obj.AvgInstructor = d.AvgInstructor;
obj.Workload = d.Workload.Hrs_Wk;
return obj;
})
console.log(stuff[0])
function computeX(d, i) {
return (6 - d.AvgCourse)*60;
}
function computeY(d, i) {
return d.AvgInstructor*50;
}
function computeColor(d, i) {
if (d.Workload == "0-3")
return 'yellow';
if (d.Workload == "4-6")
return 'orange';
if (d.Workload == "7-9")
return 'green'
if (d.Workload == "10-12")
return 'blue'
if (d.Workload == "13-15")
return 'red'
return 'black' //16+
}
/*function computeLabel(d){
return d.type
}
function computeValLabel(d) {
return _.round(d.avg,2)
}
function computeValLabelLoc(d,i,data) {
var width = computeWidth(d,i,data);
return width + 2;
} */
var viz = _.map(stuff, function(d, i, data){
return {
x: computeX(d, i),
y: computeY(d, i),
color: computeColor(d, i),
// label: computeLabel(d),
// valLabel : computeValLabel(d),
// valLabelLoc : computeValLabelLoc(d,i,data)
}
})
var result = _.map(viz, function(d){
// invoke the compiled template function on each viz data
return template({d: d})
})
return result.join('\n')