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:3;
stroke:rgb(0,0,0)" />
<text x="0" y="76.30000000000001">AS</text>
<text x="0" y="66.30000000000001">3237</text>
<rect x="50"
y="362.2"
height="37.8"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text x="50" y="362.2">BU</text>
<text x="50" y="352.2">378</text>
<rect x="100"
y="386.1"
height="13.9"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text x="100" y="386.1">EB</text>
<text x="100" y="376.1">139</text>
<rect x="150"
y="342.7"
height="57.3"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text x="150" y="342.7">EN</text>
<text x="150" y="332.7">573</text>
<rect x="200"
y="394.9"
height="5.1"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text x="200" y="394.9">GR</text>
<text x="200" y="384.9">51</text>
<rect x="250"
y="390.4"
height="9.6"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text x="250" y="390.4">JR</text>
<text x="250" y="380.4">96</text>
<rect x="300"
y="382.4"
height="17.6"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text x="300" y="382.4">LW</text>
<text x="300" y="372.4">176</text>
<rect x="350"
y="375.9"
height="24.1"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text x="350" y="375.9">MB</text>
<text x="350" y="365.9">241</text>
<rect x="400"
y="397"
height="3"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text x="400" y="397">XX</text>
<text x="400" y="387">30</text>
<rect x="450"
y="398.1"
height="1.9"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text x="450" y="398.1">undefined</text>
<text x="450" y="388.1">19</text>
<rect x="500"
y="394"
height="6"
width="20"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<text x="500" y="394">AP</text>
<text x="500" y="384">60</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>
<text x="${d.x}" y="${d.y-10}">${d.label.count}</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
var countsJson=_.mapValues(groups, function(group){
return _.size(group)
})
var keys=_.keys(countsJson)
var counts=_.map(keys, function(key){
return {"name": key, "count": countsJson[key]}
})
// This array should have a lot more elements.
/*var counts = [{"name": "AS","count": 3237},
{"name": "BU","count": 378},
{"name": "EB","count": 139},
{"name": "EN","count": 573}]*/
console.log(counts)
// TODO: modify the code below to produce a nice vertical bar charts
function computeX(d, i) {
return 50*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'
}
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: 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')