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="300"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="20"
      y="264.967562557924"
      height="35.032437442075995"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="40"
      y="287.1177015755329"
      height="12.882298424467098"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="60"
      y="246.89527340129752"
      height="53.1047265987025"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="80"
      y="295.2734012974977"
      height="4.726598702502317"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="100"
      y="291.10287303058385"
      height="8.897126969416126"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="120"
      y="283.6886005560704"
      height="16.311399443929563"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="140"
      y="277.6645041705283"
      height="22.335495829471732"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="160"
      y="297.2196478220575"
      height="2.780352177942539"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="180"
      y="298.23911028730305"
      height="1.7608897126969416"
      width="20"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="200"
      y="294.4392956441149"
      height="5.560704355885078"
      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 new_obj = {}
    new_obj.name = key
    new_obj.count = _.size(d)
    return new_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) {
    var obj = _.max(data,'count') 
    return d.count * (300/obj.count)
}

function computeWidth(d, i) {
    return 20 
}

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

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



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)
            }
         })
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":300,"width":20,"color":"red"},{"x":20,"y":264.967562557924,"height":35.032437442075995,"width":20,"color":"red"},{"x":40,"y":287.1177015755329,"height":12.882298424467098,"width":20,"color":"red"},{"x":60,"y":246.89527340129752,"height":53.1047265987025,"width":20,"color":"red"},{"x":80,"y":295.2734012974977,"height":4.726598702502317,"width":20,"color":"red"},{"x":100,"y":291.10287303058385,"height":8.897126969416126,"width":20,"color":"red"},{"x":120,"y":283.6886005560704,"height":16.311399443929563,"width":20,"color":"red"},{"x":140,"y":277.6645041705283,"height":22.335495829471732,"width":20,"color":"red"},{"x":160,"y":297.2196478220575,"height":2.780352177942539,"width":20,"color":"red"},{"x":180,"y":298.23911028730305,"height":1.7608897126969416,"width":20,"color":"red"},{"x":200,"y":294.4392956441149,"height":5.560704355885078,"width":20,"color":"red"}]