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="76.30000000000001"
      height="323.7"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="20"
      y="362.2"
      height="37.8"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="40"
      y="386.1"
      height="13.9"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="60"
      y="342.7"
      height="57.3"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="80"
      y="394.9"
      height="5.1"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="100"
      y="390.4"
      height="9.6"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="120"
      y="382.4"
      height="17.6"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="140"
      y="375.9"
      height="24.1"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="160"
      y="397"
      height="3"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="180"
      y="398.1"
      height="1.9"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="200"
      y="394"
      height="6"
      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 counts = _(data).groupBy('CrsPBAColl').map(function(group, name){
    return {
    name : name,
    count : group.length};
}).value();

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) {
    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)
            }
         })
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":76.30000000000001,"height":323.7,"width":20,"color":"red"},{"x":20,"y":362.2,"height":37.8,"width":20,"color":"red"},{"x":40,"y":386.1,"height":13.9,"width":20,"color":"red"},{"x":60,"y":342.7,"height":57.3,"width":20,"color":"red"},{"x":80,"y":394.9,"height":5.1,"width":20,"color":"red"},{"x":100,"y":390.4,"height":9.6,"width":20,"color":"red"},{"x":120,"y":382.4,"height":17.6,"width":20,"color":"red"},{"x":140,"y":375.9,"height":24.1,"width":20,"color":"red"},{"x":160,"y":397,"height":3,"width":20,"color":"red"},{"x":180,"y":398.1,"height":1.9,"width":20,"color":"red"},{"x":200,"y":394,"height":6,"width":20,"color":"red"}]