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="161.85"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="161.85"
      y="0"
      height="378"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="181.85"
      y="0"
      height="139"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="201.85"
      y="0"
      height="400"
      width="28.650000000000002"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="230.5"
      y="0"
      height="51"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="250.5"
      y="0"
      height="96"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="270.5"
      y="0"
      height="176"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="290.5"
      y="0"
      height="241"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="310.5"
      y="0"
      height="30"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="330.5"
      y="0"
      height="19"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="350.5"
      y="0"
      height="60"
      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, 'CrsPBAColl')

var counts = _.map(groups, function(value, key) {
    return {'name': key, 'count': _.pluck(value, 'Course').length}
})

console.log(counts)

var x = 0

function computeX(d, i) {
    return x
}

function computeHeight(d, i) {
    return d.count >= 400 ? 400 : d.count
}

function computeWidth(d, i) {
    var width = d.count < 400 ? 20 : (d.count/400) * 20
    x = x + width
    return width
}

function computeY(d, i) {
    return 0
}

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":0,"height":400,"width":161.85,"color":"red"},{"x":161.85,"y":0,"height":378,"width":20,"color":"red"},{"x":181.85,"y":0,"height":139,"width":20,"color":"red"},{"x":201.85,"y":0,"height":400,"width":28.650000000000002,"color":"red"},{"x":230.5,"y":0,"height":51,"width":20,"color":"red"},{"x":250.5,"y":0,"height":96,"width":20,"color":"red"},{"x":270.5,"y":0,"height":176,"width":20,"color":"red"},{"x":290.5,"y":0,"height":241,"width":20,"color":"red"},{"x":310.5,"y":0,"height":30,"width":20,"color":"red"},{"x":330.5,"y":0,"height":19,"width":20,"color":"red"},{"x":350.5,"y":0,"height":60,"width":20,"color":"red"}]