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="20"
      width="100"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="0"
      y="20"
      height="20"
      width="120"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="0"
      y="40"
      height="20"
      width="140"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="0"
      y="60"
      height="20"
      width="160"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="0"
      y="80"
      height="20"
      width="180"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="0"
      y="100"
      height="20"
      width="200"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="0"
      y="120"
      height="20"
      width="220"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="0"
      y="140"
      height="20"
      width="240"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="0"
      y="160"
      height="20"
      width="260"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="0"
      y="180"
      height="20"
      width="280"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="0"
      y="200"
      height="20"
      width="300"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />

Solution: SVG Template

<rect x="0"
      y="${d.y}"
      height="20"
      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']
})

// 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 = _.pairs(groups)

<!-- console.log(counts) -->

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

function computeX(d, i) {
    return 0
}

function computeHeight(d, i) {
    return 20
}

function computeWidth(d, i) {
    return 20 * i + 100
}

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

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

[{"x":0,"y":0,"height":20,"width":100,"color":"red"},{"x":0,"y":20,"height":20,"width":120,"color":"red"},{"x":0,"y":40,"height":20,"width":140,"color":"red"},{"x":0,"y":60,"height":20,"width":160,"color":"red"},{"x":0,"y":80,"height":20,"width":180,"color":"red"},{"x":0,"y":100,"height":20,"width":200,"color":"red"},{"x":0,"y":120,"height":20,"width":220,"color":"red"},{"x":0,"y":140,"height":20,"width":240,"color":"red"},{"x":0,"y":160,"height":20,"width":260,"color":"red"},{"x":0,"y":180,"height":20,"width":280,"color":"red"},{"x":0,"y":200,"height":20,"width":300,"color":"red"}]