book

Pokemon Viz

Compare attacks as a horizontal barchart[top]

Data [{"Name":"Squirtle","Type":"WATER","HP":44,"Attack":48,"Defense":65,"Special Attack":50,"Special Defense":64,"Speed":43},{"Name":"Mega Charizard Y","Type":"FLYING","HP":78,"Attack":104,"Defense":78,"Special Attack":159,"Special Defense":115,"Speed":100},{"Name":"Charmander","Type":"FIRE","HP":39,"Attack":52,"Defense":43,"Special Attack":60,"Special Defense":50,"Speed":65},{"Name":"Mega Venusaur","Type":"GRASS","HP":80,"Attack":100,"Defense":123,"Special Attack":122,"Special Defense":120,"Speed":80},{"Name":"Venusaur","Type":"GRASS","HP":80,"Attack":82,"Defense":83,"Special Attack":100,"Special Defense":100,"Speed":80},{"Name":"Ivysaur","Type":"GRASS","HP":60,"Attack":62,"Defense":63,"Special Attack":80,"Special Defense":80,"Speed":60},{"Name":"Bulbasaur","Type":"GRASS","HP":45,"Attack":49,"Defense":49,"Special Attack":65,"Special Defense":65,"Speed":45}]
Desired Viz
Actual Viz 
<g transform="translate(0 0)">
    <rect
         width="48"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 20)">
    <rect
         width="104"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 40)">
    <rect
         width="52"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 60)">
    <rect
         width="100"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 80)">
    <rect
         width="82"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 100)">
    <rect
         width="62"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 120)">
    <rect
         width="49"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 0)">
    <rect
         width="48"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 20)">
    <rect
         width="104"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 40)">
    <rect
         width="52"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 60)">
    <rect
         width="100"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 80)">
    <rect
         width="82"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 100)">
    <rect
         width="62"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0 120)">
    <rect
         width="49"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
Solution: SVG Template
<g transform="translate(0 ${d.y})">
    <rect
         width="${d.width}"
         height="20"
         style="fill:${d.color};
                stroke-width:3;
                stroke:rgb(0,0,0)" />
</g>
Solution: Javascript
function computeX(d, i) {
    return 0
}

function computeWidth(d, i) {
    //return i * 20 + 50
    return (d['Attack'])
}

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

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

var viz = _.map(data, function(d, i){
            return {
                x: computeX(d, i),
                y: computeY(d, i),
                width: computeWidth(d, i),
                //height: computeHeight(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,"width":48,"color":"red"},{"x":0,"y":20,"width":104,"color":"red"},{"x":0,"y":40,"width":52,"color":"red"},{"x":0,"y":60,"width":100,"color":"red"},{"x":0,"y":80,"width":82,"color":"red"},{"x":0,"y":100,"width":62,"color":"red"},{"x":0,"y":120,"width":49,"color":"red"}]

Place a label over each bar[top]

Data [{"Name":"Squirtle","Type":"WATER","HP":44,"Attack":48,"Defense":65,"Special Attack":50,"Special Defense":64,"Speed":43},{"Name":"Mega Charizard Y","Type":"FLYING","HP":78,"Attack":104,"Defense":78,"Special Attack":159,"Special Defense":115,"Speed":100},{"Name":"Charmander","Type":"FIRE","HP":39,"Attack":52,"Defense":43,"Special Attack":60,"Special Defense":50,"Speed":65},{"Name":"Mega Venusaur","Type":"GRASS","HP":80,"Attack":100,"Defense":123,"Special Attack":122,"Special Defense":120,"Speed":80},{"Name":"Venusaur","Type":"GRASS","HP":80,"Attack":82,"Defense":83,"Special Attack":100,"Special Defense":100,"Speed":80},{"Name":"Ivysaur","Type":"GRASS","HP":60,"Attack":62,"Defense":63,"Special Attack":80,"Special Defense":80,"Speed":60},{"Name":"Bulbasaur","Type":"GRASS","HP":45,"Attack":49,"Defense":49,"Special Attack":65,"Special Defense":65,"Speed":45}]
Desired Viz Squirtle Mega Charizard Y Charmander Mega Venusaur Venusaur Ivysaur Bulbasaur
Actual Viz Squirtle Mega Charizard Y Charmander Mega Venusaur Venusaur Ivysaur Bulbasaur 
<g transform="translate(0 0)">
    <rect         
         width="48"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Squirtle
    </text>
</g>
<g transform="translate(0 20)">
    <rect         
         width="104"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Mega Charizard Y
    </text>
</g>
<g transform="translate(0 40)">
    <rect         
         width="52"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Charmander
    </text>
</g>
<g transform="translate(0 60)">
    <rect         
         width="100"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Mega Venusaur
    </text>
</g>
<g transform="translate(0 80)">
    <rect         
         width="82"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Venusaur
    </text>
</g>
<g transform="translate(0 100)">
    <rect         
         width="62"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Ivysaur
    </text>
</g>
<g transform="translate(0 120)">
    <rect         
         width="49"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Bulbasaur
    </text>
</g>
<g transform="translate(120 0)">
    <rect 
         title=""        
         width="48"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Squirtle</text>          
</g>
<g transform="translate(120 20)">
    <rect 
         title=""        
         width="104"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Mega Charizard Y</text>          
</g>
<g transform="translate(120 40)">
    <rect 
         title=""        
         width="52"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Charmander</text>          
</g>
<g transform="translate(120 60)">
    <rect 
         title=""        
         width="100"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Mega Venusaur</text>          
</g>
<g transform="translate(120 80)">
    <rect 
         title=""        
         width="82"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Venusaur</text>          
</g>
<g transform="translate(120 100)">
    <rect 
         title=""        
         width="62"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Ivysaur</text>          
</g>
<g transform="translate(120 120)">
    <rect 
         title=""        
         width="49"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Bulbasaur</text>          
</g>
Solution: SVG Template
<g transform="translate(120 ${d.y})">
    <rect 
         title="${d.name}"        
         width="${d.width}"
         height="20"
         style="fill:${d.color};
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> ${d.label}</text>          
</g>
Solution: Javascript
function computeX(d, i) {
    return 0
}

function computeWidth(d, i) {
    //return i * 20 + 50
    return (d['Attack'])
}

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

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

function computeLabel(d, i){
  return (d['Name'])
}

var viz = _.map(data, function(d, i){
            return {
                x: computeX(d, i),
                y: computeY(d, i),
                width: computeWidth(d, i),
                //height: computeHeight(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
[{"x":0,"y":0,"width":48,"color":"red","label":"Squirtle"},{"x":0,"y":20,"width":104,"color":"red","label":"Mega Charizard Y"},{"x":0,"y":40,"width":52,"color":"red","label":"Charmander"},{"x":0,"y":60,"width":100,"color":"red","label":"Mega Venusaur"},{"x":0,"y":80,"width":82,"color":"red","label":"Venusaur"},{"x":0,"y":100,"width":62,"color":"red","label":"Ivysaur"},{"x":0,"y":120,"width":49,"color":"red","label":"Bulbasaur"}]

Place a label to the left of each bar[top]

Data [{"Name":"Squirtle","Type":"WATER","HP":44,"Attack":48,"Defense":65,"Special Attack":50,"Special Defense":64,"Speed":43},{"Name":"Mega Charizard Y","Type":"FLYING","HP":78,"Attack":104,"Defense":78,"Special Attack":159,"Special Defense":115,"Speed":100},{"Name":"Charmander","Type":"FIRE","HP":39,"Attack":52,"Defense":43,"Special Attack":60,"Special Defense":50,"Speed":65},{"Name":"Mega Venusaur","Type":"GRASS","HP":80,"Attack":100,"Defense":123,"Special Attack":122,"Special Defense":120,"Speed":80},{"Name":"Venusaur","Type":"GRASS","HP":80,"Attack":82,"Defense":83,"Special Attack":100,"Special Defense":100,"Speed":80},{"Name":"Ivysaur","Type":"GRASS","HP":60,"Attack":62,"Defense":63,"Special Attack":80,"Special Defense":80,"Speed":60},{"Name":"Bulbasaur","Type":"GRASS","HP":45,"Attack":49,"Defense":49,"Special Attack":65,"Special Defense":65,"Speed":45}]
Desired Viz Squirtle Mega Charizard Y Charmander Mega Venusaur Venusaur Ivysaur Bulbasaur
Actual Viz Squirtle Mega Charizard Y Charmander Mega Venusaur Venusaur Ivysaur Bulbasaur 
<g transform="translate(0 0)">
    <rect
         x="120"
         width="48"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Squirtle
    </text>
</g>
<g transform="translate(0 20)">
    <rect
         x="120"
         width="104"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Mega Charizard Y
    </text>
</g>
<g transform="translate(0 40)">
    <rect
         x="120"
         width="52"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Charmander
    </text>
</g>
<g transform="translate(0 60)">
    <rect
         x="120"
         width="100"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Mega Venusaur
    </text>
</g>
<g transform="translate(0 80)">
    <rect
         x="120"
         width="82"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Venusaur
    </text>
</g>
<g transform="translate(0 100)">
    <rect
         x="120"
         width="62"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Ivysaur
    </text>
</g>
<g transform="translate(0 120)">
    <rect
         x="120"
         width="49"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Bulbasaur
    </text>
</g>
<g transform="translate(120 0)">
    <rect 
         title=""        
         width="48"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform ="translate(0 15)"> 
        Squirtle 
    </text>          
</g>
<g transform="translate(120 20)">
    <rect 
         title=""        
         width="104"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform ="translate(0 15)"> 
        Mega Charizard Y 
    </text>          
</g>
<g transform="translate(120 40)">
    <rect 
         title=""        
         width="52"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform ="translate(0 15)"> 
        Charmander 
    </text>          
</g>
<g transform="translate(120 60)">
    <rect 
         title=""        
         width="100"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform ="translate(0 15)"> 
        Mega Venusaur 
    </text>          
</g>
<g transform="translate(120 80)">
    <rect 
         title=""        
         width="82"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform ="translate(0 15)"> 
        Venusaur 
    </text>          
</g>
<g transform="translate(120 100)">
    <rect 
         title=""        
         width="62"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform ="translate(0 15)"> 
        Ivysaur 
    </text>          
</g>
<g transform="translate(120 120)">
    <rect 
         title=""        
         width="49"
         height="20"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform ="translate(0 15)"> 
        Bulbasaur 
    </text>          
</g>
Solution: SVG Template
<g transform="translate(120 ${d.y})">
    <rect 
         title="${d.name}"        
         width="${d.width}"
         height="20"
         style="fill:${d.color};
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform ="translate(0 15)"> 
        ${d.label} 
    </text>          
</g>
Solution: Javascript
function computeX(d, i) {
    return 150
}

function computeWidth(d, i) {
    //return i * 20 + 50
    return (d['Attack'])
}

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

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

function computeLabel(d, i){
  return (d['Name'])
}

var viz = _.map(data, function(d, i){
            return {
                x: computeX(d, i),
                y: computeY(d, i),
                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
[{"x":150,"y":0,"width":48,"color":"red","label":"Squirtle"},{"x":150,"y":20,"width":104,"color":"red","label":"Mega Charizard Y"},{"x":150,"y":40,"width":52,"color":"red","label":"Charmander"},{"x":150,"y":60,"width":100,"color":"red","label":"Mega Venusaur"},{"x":150,"y":80,"width":82,"color":"red","label":"Venusaur"},{"x":150,"y":100,"width":62,"color":"red","label":"Ivysaur"},{"x":150,"y":120,"width":49,"color":"red","label":"Bulbasaur"}]

Compare attack and defense points side by side[top]

Data [{"Name":"Squirtle","Type":"WATER","HP":44,"Attack":48,"Defense":65,"Special Attack":50,"Special Defense":64,"Speed":43},{"Name":"Mega Charizard Y","Type":"FLYING","HP":78,"Attack":104,"Defense":78,"Special Attack":159,"Special Defense":115,"Speed":100},{"Name":"Charmander","Type":"FIRE","HP":39,"Attack":52,"Defense":43,"Special Attack":60,"Special Defense":50,"Speed":65},{"Name":"Mega Venusaur","Type":"GRASS","HP":80,"Attack":100,"Defense":123,"Special Attack":122,"Special Defense":120,"Speed":80},{"Name":"Venusaur","Type":"GRASS","HP":80,"Attack":82,"Defense":83,"Special Attack":100,"Special Defense":100,"Speed":80},{"Name":"Ivysaur","Type":"GRASS","HP":60,"Attack":62,"Defense":63,"Special Attack":80,"Special Defense":80,"Speed":60},{"Name":"Bulbasaur","Type":"GRASS","HP":45,"Attack":49,"Defense":49,"Special Attack":65,"Special Defense":65,"Speed":45}]
Desired Viz Squirtle Mega Charizard Y Charmander Mega Venusaur Venusaur Ivysaur Bulbasaur
Actual Viz Squirtle Mega Charizard Y Charmander Mega Venusaur Venusaur Ivysaur Bulbasaur 
<g transform="translate(120 0)">
    <rect
         x="-48"
         width="48"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <rect
         x="0"
         width="65"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />

    <text transform="translate(0 15)">
        Squirtle
    </text>
</g>
<g transform="translate(120 20)">
    <rect
         x="-104"
         width="104"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <rect
         x="0"
         width="78"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />

    <text transform="translate(0 15)">
        Mega Charizard Y
    </text>
</g>
<g transform="translate(120 40)">
    <rect
         x="-52"
         width="52"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <rect
         x="0"
         width="43"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />

    <text transform="translate(0 15)">
        Charmander
    </text>
</g>
<g transform="translate(120 60)">
    <rect
         x="-100"
         width="100"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <rect
         x="0"
         width="123"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />

    <text transform="translate(0 15)">
        Mega Venusaur
    </text>
</g>
<g transform="translate(120 80)">
    <rect
         x="-82"
         width="82"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <rect
         x="0"
         width="83"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />

    <text transform="translate(0 15)">
        Venusaur
    </text>
</g>
<g transform="translate(120 100)">
    <rect
         x="-62"
         width="62"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <rect
         x="0"
         width="63"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />

    <text transform="translate(0 15)">
        Ivysaur
    </text>
</g>
<g transform="translate(120 120)">
    <rect
         x="-49"
         width="49"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <rect
         x="0"
         width="49"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />

    <text transform="translate(0 15)">
        Bulbasaur
    </text>
</g>
<g transform="translate(120 0)">
    <rect 
         x= ="48"      
         width="48"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
     <rect 
         x= ="65"      
         width="65"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />            
    <text transform = "translate(0 15)">
        Squirtle
    </text>          
</g>
<g transform="translate(120 20)">
    <rect 
         x= ="104"      
         width="104"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
     <rect 
         x= ="78"      
         width="78"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />            
    <text transform = "translate(0 15)">
        Mega Charizard Y
    </text>          
</g>
<g transform="translate(120 40)">
    <rect 
         x= ="52"      
         width="52"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
     <rect 
         x= ="43"      
         width="43"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />            
    <text transform = "translate(0 15)">
        Charmander
    </text>          
</g>
<g transform="translate(120 60)">
    <rect 
         x= ="100"      
         width="100"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
     <rect 
         x= ="123"      
         width="123"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />            
    <text transform = "translate(0 15)">
        Mega Venusaur
    </text>          
</g>
<g transform="translate(120 80)">
    <rect 
         x= ="82"      
         width="82"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
     <rect 
         x= ="83"      
         width="83"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />            
    <text transform = "translate(0 15)">
        Venusaur
    </text>          
</g>
<g transform="translate(120 100)">
    <rect 
         x= ="62"      
         width="62"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
     <rect 
         x= ="63"      
         width="63"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />            
    <text transform = "translate(0 15)">
        Ivysaur
    </text>          
</g>
<g transform="translate(120 120)">
    <rect 
         x= ="49"      
         width="49"
         height="20"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
     <rect 
         x= ="49"      
         width="49"
         height="20"
         style="fill:blue;
                stroke-width:1;
                stroke:rgb(0,0,0)" />            
    <text transform = "translate(0 15)">
        Bulbasaur
    </text>          
</g>
Solution: SVG Template
<g transform="translate(120 ${d.y})">
    <rect 
         x= ="${d.widthA}"      
         width="${d.widthA}"
         height="20"
         style="fill:${d.colorA};
                stroke-width:1;
                stroke:rgb(0,0,0)" />
     <rect 
         x= ="${d.widthD}"      
         width="${d.widthD}"
         height="20"
         style="fill:${d.colorD};
                stroke-width:1;
                stroke:rgb(0,0,0)" />            
    <text transform = "translate(0 15)">
        ${d.label}
    </text>          
</g>
Solution: Javascript
function computeX(d, i) {
    return 120
}

function computeWidthA(d, i) {
    //return i * 20 + 50
    return (d['Attack'])
}
function computeWidthD(d, i) {
    //return i * 20 + 50
    return (d['Defense'])
}

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

function computeColorA(d, i) {
    return 'red'
}
function computeColorD(d, i) {
    return 'blue'
}

function computeLabel(d, i){
  return (d['Name'])
}

var viz = _.map(data, function(d, i){
            return {
                x: computeX(d, i),
                y: computeY(d, i),
                widthA: computeWidthA(d, i),
                widthD: computeWidthD(d, i),
                colorA: computeColorA(d, i),
                colorD: computeColorD(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
[{"x":120,"y":0,"widthA":48,"widthD":65,"colorA":"red","colorD":"blue","label":"Squirtle"},{"x":120,"y":20,"widthA":104,"widthD":78,"colorA":"red","colorD":"blue","label":"Mega Charizard Y"},{"x":120,"y":40,"widthA":52,"widthD":43,"colorA":"red","colorD":"blue","label":"Charmander"},{"x":120,"y":60,"widthA":100,"widthD":123,"colorA":"red","colorD":"blue","label":"Mega Venusaur"},{"x":120,"y":80,"widthA":82,"widthD":83,"colorA":"red","colorD":"blue","label":"Venusaur"},{"x":120,"y":100,"widthA":62,"widthD":63,"colorA":"red","colorD":"blue","label":"Ivysaur"},{"x":120,"y":120,"widthA":49,"widthD":49,"colorA":"red","colorD":"blue","label":"Bulbasaur"}]

Compare attack points and represent defense points using bar heights[top]

Data [{"Name":"Squirtle","Type":"WATER","HP":44,"Attack":48,"Defense":65,"Special Attack":50,"Special Defense":64,"Speed":43},{"Name":"Mega Charizard Y","Type":"FLYING","HP":78,"Attack":104,"Defense":78,"Special Attack":159,"Special Defense":115,"Speed":100},{"Name":"Charmander","Type":"FIRE","HP":39,"Attack":52,"Defense":43,"Special Attack":60,"Special Defense":50,"Speed":65},{"Name":"Mega Venusaur","Type":"GRASS","HP":80,"Attack":100,"Defense":123,"Special Attack":122,"Special Defense":120,"Speed":80},{"Name":"Venusaur","Type":"GRASS","HP":80,"Attack":82,"Defense":83,"Special Attack":100,"Special Defense":100,"Speed":80},{"Name":"Ivysaur","Type":"GRASS","HP":60,"Attack":62,"Defense":63,"Special Attack":80,"Special Defense":80,"Speed":60},{"Name":"Bulbasaur","Type":"GRASS","HP":45,"Attack":49,"Defense":49,"Special Attack":65,"Special Defense":65,"Speed":45}]
Desired Viz Squirtle Mega Charizard Y Charmander Mega Venusaur Venusaur Ivysaur Bulbasaur
Actual Viz Squirtle Mega Charizard Y Charmander Mega Venusaur Venusaur Ivysaur Bulbasaur 
<g transform="translate(0 0)">
    <rect width="48"
         height="65"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Squirtle
    </text>
</g>
<g transform="translate(0 65)">
    <rect width="104"
         height="78"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Mega Charizard Y
    </text>
</g>
<g transform="translate(0 143)">
    <rect width="52"
         height="43"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Charmander
    </text>
</g>
<g transform="translate(0 186)">
    <rect width="100"
         height="123"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Mega Venusaur
    </text>
</g>
<g transform="translate(0 309)">
    <rect width="82"
         height="83"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Venusaur
    </text>
</g>
<g transform="translate(0 392)">
    <rect width="62"
         height="63"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Ivysaur
    </text>
</g>
<g transform="translate(0 455)">
    <rect width="49"
         height="49"
         style="fill:red;
                stroke-width:1;
                stroke:rgb(0,0,0)" />
    <text transform="translate(0 15)">
        Bulbasaur
    </text>
</g>
<g transform="translate(0 0)">
    <rect 
         title=""        
         width="48"
         height="65"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Squirtle</text>          
</g>
<g transform="translate(0 65)">
    <rect 
         title=""        
         width="104"
         height="78"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Mega Charizard Y</text>          
</g>
<g transform="translate(0 143)">
    <rect 
         title=""        
         width="52"
         height="43"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Charmander</text>          
</g>
<g transform="translate(0 186)">
    <rect 
         title=""        
         width="100"
         height="123"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Mega Venusaur</text>          
</g>
<g transform="translate(0 309)">
    <rect 
         title=""        
         width="82"
         height="83"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Venusaur</text>          
</g>
<g transform="translate(0 392)">
    <rect 
         title=""        
         width="62"
         height="63"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Ivysaur</text>          
</g>
<g transform="translate(0 455)">
    <rect 
         title=""        
         width="49"
         height="49"
         style="fill:red;
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> Bulbasaur</text>          
</g>
Solution: SVG Template
<g transform="translate(0 ${d.y})">
    <rect 
         title="${d.name}"        
         width="${d.width}"
         height="${d.height}"
         style="fill:${d.color};
                stroke-width:3;
                stroke:rgb(0,0,0)" />
    <text transform = "translate(0 15)"> ${d.label}</text>          
</g>
Solution: Javascript
function computeX(d, i) {
    return 0
}

function computeWidth(d, i) {
    //return i * 20 + 50
    return (d['Attack'])
}
function computeHeight(d, i) {
    //return i * 20 + 50
    return (d['Defense'])
}

function computeY(d, i) {
    var y = 0
    var array = _.pluck(data, 'Defense')
    for(j=0; j<i; j++){
      y += array[j]
  }
  return y
}

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

function computeLabel(d, i){
  return (d['Name'])
}

var viz = _.map(data, function(d, i){
            return {
                x: computeX(d, i),
                y: computeY(d, i),
                width: computeWidth(d, i),
                height: computeHeight(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
[{"x":0,"y":0,"width":48,"height":65,"color":"red","label":"Squirtle"},{"x":0,"y":65,"width":104,"height":78,"color":"red","label":"Mega Charizard Y"},{"x":0,"y":143,"width":52,"height":43,"color":"red","label":"Charmander"},{"x":0,"y":186,"width":100,"height":123,"color":"red","label":"Mega Venusaur"},{"x":0,"y":309,"width":82,"height":83,"color":"red","label":"Venusaur"},{"x":0,"y":392,"width":62,"height":63,"color":"red","label":"Ivysaur"},{"x":0,"y":455,"width":49,"height":49,"color":"red","label":"Bulbasaur"}]

Compare attack points and represent defense points using colors[top]

Data [{"Name":"Squirtle","Type":"WATER","HP":44,"Attack":48,"Defense":65,"Special Attack":50,"Special Defense":64,"Speed":43},{"Name":"Mega Charizard Y","Type":"FLYING","HP":78,"Attack":104,"Defense":78,"Special Attack":159,"Special Defense":115,"Speed":100},{"Name":"Charmander","Type":"FIRE","HP":39,"Attack":52,"Defense":43,"Special Attack":60,"Special Defense":50,"Speed":65},{"Name":"Mega Venusaur","Type":"GRASS","HP":80,"Attack":100,"Defense":123,"Special Attack":122,"Special Defense":120,"Speed":80},{"Name":"Venusaur","Type":"GRASS","HP":80,"Attack":82,"Defense":83,"Special Attack":100,"Special Defense":100,"Speed":80},{"Name":"Ivysaur","Type":"GRASS","HP":60,"Attack":62,"Defense":63,"Special Attack":80,"Special Defense":80,"Speed":60},{"Name":"Bulbasaur","Type":"GRASS","HP":45,"Attack":49,"Defense":49,"Special Attack":65,"Special Defense":65,"Speed":45}]
Desired Viz Squirtle Mega Charizard Y Charmander Mega Venusaur Venusaur Ivysaur Bulbasaur
Actual Viz Squirtle Mega Charizard Y Charmander Mega Venusaur Venusaur Ivysaur Bulbasaur 
<g transform="translate(0 0)">
    <rect width="48"
         height="20"
         style="fill:rgb(135,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" />    

    <text transform="translate(0 15)">
        Squirtle
    </text>
</g>
<g transform="translate(0 20)">
    <rect width="104"
         height="20"
         style="fill:rgb(162,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" />    

    <text transform="translate(0 15)">
        Mega Charizard Y
    </text>
</g>
<g transform="translate(0 40)">
    <rect width="52"
         height="20"
         style="fill:rgb(89,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" />    

    <text transform="translate(0 15)">
        Charmander
    </text>
</g>
<g transform="translate(0 60)">
    <rect width="100"
         height="20"
         style="fill:rgb(255,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" />    

    <text transform="translate(0 15)">
        Mega Venusaur
    </text>
</g>
<g transform="translate(0 80)">
    <rect width="82"
         height="20"
         style="fill:rgb(172,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" />    

    <text transform="translate(0 15)">
        Venusaur
    </text>
</g>
<g transform="translate(0 100)">
    <rect width="62"
         height="20"
         style="fill:rgb(131,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" />    

    <text transform="translate(0 15)">
        Ivysaur
    </text>
</g>
<g transform="translate(0 120)">
    <rect width="49"
         height="20"
         style="fill:rgb(102,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" />    

    <text transform="translate(0 15)">
        Bulbasaur
    </text>
</g>
<g transform="translate(0 0)">
    <rect width="48"
         height="20"
         style="fill:rgb(135,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" /> 
    <text transform = "translate(0 15)"> Squirtle</text>   
</g>
<g transform="translate(0 20)">
    <rect width="104"
         height="20"
         style="fill:rgb(162,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" /> 
    <text transform = "translate(0 15)"> Mega Charizard Y</text>   
</g>
<g transform="translate(0 40)">
    <rect width="52"
         height="20"
         style="fill:rgb(89,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" /> 
    <text transform = "translate(0 15)"> Charmander</text>   
</g>
<g transform="translate(0 60)">
    <rect width="100"
         height="20"
         style="fill:rgb(255,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" /> 
    <text transform = "translate(0 15)"> Mega Venusaur</text>   
</g>
<g transform="translate(0 80)">
    <rect width="82"
         height="20"
         style="fill:rgb(172,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" /> 
    <text transform = "translate(0 15)"> Venusaur</text>   
</g>
<g transform="translate(0 100)">
    <rect width="62"
         height="20"
         style="fill:rgb(131,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" /> 
    <text transform = "translate(0 15)"> Ivysaur</text>   
</g>
<g transform="translate(0 120)">
    <rect width="49"
         height="20"
         style="fill:rgb(102,0,0);
                stroke-width:1;
                stroke:rgb(0,0,0)" /> 
    <text transform = "translate(0 15)"> Bulbasaur</text>   
</g>
Solution: SVG Template
<g transform="translate(0 ${d.y})">
    <rect width="${d.width}"
         height="20"
         style="fill:${d.color};
                stroke-width:1;
                stroke:rgb(0,0,0)" /> 
    <text transform = "translate(0 15)"> ${d.label}</text>   
</g>
Solution: Javascript
function computeX(d, i) {
    return 0
}

function computeWidth(d, i) {
    return d['Attack']
}

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

function computeLabel(d, i) {
    return (d['Name'])
}


// HINT: find the max Defense point (_.max, _.pluck) so that you can scale
//       each Pokemon's defense point with respect to it to obtain a value 'r'
//       between 0 and 255. Generate a different rgb(r,0,0) string
function computeColor(d, i) {

  var rValue = _.round(255*(d['Defense']) / (_.max(_.pluck(data, 'Defense'))))
    return 'rgb(' + rValue + ',0,0)'
}

var viz = _.map(data, function(d, i){
            return {
                x: computeX(d, i),
                y: computeY(d, i),
                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
[{"x":0,"y":0,"width":48,"color":"rgb(135,0,0)","label":"Squirtle"},{"x":0,"y":20,"width":104,"color":"rgb(162,0,0)","label":"Mega Charizard Y"},{"x":0,"y":40,"width":52,"color":"rgb(89,0,0)","label":"Charmander"},{"x":0,"y":60,"width":100,"color":"rgb(255,0,0)","label":"Mega Venusaur"},{"x":0,"y":80,"width":82,"color":"rgb(172,0,0)","label":"Venusaur"},{"x":0,"y":100,"width":62,"color":"rgb(131,0,0)","label":"Ivysaur"},{"x":0,"y":120,"width":49,"color":"rgb(102,0,0)","label":"Bulbasaur"}]