book

Warmup

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.

What is the distribution of courses across colleges?[top]

Viz

<rect x="0"
      y="0"
      height="323.7"
      width="10"
      style="fill:green;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="10"
      y="0"
      height="37.8"
      width="10"
      style="fill:green;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="20"
      y="0"
      height="13.9"
      width="10"
      style="fill:green;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="30"
      y="0"
      height="57.3"
      width="10"
      style="fill:green;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="40"
      y="0"
      height="5.1"
      width="10"
      style="fill:green;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="50"
      y="0"
      height="9.6"
      width="10"
      style="fill:green;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="60"
      y="0"
      height="17.6"
      width="10"
      style="fill:green;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="70"
      y="0"
      height="24.1"
      width="10"
      style="fill:green;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="80"
      y="0"
      height="3"
      width="10"
      style="fill:green;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="90"
      y="0"
      height="1.9"
      width="10"
      style="fill:green;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="100"
      y="0"
      height="6"
      width="10"
      style="fill:green;
             stroke-width:3;
             stroke:rgb(0,0,0)" />

Solution: SVG Template

<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)" />

Solution: Javascript

var groups = _.groupBy(data, function(d){
    return d['CrsPBAColl']
})
var map = _.map(groups,function(x, value){
    return {"name": value, "count": _.pluck(x,'Course').length};
});
console.log(map);

// 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 = {"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 i*10;
}

function computeHeight(d, i) {

    return d.count/10 ;
}

function computeWidth(d, i) {
    return 10;
}

function computeY(d, i) {
    return 0;
}

function computeColor(d, i) {
    return 'green'
}

var viz = _.map(map, function(d, i){
            return {
                x: computeX(d, i),
                y: computeY(d, i),
                height: computeHeight(d, i),
                width: computeWidth(d, i),
                color: computeColor(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')

Console

[{"name":"AS","count":3237},{"name":"BU","count":378},{"name":"EB","count":139},{"name":"EN","count":573},{"name":"GR","count":51},{"name":"JR","count":96},{"name":"LW","count":176},{"name":"MB","count":241},{"name":"XX","count":30},{"name":"undefined","count":19},{"name":"AP","count":60}]

[{"x":0,"y":0,"height":323.7,"width":10,"color":"green"},{"x":10,"y":0,"height":37.8,"width":10,"color":"green"},{"x":20,"y":0,"height":13.9,"width":10,"color":"green"},{"x":30,"y":0,"height":57.3,"width":10,"color":"green"},{"x":40,"y":0,"height":5.1,"width":10,"color":"green"},{"x":50,"y":0,"height":9.6,"width":10,"color":"green"},{"x":60,"y":0,"height":17.6,"width":10,"color":"green"},{"x":70,"y":0,"height":24.1,"width":10,"color":"green"},{"x":80,"y":0,"height":3,"width":10,"color":"green"},{"x":90,"y":0,"height":1.9,"width":10,"color":"green"},{"x":100,"y":0,"height":6,"width":10,"color":"green"}]