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.
<rect x="0"
y="76.30000000000001"
height="323.7"
width="20"
style="fill:red;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="0" y="66.30000000000001">
AS
</text>
<rect x="40"
y="362.2"
height="37.8"
width="20"
style="fill:red;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="40" y="352.2">
BU
</text>
<rect x="80"
y="386.1"
height="13.9"
width="20"
style="fill:red;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="80" y="376.1">
EB
</text>
<rect x="120"
y="342.7"
height="57.3"
width="20"
style="fill:red;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="120" y="332.7">
EN
</text>
<rect x="160"
y="394.9"
height="5.1"
width="20"
style="fill:red;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="160" y="384.9">
GR
</text>
<rect x="200"
y="390.4"
height="9.6"
width="20"
style="fill:red;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="200" y="380.4">
JR
</text>
<rect x="240"
y="382.4"
height="17.6"
width="20"
style="fill:red;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="240" y="372.4">
LW
</text>
<rect x="280"
y="375.9"
height="24.1"
width="20"
style="fill:red;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="280" y="365.9">
MB
</text>
<rect x="320"
y="397"
height="3"
width="20"
style="fill:red;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="320" y="387">
XX
</text>
<rect x="360"
y="398.1"
height="1.9"
width="20"
style="fill:red;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="360" y="388.1">
un
</text>
<rect x="400"
y="394"
height="6"
width="20"
style="fill:red;
stroke-width:1;
stroke:rgb(0,0,0)" />
<text x="400" y="384">
AP
</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.x}" y="${d.y - 10}">
${d.label}
</text>var groups = _.groupBy(data, function(d){
return d['CrsPBAColl']
})
var count = _.mapValues(groups, function(g) {
return _.size(g)
})
var keys = _.keys(count)
var final = _.map(keys, function(key) {
return {"name": key, "count": count[key]}
})
console.log(final)
function computeX(d, i) {
return 40 * i
}
function computeHeight(d, i) {
return d.count / 10
}
function computeWidth(d, i) {
return 20
}
function computeY(d, i) {
return 400 - (d.count / 10)
}
function computeColor(d, i) {
return 'red'
}
function computeLabel(d, i) {
return d.name.substring(0,2)
}
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)
}
})
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')