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}]
<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 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),
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(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>
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)" />
<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 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":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(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>
Solution: SVG Template
<g transform="translate(0 ${d.y})">
<rect
x="${d.x}"
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 120
}
function computeWidth(d, i) {
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":120,"y":0,"width":48,"color":"red","label":"Squirtle"},{"x":120,"y":20,"width":104,"color":"red","label":"Mega Charizard Y"},{"x":120,"y":40,"width":52,"color":"red","label":"Charmander"},{"x":120,"y":60,"width":100,"color":"red","label":"Mega Venusaur"},{"x":120,"y":80,"width":82,"color":"red","label":"Venusaur"},{"x":120,"y":100,"width":62,"color":"red","label":"Ivysaur"},{"x":120,"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="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>
Solution: SVG Template
<g transform="translate(120 ${d.y})">
<rect
x="${d.attackX}"
width="${d.attackWidth}"
height="20"
style="fill:${d.attackColor};
stroke-width:1;
stroke:rgb(0,0,0)" />
<rect
x="${d.defenseX}"
width="${d.defenseWidth}"
height="20"
style="fill:${d.defenseColor};
stroke-width:1;
stroke:rgb(0,0,0)" />
<text transform="translate(0 15)">
${d.label}
</text>
</g>
Solution: Javascript
function computeAttackX(d, i) {
return -d.Attack
}
function computeDefenseX(d, i) {
return 0
}
function computeAttackWidth(d, i) {
return d.Attack
}
function computeDefenseWidth(d, i){
return d.Defense
}
function computeY(d, i) {
return i * 20
}
function computeAttackColor(d, i) {
return 'red'
}
function computeDefenseColor(d, i){
return 'blue'
}
function computeLabel(d, i){
return d.Name
}
var viz = _.map(data, function(d, i){
return {
attackX: computeAttackX(d, i),
defenseX: computeDefenseX(d, i),
y: computeY(d, i),
attackWidth: computeAttackWidth(d, i),
defenseWidth: computeDefenseWidth(d, i),
attackColor: computeAttackColor(d, i),
defenseColor: computeDefenseColor(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
[{"attackX":-48,"defenseX":0,"y":0,"attackWidth":48,"defenseWidth":65,"attackColor":"red","defenseColor":"blue","label":"Squirtle"},{"attackX":-104,"defenseX":0,"y":20,"attackWidth":104,"defenseWidth":78,"attackColor":"red","defenseColor":"blue","label":"Mega Charizard Y"},{"attackX":-52,"defenseX":0,"y":40,"attackWidth":52,"defenseWidth":43,"attackColor":"red","defenseColor":"blue","label":"Charmander"},{"attackX":-100,"defenseX":0,"y":60,"attackWidth":100,"defenseWidth":123,"attackColor":"red","defenseColor":"blue","label":"Mega Venusaur"},{"attackX":-82,"defenseX":0,"y":80,"attackWidth":82,"defenseWidth":83,"attackColor":"red","defenseColor":"blue","label":"Venusaur"},{"attackX":-62,"defenseX":0,"y":100,"attackWidth":62,"defenseWidth":63,"attackColor":"red","defenseColor":"blue","label":"Ivysaur"},{"attackX":-49,"defenseX":0,"y":120,"attackWidth":49,"defenseWidth":49,"attackColor":"red","defenseColor":"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 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>
Solution: SVG Template
<g transform="translate(0 ${d.y})">
<rect width="${d.width}"
height="${d.height}"
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 computeHeight(d, i) {
return d.Defense
}
// HINT: figure out a way to compute a Y offset on each call to return the sum of of the heights
// of all previous bars
function computeY(d, i) {
var subArray=_.slice(data, 0, i)
return _.sum(subArray, function(mon){
return mon.Defense
})
}
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),
height: computeHeight(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,"height":65,"width":48,"color":"red","label":"Squirtle"},{"x":0,"y":65,"height":78,"width":104,"color":"red","label":"Mega Charizard Y"},{"x":0,"y":143,"height":43,"width":52,"color":"red","label":"Charmander"},{"x":0,"y":186,"height":123,"width":100,"color":"red","label":"Mega Venusaur"},{"x":0,"y":309,"height":83,"width":82,"color":"red","label":"Venusaur"},{"x":0,"y":392,"height":63,"width":62,"color":"red","label":"Ivysaur"},{"x":0,"y":455,"height":49,"width":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
}
// 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) {
return 'rgb('+_.round(d.Defense*27/13)+',0,0)'
}
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":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"}]