Skip to content

Instantly share code, notes, and snippets.

@mhebrard

mhebrard/README.md

Last active August 29, 2015 14:17
Show Gist options
  • Save mhebrard/13e911e8312a1905be38 to your computer and use it in GitHub Desktop.
Save mhebrard/13e911e8312a1905be38 to your computer and use it in GitHub Desktop.
Download ZIP
Pokemon Treemap
Raw
README.md

This representation shows the number of pokemons classified by type.

###Functions Color notice one type and rectangle are labeled with the other type of the pokemon. The area of a rectangle is proportional to the number of the pokemons of these two types.

###Technics Data are store in a database provide by Pokeapi and request through REST API.
The view use D3.js library and treemap layout.

This is my first try with this two technologies (API and treemap). So I just apply the examples...
I have some issues due to the asynchrony of json import. For this test, I use extract.htm that print the imported json in the console.log U_U. Then copy/past the last print in a text file (pokemap.json).

Looking for a better solution...

###Thanks

Raw
extract.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>PokeAPI_extract</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="body">
<h1>Pokemon data extract</h1>
data from <a href="http://pokeapi.co/" title="PokeAPI" target="_blank">PokeAPI</a><br/>
import with <a href="http://d3js.org/" title="D3.js" target="_blank">Data-Driven Documents</a><br/>
Thanks to their authors.
<br/><br/>
<div id="chart">
I have some issues due to the asynchrony of Json import.<br/>
For this test, I print my json in the console.log U_U.<br/>
Then copy/past the last print in a text file...<br/>
(pokemap.json).<br/>
</div>
</div>
<script type="text/javascript">
/*POKEAPI EXTRACT*/
/*****************/
//json object
var json= { name:"Types", children:[], value:0};
// Get pokemon list
d3.json("http://pokeapi.co/api/v1/pokedex/1/", function(data) {
//for each pokemon
data.pokemon.forEach(function(n) {
//console.log(k,v);
//get pokemon description.
d3.json("http://pokeapi.co/"+n.resource_uri, function(p) {
//increment monotype
if(p.types.length<2) {
addType(json,p.types[0].name,p.types[0].name);
addType(json,p.types[0].name,p.types[0].name);
}
//increment bitype
else {
addType(json,p.types[0].name,p.types[1].name);
addType(json,p.types[1].name,p.types[0].name);
}
//Print json object in console.
console.log(JSON.stringify(json));
}); //end get description
json.value++;
});//end foreach pokemon
});
//subfunction create type object and increment
function addType(root,p,c) {
var parent=getChild(root,p);
if(!parent) {
parent={name:p,children:[],value:0};
root.children.push(parent);
}
var child=getChild(parent,c);
if(!child) {
child={name:c,children:[],value:0};
parent.children.push(child);
}
child.value++;
parent.value++;
}
//subfunction get child of "p" object with name property "name"
function getChild(p,name) {
var res="";
p.children.forEach(function(n) {
if(n.name==name) {res=n;}
});
return res;
}
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>PokeMap</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.chart {
display: block;
margin: auto;
margin-top: 40px;
}
text {
font-size: 11px;
cursor:pointer;
}
rect {
fill: none;
}
</style>
</head>
<body>
<div id="body">
<h1>Pokemon's classification by types</h1>
<div id="chart"></div>
<div id="footer">
<div class="hint">click or option-click to descend or ascend</div>
<br/>
Thanks to <a href="http://pokeapi.co/" title="PokeAPI" target="_blank">PokeAPI</a> and its authors for the data.<br/>
Thanks to <a href="http://d3js.org/" title="d3.js" target="_blank">Data-Driven Documents</a> and its authors for the original display.
</div>
</div>
<script type="text/javascript">
var w = 1280 - 80,
h = 800 - 180,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([0, h]),
color = {ice:"#98D8D8",fairy:"#EE99AC",steel:"#B8B8D0",ghost:"#705898",dragon:"#7038F8",dark:"#705848",rock:"#B8A038",fighting:"#C03028",ground:"#E0C068",poison:"#A040A0",electric:"#F8D090",bug:"#A8B820",fire:"#F08030",flying:"#A890F0",normal:"#A8A878",psychic:"#F85888",grass:"#78C850",water:"#6890F0"},//d3.scale.category20c(),
root,
node;
var treemap = d3.layout.treemap()
.round(false)
.size([w, h])
.value(function(d) { return d.value; });
var svg = d3.select("#chart")
.style("width", w + "px")
.style("height", h + "px")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(.5,.5)");
d3.json("pokemap.json", function(data) {
node = root = data;
var nodes = treemap.nodes(root)
.filter(function(d) { return !d.children; });
var cell = svg.selectAll("g")
.data(nodes)
.enter().append("svg:g")
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
cell.append("svg:rect")
.attr("width", function(d) { return d.dx - 1; })
.attr("height", function(d) { return d.dy - 1; })
.style("fill", function(d) { return color[d.parent.name]; });
cell.append("svg:text")
.attr("x", function(d) { return d.dx / 2; })
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; })
.style("opacity",function(d) {box=this.getBBox(); return d.dx > box.width ? d.dy > box.height ? 1 : 0 : 0; });
/* create title field */
cell.append("svg:title")
.text(function(d) { return d.name+"/"+d.parent.name+": "+d.value; });
d3.select(window).on("click", function() { zoom(root); });
d3.select("select").on("change", function() {
treemap.value(this.value == "size" ? size : count).nodes(root);
zoom(node);
});
});
function size(d) {
return d.value;
}
function count(d) {
return 1;
}
function zoom(d) {
var kx = w / d.dx, ky = h / d.dy;
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, d.y + d.dy]);
var t = svg.selectAll("g.cell").transition()
.duration(d3.event.altKey ? 7500 : 750)
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
t.select("rect")
.attr("width", function(d) { return kx * d.dx - 1; })
.attr("height", function(d) { return ky * d.dy - 1; })
t.select("text")
.attr("x", function(d) { return kx * d.dx / 2; })
.attr("y", function(d) { return ky * d.dy / 2; })
.style("opacity",function(d) {box=this.getBBox(); return kx*d.dx > box.width ? ky*d.dy > box.height ? 1 : 0 : 0; });
node = d;
d3.event.stopPropagation();
}
</script>
</body>
</html>
Raw
pokemap.json
{"name":"Types","children":[
{"name":"normal","children":[
{"name":"normal","children":[],"value":122},
{"name":"flying","children":[],"value":23},
{"name":"fairy","children":[],"value":4},
{"name":"psychic","children":[],"value":2},
{"name":"grass","children":[],"value":2},
{"name":"ground","children":[],"value":1},
{"name":"fire","children":[],"value":2},
{"name":"electric","children":[],"value":2},
{"name":"fighting","children":[],"value":1},
{"name":"water","children":[],"value":1}
],"value":160},
{"name":"fire","children":[
{"name":"fire","children":[],"value":58},
{"name":"flying","children":[],"value":6},
{"name":"rock","children":[],"value":1},
{"name":"dark","children":[],"value":3},
{"name":"fighting","children":[],"value":7},
{"name":"ground","children":[],"value":2},
{"name":"psychic","children":[],"value":3},
{"name":"ghost","children":[],"value":3},
{"name":"bug","children":[],"value":2},
{"name":"dragon","children":[],"value":2},
{"name":"normal","children":[],"value":2},
{"name":"electric","children":[],"value":1},
{"name":"steel","children":[],"value":1}
],"value":91},
{"name":"water","children":[
{"name":"water","children":[],"value":120},
{"name":"fighting","children":[],"value":3},
{"name":"psychic","children":[],"value":4},
{"name":"ice","children":[],"value":6},
{"name":"flying","children":[],"value":7},
{"name":"rock","children":[],"value":10},
{"name":"poison","children":[],"value":4},
{"name":"electric","children":[],"value":3},
{"name":"fairy","children":[],"value":2},
{"name":"ground","children":[],"value":9},
{"name":"dragon","children":[],"value":2},
{"name":"grass","children":[],"value":3},
{"name":"bug","children":[],"value":1},
{"name":"dark","children":[],"value":5},
{"name":"steel","children":[],"value":1},
{"name":"ghost","children":[],"value":2},
{"name":"normal","children":[],"value":1}
],"value":183},
{"name":"bug","children":[
{"name":"bug","children":[],"value":34},
{"name":"flying","children":[],"value":14},
{"name":"poison","children":[],"value":12},
{"name":"grass","children":[],"value":6},
{"name":"steel","children":[],"value":7},
{"name":"rock","children":[],"value":5},
{"name":"fighting","children":[],"value":2},
{"name":"water","children":[],"value":1},
{"name":"ground","children":[],"value":2},
{"name":"electric","children":[],"value":2},
{"name":"fire","children":[],"value":2},
{"name":"ghost","children":[],"value":1}
],"value":88},
{"name":"flying","children":[
{"name":"bug","children":[],"value":14},
{"name":"normal","children":[],"value":23},
{"name":"poison","children":[],"value":3},
{"name":"water","children":[],"value":7},
{"name":"ice","children":[],"value":2},
{"name":"fire","children":[],"value":6},
{"name":"fairy","children":[],"value":2},
{"name":"psychic","children":[],"value":6},
{"name":"grass","children":[],"value":5},
{"name":"dark","children":[],"value":5},
{"name":"ground","children":[],"value":4},
{"name":"electric","children":[],"value":5},
{"name":"rock","children":[],"value":4},
{"name":"steel","children":[],"value":1},
{"name":"dragon","children":[],"value":6},
{"name":"ghost","children":[],"value":2},
{"name":"fighting","children":[],"value":1},
{"name":"flying","children":[],"value":4}
],"value":100},
{"name":"poison","children":[
{"name":"bug","children":[],"value":12},
{"name":"poison","children":[],"value":30},
{"name":"ground","children":[],"value":2},
{"name":"flying","children":[],"value":3},
{"name":"grass","children":[],"value":15},
{"name":"ghost","children":[],"value":4},
{"name":"water","children":[],"value":4},
{"name":"dark","children":[],"value":3},
{"name":"fighting","children":[],"value":2},
{"name":"dragon","children":[],"value":1}
],"value":76},
{"name":"electric","children":[
{"name":"electric","children":[],"value":54},
{"name":"steel","children":[],"value":3},
{"name":"water","children":[],"value":3},
{"name":"flying","children":[],"value":5},
{"name":"ghost","children":[],"value":1},
{"name":"bug","children":[],"value":2},
{"name":"ground","children":[],"value":1},
{"name":"dragon","children":[],"value":2},
{"name":"fairy","children":[],"value":1},
{"name":"normal","children":[],"value":2},
{"name":"fire","children":[],"value":1},
{"name":"ice","children":[],"value":1},
{"name":"grass","children":[],"value":1}
],"value":77},
{"name":"ground","children":[
{"name":"ground","children":[],"value":26},
{"name":"poison","children":[],"value":2},
{"name":"rock","children":[],"value":9},
{"name":"water","children":[],"value":9},
{"name":"flying","children":[],"value":4},
{"name":"ice","children":[],"value":3},
{"name":"bug","children":[],"value":2},
{"name":"fire","children":[],"value":2},
{"name":"dragon","children":[],"value":7},
{"name":"psychic","children":[],"value":2},
{"name":"grass","children":[],"value":1},
{"name":"steel","children":[],"value":2},
{"name":"dark","children":[],"value":3},
{"name":"electric","children":[],"value":1},
{"name":"normal","children":[],"value":1},
{"name":"ghost","children":[],"value":2}
],"value":76},
{"name":"fairy","children":[
{"name":"fairy","children":[],"value":30},
{"name":"normal","children":[],"value":4},
{"name":"psychic","children":[],"value":6},
{"name":"flying","children":[],"value":2},
{"name":"water","children":[],"value":2},
{"name":"steel","children":[],"value":3},
{"name":"grass","children":[],"value":2},
{"name":"electric","children":[],"value":1},
{"name":"rock","children":[],"value":1}
],"value":51},
{"name":"grass","children":[
{"name":"poison","children":[],"value":15},
{"name":"bug","children":[],"value":6},
{"name":"psychic","children":[],"value":3},
{"name":"grass","children":[],"value":66},
{"name":"flying","children":[],"value":5},
{"name":"water","children":[],"value":3},
{"name":"dark","children":[],"value":3},
{"name":"fighting","children":[],"value":3},
{"name":"rock","children":[],"value":2},
{"name":"ground","children":[],"value":1},
{"name":"ice","children":[],"value":3},
{"name":"fairy","children":[],"value":2},
{"name":"normal","children":[],"value":2},
{"name":"steel","children":[],"value":2},
{"name":"ghost","children":[],"value":10},
{"name":"electric","children":[],"value":1}
],"value":127},
{"name":"fighting","children":[
{"name":"fighting","children":[],"value":40},
{"name":"water","children":[],"value":3},
{"name":"bug","children":[],"value":2},
{"name":"fire","children":[],"value":7},
{"name":"grass","children":[],"value":3},
{"name":"psychic","children":[],"value":5},
{"name":"steel","children":[],"value":3},
{"name":"poison","children":[],"value":2},
{"name":"dark","children":[],"value":3},
{"name":"rock","children":[],"value":1},
{"name":"flying","children":[],"value":1},
{"name":"normal","children":[],"value":1}
],"value":71},
{"name":"psychic","children":[
{"name":"psychic","children":[],"value":76},
{"name":"water","children":[],"value":4},
{"name":"grass","children":[],"value":3},
{"name":"fairy","children":[],"value":6},
{"name":"ice","children":[],"value":2},
{"name":"flying","children":[],"value":6},
{"name":"normal","children":[],"value":2},
{"name":"fighting","children":[],"value":5},
{"name":"rock","children":[],"value":2},
{"name":"ground","children":[],"value":2},
{"name":"steel","children":[],"value":6},
{"name":"dragon","children":[],"value":2},
{"name":"fire","children":[],"value":3},
{"name":"dark","children":[],"value":2}
],"value":121},
{"name":"rock","children":[
{"name":"ground","children":[],"value":9},
{"name":"water","children":[],"value":10},
{"name":"rock","children":[],"value":18},
{"name":"flying","children":[],"value":4},
{"name":"bug","children":[],"value":5},
{"name":"fire","children":[],"value":1},
{"name":"steel","children":[],"value":6},
{"name":"psychic","children":[],"value":2},
{"name":"grass","children":[],"value":2},
{"name":"fighting","children":[],"value":1},
{"name":"dragon","children":[],"value":2},
{"name":"fairy","children":[],"value":1},
{"name":"ice","children":[],"value":2},
{"name":"dark","children":[],"value":2}
],"value":65},
{"name":"steel","children":[
{"name":"electric","children":[],"value":3},
{"name":"bug","children":[],"value":7},
{"name":"flying","children":[],"value":1},
{"name":"rock","children":[],"value":6},
{"name":"fairy","children":[],"value":3},
{"name":"psychic","children":[],"value":6},
{"name":"steel","children":[],"value":10},
{"name":"water","children":[],"value":1},
{"name":"fighting","children":[],"value":3},
{"name":"dragon","children":[],"value":1},
{"name":"ground","children":[],"value":2},
{"name":"grass","children":[],"value":2},
{"name":"dark","children":[],"value":2},
{"name":"ghost","children":[],"value":4},
{"name":"fire","children":[],"value":1}
],"value":52},
{"name":"ghost","children":[
{"name":"poison","children":[],"value":4},
{"name":"ghost","children":[],"value":20},
{"name":"dark","children":[],"value":2},
{"name":"flying","children":[],"value":2},
{"name":"ice","children":[],"value":1},
{"name":"electric","children":[],"value":1},
{"name":"dragon","children":[],"value":2},
{"name":"water","children":[],"value":2},
{"name":"fire","children":[],"value":3},
{"name":"steel","children":[],"value":4},
{"name":"ground","children":[],"value":2},
{"name":"grass","children":[],"value":10},
{"name":"bug","children":[],"value":1}
],"value":54},
{"name":"ice","children":[
{"name":"water","children":[],"value":6},
{"name":"psychic","children":[],"value":2},
{"name":"flying","children":[],"value":2},
{"name":"dark","children":[],"value":2},
{"name":"ground","children":[],"value":3},
{"name":"ice","children":[],"value":26},
{"name":"grass","children":[],"value":3},
{"name":"ghost","children":[],"value":1},
{"name":"dragon","children":[],"value":3},
{"name":"rock","children":[],"value":2},
{"name":"electric","children":[],"value":1}
],"value":51},
{"name":"dragon","children":[
{"name":"dragon","children":[],"value":22},
{"name":"water","children":[],"value":2},
{"name":"ground","children":[],"value":7},
{"name":"flying","children":[],"value":6},
{"name":"psychic","children":[],"value":2},
{"name":"steel","children":[],"value":1},
{"name":"ghost","children":[],"value":2},
{"name":"dark","children":[],"value":3},
{"name":"fire","children":[],"value":2},
{"name":"electric","children":[],"value":2},
{"name":"ice","children":[],"value":3},
{"name":"rock","children":[],"value":2},
{"name":"poison","children":[],"value":1}
],"value":55},
{"name":"dark","children":[
{"name":"flying","children":[],"value":5},
{"name":"dark","children":[],"value":20},
{"name":"ice","children":[],"value":2},
{"name":"fire","children":[],"value":3},
{"name":"grass","children":[],"value":3},
{"name":"ghost","children":[],"value":2},
{"name":"water","children":[],"value":5},
{"name":"poison","children":[],"value":3},
{"name":"ground","children":[],"value":3},
{"name":"fighting","children":[],"value":3},
{"name":"steel","children":[],"value":2},
{"name":"dragon","children":[],"value":3},
{"name":"psychic","children":[],"value":2},
{"name":"rock","children":[],"value":2}
],"value":58}
],"value":778}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment