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="400"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="20"
      y="353.29008341056533"
      height="46.70991658943466"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="40"
      y="382.82360210071056"
      height="17.176397899289466"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="60"
      y="329.19369786839667"
      height="70.80630213160333"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="80"
      y="393.6978683966636"
      height="6.302131603336423"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="100"
      y="388.1371640407785"
      height="11.862835959221501"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="120"
      y="378.2514674080939"
      height="21.748532591906084"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="140"
      y="370.2193388940377"
      height="29.78066110596231"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="160"
      y="396.2928637627433"
      height="3.707136237256719"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="180"
      y="397.65214704973744"
      height="2.3478529502625887"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="200"
      y="392.58572752548656"
      height="7.414272474513438"
      width="20"
      style="fill:red;
             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 counts = _.map(groups, function(d, key) {
    var obj = {}
    obj.name = key;
    obj.count = _.size(d);
    return obj;
});


console.log(counts)

// TODO: modify the code below to produce a nice vertical bar charts

function computeX(d, i) {
    return i*20
}

function computeHeight(d, i, data) {
    // max returns an obj, not a number!!
    var maxObj = _.max(data,'count');
    console.log(maxObj);   
    var scale = 400/maxObj.count;
    return d.count * scale;
}

function computeWidth(d, i) {
    return 20 
}

function computeY(d, i,data) {
    return 400 - computeHeight(d,i,data);
}

function computeColor(d, i) {
    return 'red';
}

function computeLabel(d, i) {
    return d.name;
}

var viz = _.map(counts, function(d, i,data){
 
            return {
                x: computeX(d, i),
                y: computeY(d, i,data),
                height: computeHeight(d, i, data),
                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')
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}]
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
{"name":"AS","count":3237}
[{"x":0,"y":0,"height":400,"width":20,"color":"red","label":"AS"},{"x":20,"y":353.29008341056533,"height":46.70991658943466,"width":20,"color":"red","label":"BU"},{"x":40,"y":382.82360210071056,"height":17.176397899289466,"width":20,"color":"red","label":"EB"},{"x":60,"y":329.19369786839667,"height":70.80630213160333,"width":20,"color":"red","label":"EN"},{"x":80,"y":393.6978683966636,"height":6.302131603336423,"width":20,"color":"red","label":"GR"},{"x":100,"y":388.1371640407785,"height":11.862835959221501,"width":20,"color":"red","label":"JR"},{"x":120,"y":378.2514674080939,"height":21.748532591906084,"width":20,"color":"red","label":"LW"},{"x":140,"y":370.2193388940377,"height":29.78066110596231,"width":20,"color":"red","label":"MB"},{"x":160,"y":396.2928637627433,"height":3.707136237256719,"width":20,"color":"red","label":"XX"},{"x":180,"y":397.65214704973744,"height":2.3478529502625887,"width":20,"color":"red","label":"undefined"},{"x":200,"y":392.58572752548656,"height":7.414272474513438,"width":20,"color":"red","label":"AP"}]