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="0"
height="323.7"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(0 340)">
AS
</text>
<rect x="30"
y="285.9"
height="37.8"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(30 340)">
BU
</text>
<rect x="60"
y="309.8"
height="13.9"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(60 340)">
EB
</text>
<rect x="90"
y="266.4"
height="57.3"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(90 340)">
EN
</text>
<rect x="120"
y="318.59999999999997"
height="5.1"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(120 340)">
GR
</text>
<rect x="150"
y="314.09999999999997"
height="9.6"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(150 340)">
JR
</text>
<rect x="180"
y="306.09999999999997"
height="17.6"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(180 340)">
LW
</text>
<rect x="210"
y="299.59999999999997"
height="24.1"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(210 340)">
MB
</text>
<rect x="240"
y="320.7"
height="3"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(240 340)">
XX
</text>
<rect x="270"
y="321.8"
height="1.9"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(270 340)">
undefined
</text>
<rect x="300"
y="317.7"
height="6"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(300 340)">
AP
</text><rect x="${d.x}"
y="${d.y}"
height="${d.height}"
width="20"
style="fill:${d.color};
stroke-width:3;
stroke:rgb(0,0,0)" />
<text transform="translate(${d.x} 340)">
${d.label}
</text>var groups = _.groupBy(data, function(d){
return d['CrsPBAColl']
})
// TODO: add real code to convert groups (which is an object) into an array like below
// This array should have a lot more elements.
var counts = _.mapValues(groups, function(n){return _.size(n)})
var counts = _.map(counts, function(value,key){return {"name": key , "value": value}})
console.log(counts)
// TODO: modify the code below to produce a nice vertical bar charts
function computeLabel(d, i){
return d.name
}
function computeX(d, i) {
return i * 20 + (i * 20)/2
}
function computeHeight(d, i) {
return d.value/10
}
function computeWidth(d, i) {
return 20 * i + 100
}
function computeY(d, i) {
return 323.7 - d.value/10
}
function computeColor(d, i) {
return 'red'
}
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')