Meaningless Pokemon data from pastebin graphed. Supplemented with types and thumbnails from bulbapedia. Hover colors from iwanthue based on the Pokemon’s type.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font-size: 8px;
}
.bar {
fill: brown; /* something basic for all the bars */
}
.topofbar {
opacity: 0;
}
.topofbar:hover {
opacity: 1;
}
.tooltip {
background-color: #f7f7f7;
padding: 3px 12px;
font-family: sans-serif;
border: 1px solid #bbbbbb;
box-shadow: 1px 1px 4px #bbbbbb;
display: flex;
flex-direction: column;
align-items: center;
}
pre {
font-weight: normal;
margin: 5px 0;
text-align: center;
}
img {
width: 40px;
height: 40px;
}
.normal { fill: #c0b8a6; }
.bug { fill: #4a893b; }
.fairy { fill: #ea8bc0; }
.water { fill: #8bbcdc; }
.poison { fill: #8649ea; }
.ground { fill: #e38f64; }
.fighting { fill: #dc3e3f; }
.grass { fill: #589931 ; }
.fire { fill: #f02f14 ; }
.psychic { fill: #b4179f; }
.electric { fill: #fbd127; }
.dragon { fill: #bc2aba; }
.normal_flying { fill: #855c84; }
.poison_flying { fill: #4f297f; }
.bug_poison { fill: #522c62; }
.bug_grass { fill: #5f935d; }
.grass_psychic { fill: #ce56a8; }
.grass_poison { fill: #49294a; }
.water_psychic { fill: #6f6078; }
.ghost_poison { fill: #362243; }
.normal_fairy { fill: #cb9dcb; }
.rock_ground, .ground_rock { fill: #91743a; }
.water_poison { fill: #91743a; }
.rock_water { fill: #799960; }
.bug_flying { fill: #7f4769; }
.rock_flying { fill: #7b6637; }
.dragon_flying { fill: #824f73; }
.electric_steel { fill: #aa8c66; }
.ice_psychic { fill: #495589; }
.water_fighting { fill: #4992a8; }
.poison_ground { fill: #955d5f; }
.water_flying { fill: #4e5b88; }
.fire_flying { fill: #b47e78; }
.water_ice { fill: #405e65; }
.electric_flying { fill: #cebed9; }
.ice_flying { fill: #b0c5da; }
.psychic_fairy { fill: #a17fa5; }
</style>
<body>
<script src="//d3js.org/d3.v4.js"></script>
<script>
var margin = {top: 20, right: 30, bottom: 50, left: 60};
var width = 1000 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var x = d3.scaleBand()
.range([0, width])
.padding(0.2)
var y = d3.scaleLinear()
.range([height, 0]);
var yAxis = d3.axisLeft(y)
.ticks(10)
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
d3.csv("pokemon.csv", function(poke) {
poke = poke.map(function(d) {
d.value = +d.value;
return d;
});
x.domain(poke.map(function(d) { return d.pokemon; }));
y.domain(d3.extent(poke, function(d) { return d.value; }));
/* var types = d3.nest()
.key(function(d) { return d.type; })
.entries(poke);
console.log("types: ", types) */
svg.selectAll(".bar")
.data(poke)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.pokemon);
})
.attr("y", function(d) {
return y(d.value);
})
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.value); })
.attr("class", "bar")
svg.selectAll(".topofbar")
.data(poke)
.enter()
.append("rect")
.attr("class", function(d) {
return "topofbar " + d.type;
})
.attr("x", function(d) {
return x(d.pokemon);
})
.attr("y", function(d) {
return 0;
})
.attr("width", x.bandwidth())
.attr("height", function(d) { return height; })
.on("mouseover", function(d) {
tooltip.html("");
tooltip.append("img").attr("src", d.thumb);
tooltip.append("pre");
tooltip.select("pre")
.text(d.pokemon + "\n" + d.type.split("_").join(",") + "\n" + d.value);
return tooltip.style("visibility", "visible");
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.pageY-20) + "px").style("left", (d3.event.pageX+10) + "px");
})
.on("mouseout", function() {
return tooltip.style("visibility", "hidden");
});
svg.append("g")
.attr("class", "axis")
.call(yAxis);
});
</script>
pokemon,value,type,thumb
Pidgey,532152,normal_flying,http://cdn.bulbagarden.net/upload/9/9c/016MS.png
Rattata,324465,normal,http://cdn.bulbagarden.net/upload/4/4d/019MS.png
Zubat,247114,poison_flying,http://cdn.bulbagarden.net/upload/9/96/041MS.png
Weedle,238127,bug_poison,http://cdn.bulbagarden.net/upload/6/65/013MS.png
Spearow,167455,normal_flying,http://cdn.bulbagarden.net/upload/5/5b/021MS.png
Caterpie,126572,bug,http://cdn.bulbagarden.net/upload/6/69/010MS.png
Eevee,98861,normal,http://cdn.bulbagarden.net/upload/d/de/133MS.png
Clefairy,89867,fairy,http://cdn.bulbagarden.net/upload/f/f9/035MS.png
Staryu,85267,water,http://cdn.bulbagarden.net/upload/6/60/120MS.png
Krabby,84899,water,http://cdn.bulbagarden.net/upload/4/40/098MS.png
Poliwag,84751,water,http://cdn.bulbagarden.net/upload/1/17/060MS.png
Goldeen,84634,water,http://cdn.bulbagarden.net/upload/9/9b/118MS.png
Magikarp,70347,water,http://cdn.bulbagarden.net/upload/7/7c/129MS.png
Venonat,63781,bug_poison,http://cdn.bulbagarden.net/upload/1/1e/048MS.png
Ekans,61897,poison,http://cdn.bulbagarden.net/upload/0/0d/023MS.png
Nidoran?,59712,poison,http://cdn.bulbagarden.net/upload/a/ab/029MS.png
Nidoran?,59630,poison,http://cdn.bulbagarden.net/upload/f/fb/032MS.png
Paras,53996,bug_grass,http://cdn.bulbagarden.net/upload/7/7a/046MS.png
Pinsir,49119,bug,http://cdn.bulbagarden.net/upload/5/5c/127MS.png
Bellsprout,46623,grass_poison,http://cdn.bulbagarden.net/upload/7/7b/069MS.png
Horsea,43557,water,http://cdn.bulbagarden.net/upload/2/23/116MS.png
Kangaskhan,41791,normal,http://cdn.bulbagarden.net/upload/6/68/115MS.png
Golbat,40860,poison_flying,http://cdn.bulbagarden.net/upload/d/d0/042MS.png
Bulbasaur,37925,grass_poison,http://cdn.bulbagarden.net/upload/e/ec/001MS.png
Oddish,37153,grass_poison,http://cdn.bulbagarden.net/upload/a/a5/043MS.png
Psyduck,35943,water,http://cdn.bulbagarden.net/upload/6/6b/054MS.png
Pidgeotto,33387,normal_flying,http://cdn.bulbagarden.net/upload/a/a9/017MS.png
Exeggcute,29236,grass_psychic,http://cdn.bulbagarden.net/upload/a/a6/102MS.png
Squirtle,23530,water,http://cdn.bulbagarden.net/upload/9/92/007MS.png
Slowpoke,19238,water_psychic,http://cdn.bulbagarden.net/upload/6/6a/079MS.png
Gastly,16299,ghost_poison,http://cdn.bulbagarden.net/upload/c/cf/092MS.png
Kakuna,14992,bug_poison,http://cdn.bulbagarden.net/upload/8/81/014MS.png
Meowth,13414,normal,http://cdn.bulbagarden.net/upload/5/50/052MS.png
Jigglypuff,13364,normal_fairy,http://cdn.bulbagarden.net/upload/9/9c/039MS.png
Sandshrew,12984,ground,http://cdn.bulbagarden.net/upload/c/c3/027MS.png
Machop,12440,fighting,http://cdn.bulbagarden.net/upload/6/6c/066MS.png
Tangela,12334,grass,http://cdn.bulbagarden.net/upload/4/45/114MS.png
Geodude,12080,rock_ground,http://cdn.bulbagarden.net/upload/0/04/074MS.png
Koffing,11703,poison,http://cdn.bulbagarden.net/upload/3/3f/109MS.png
Dodrio,10410,normal_flying,http://cdn.bulbagarden.net/upload/1/19/085MS.png
Raticate,10151,normal,http://cdn.bulbagarden.net/upload/4/4d/020MS.png
Growlithe,10029,fire,http://cdn.bulbagarden.net/upload/6/69/058MS.png
Doduo,9208,normal_flying,http://cdn.bulbagarden.net/upload/f/fc/084MS.png
Tentacool,8593,water_poison,http://cdn.bulbagarden.net/upload/4/42/072MS.png
Abra,8102,psychic,http://cdn.bulbagarden.net/upload/c/cf/063MS.png
Metapod,7808,bug,http://cdn.bulbagarden.net/upload/c/ce/011MS.png
Cubone,7533,ground,http://cdn.bulbagarden.net/upload/2/2e/104MS.png
Rhyhorn,7045,ground_rock,http://cdn.bulbagarden.net/upload/6/67/111MS.png
Electabuzz,6839,electric,http://cdn.bulbagarden.net/upload/7/72/125MS.png
Mankey,6139,fighting,http://cdn.bulbagarden.net/upload/a/ad/056MS.png
Poliwhirl,5417,water,http://cdn.bulbagarden.net/upload/3/36/061MS.png
Fearow,5155,normal_flying,http://cdn.bulbagarden.net/upload/3/35/022MS.png
Ponyta,5123,fire,http://cdn.bulbagarden.net/upload/5/55/077MS.png
Kabuto,4599,rock_water,http://cdn.bulbagarden.net/upload/1/1e/140MS.png
Vulpix,4431,fire,http://cdn.bulbagarden.net/upload/8/85/037MS.png
Dratini,4394,dragon,http://cdn.bulbagarden.net/upload/2/26/147MS.png
Pidgeot,4182,normal_flying,http://cdn.bulbagarden.net/upload/6/68/018MS.png
Diglett,4136,ground,http://cdn.bulbagarden.net/upload/8/8b/050MS.png
Charmander,4063,fire,http://cdn.bulbagarden.net/upload/b/bb/004MS.png
Nidorino,3810,poison,http://cdn.bulbagarden.net/upload/0/0e/033MS.png
Nidorina,3658,poison,http://cdn.bulbagarden.net/upload/d/d0/030MS.png
Scyther,3594,bug_flying,http://cdn.bulbagarden.net/upload/5/54/123MS.png
Magmar,3258,fire,http://cdn.bulbagarden.net/upload/e/e7/126MS.png
Weepinbell,2826,grass_poison,http://cdn.bulbagarden.net/upload/d/d5/070MS.png
Grimer,2761,poison,http://cdn.bulbagarden.net/upload/5/50/088MS.png
Kingler,2661,water,http://cdn.bulbagarden.net/upload/5/5c/099MS.png
Ivysaur,2395,grass_poison,http://cdn.bulbagarden.net/upload/6/6b/002MS.png
Gloom,2252,grass_poison,http://cdn.bulbagarden.net/upload/d/d9/044MS.png
Pikachu,2181,electric,http://cdn.bulbagarden.net/upload/0/0f/025MS.png
Drowzee,2086,psychic,http://cdn.bulbagarden.net/upload/8/8e/096MS.png
Arbok,1930,poison,http://cdn.bulbagarden.net/upload/d/d3/024MS.png
Venomoth,1885,bug_poison,http://cdn.bulbagarden.net/upload/3/31/049MS.png
Beedrill,1784,bug_poison,http://cdn.bulbagarden.net/upload/5/5a/015MS.png
Parasect,1726,bug_grass,http://cdn.bulbagarden.net/upload/4/41/047MS.png
Clefable,1447,fairy,http://cdn.bulbagarden.net/upload/7/75/036MS.png
Voltorb,1411,electric,http://cdn.bulbagarden.net/upload/c/c1/100MS.png
Seadra,1328,water,http://cdn.bulbagarden.net/upload/8/81/117MS.png
Starmie,1309,water_psychic,http://cdn.bulbagarden.net/upload/5/55/121MS.png
Wartortle,1309,water,http://cdn.bulbagarden.net/upload/f/f3/008MS.png
Onix,1237,rock_ground,http://cdn.bulbagarden.net/upload/c/cd/095MS.png
Tentacruel,1113,water_poison,http://cdn.bulbagarden.net/upload/f/fc/073MS.png
Seaking,1074,water,http://cdn.bulbagarden.net/upload/8/88/119MS.png
Golduck,1023,water,http://cdn.bulbagarden.net/upload/6/64/055MS.png
Aerodactyl,1004,rock_flying,http://cdn.bulbagarden.net/upload/d/d1/142MS.png
Butterfree,968,bug_flying,http://cdn.bulbagarden.net/upload/1/14/012MS.png
Haunter,857,ghost_poison,http://cdn.bulbagarden.net/upload/7/71/093MS.png
Omanyte,833,rock_water,http://cdn.bulbagarden.net/upload/9/97/138MS.png
Graveler,776,rock_ground,http://cdn.bulbagarden.net/upload/5/5c/075MS.png
Lickitung,647,normal,http://cdn.bulbagarden.net/upload/2/25/108MS.png
Seel,604,water,http://cdn.bulbagarden.net/upload/9/9b/086MS.png
Slowbro,551,water_psychic,http://cdn.bulbagarden.net/upload/b/b6/080MS.png
Kadabra,498,psychic,http://cdn.bulbagarden.net/upload/b/b6/064MS.png
Machoke,477,fighting,http://cdn.bulbagarden.net/upload/0/0f/067MS.png
Exeggutor,452,grass_psychic,http://cdn.bulbagarden.net/upload/d/db/103MS.png
Sandslash,416,ground,http://cdn.bulbagarden.net/upload/e/e0/028MS.png
Snorlax,390,normal,http://cdn.bulbagarden.net/upload/d/d6/143MS.png
Weezing,385,poison,http://cdn.bulbagarden.net/upload/2/22/110MS.png
Dragonite,358,dragon_flying,http://cdn.bulbagarden.net/upload/c/cc/149MS.png
Hitmonlee,354,fighting,http://cdn.bulbagarden.net/upload/6/60/106MS.png
Magnemite,338,electric_steel,http://cdn.bulbagarden.net/upload/0/0f/081MS.png
Jynx,336,ice_psychic,http://cdn.bulbagarden.net/upload/f/f5/124MS.png
Poliwrath,325,water_fighting,http://cdn.bulbagarden.net/upload/5/5e/062MS.png
Venusaur,316,grass_poison,http://cdn.bulbagarden.net/upload/d/df/003MS.png
Porygon,314,normal,http://cdn.bulbagarden.net/upload/f/f7/137MS.png
Hitmonchan,311,fighting,http://cdn.bulbagarden.net/upload/1/1a/107MS.png
Dragonair,268,dragon,http://cdn.bulbagarden.net/upload/4/4e/148MS.png
Shellder,253,water,http://cdn.bulbagarden.net/upload/4/41/090MS.png
Marowak,226,ground,http://cdn.bulbagarden.net/upload/6/6f/105MS.png
Nidoking,224,poison_ground,http://cdn.bulbagarden.net/upload/1/18/034MS.png
Wigglytuff,207,normal_fairy,http://cdn.bulbagarden.net/upload/f/f1/040MS.png
Nidoqueen,207,poison_ground,http://cdn.bulbagarden.net/upload/3/31/031MS.png
Victreebel,203,grass_poison,http://cdn.bulbagarden.net/upload/9/9b/071MS.png
Charmeleon,201,fire,http://cdn.bulbagarden.net/upload/d/dc/005MS.png
Rhydon,200,ground_rock,http://cdn.bulbagarden.net/upload/c/ce/112MS.png
Blastoise,183,water,http://cdn.bulbagarden.net/upload/c/cb/009MS.png
Primeape,138,fighting,http://cdn.bulbagarden.net/upload/f/f1/057MS.png
Vaporeon,130,water,http://cdn.bulbagarden.net/upload/b/be/134MS.png
Rapidash,126,fire,http://cdn.bulbagarden.net/upload/6/66/078MS.png
Arcanine,124,fire,http://cdn.bulbagarden.net/upload/3/35/059MS.png
Dugtrio,120,ground,http://cdn.bulbagarden.net/upload/8/86/051MS.png
Vileplume,118,grass_poison,http://cdn.bulbagarden.net/upload/3/3e/045MS.png
Flareon,99,fire,http://cdn.bulbagarden.net/upload/3/30/136MS.png
Muk,95,poison,http://cdn.bulbagarden.net/upload/b/b4/089MS.png
Persian,65,normal,http://cdn.bulbagarden.net/upload/a/a7/053MS.png
Chansey,59,normal,http://cdn.bulbagarden.net/upload/e/ea/113MS.png
Gengar,59,ghost_poison,http://cdn.bulbagarden.net/upload/a/a4/094MS.png
Golem,53,rock_ground,http://cdn.bulbagarden.net/upload/3/34/076MS.png
Ninetales,40,fire,http://cdn.bulbagarden.net/upload/8/85/037MS.png
Machamp,36,fighting,http://cdn.bulbagarden.net/upload/0/0f/067MS.png
Gyarados,35,water_flying,http://cdn.bulbagarden.net/upload/a/a0/130MS.png
Alakazam,33,psychic,http://cdn.bulbagarden.net/upload/c/ca/065MS.png
Omastar,31,rock_water,http://cdn.bulbagarden.net/upload/2/2a/139MS.png
Charizard,30,fire_flying,http://cdn.bulbagarden.net/upload/0/01/006MS.png
Hypno,29,psychic,http://cdn.bulbagarden.net/upload/9/98/097MS.png
Kabutops,27,rock_water,http://cdn.bulbagarden.net/upload/0/08/141MS.png
Jolteon,17,electric,http://cdn.bulbagarden.net/upload/1/16/135MS.png
Raichu,10,electric,http://cdn.bulbagarden.net/upload/d/da/026MS.png
Electrode,5,electric,http://cdn.bulbagarden.net/upload/6/69/101MS.png
Cloyster,4,water_ice,http://cdn.bulbagarden.net/upload/b/bc/091MS.png
Magneton,2,electric_steel,http://cdn.bulbagarden.net/upload/0/0c/082MS.png
Mew,0,psychic,http://cdn.bulbagarden.net/upload/a/a7/151MS.png
Mewtwo,0,psychic,http://cdn.bulbagarden.net/upload/1/1a/150MS.png
Moltres,0,fire_flying,http://cdn.bulbagarden.net/upload/f/fe/146MS.png
Zapdos,0,electric_flying,http://cdn.bulbagarden.net/upload/3/3f/145MS.png
Articuno,0,ice_flying,http://cdn.bulbagarden.net/upload/0/04/144MS.png
Ditto,0,normal,http://cdn.bulbagarden.net/upload/5/53/132MS.png
Lapras,0,water_ice,http://cdn.bulbagarden.net/upload/4/4b/131MS.png
Tauros,0,normal,http://cdn.bulbagarden.net/upload/9/95/128MS.png
Mr. Mime,0,psychic_fairy,http://cdn.bulbagarden.net/upload/5/58/122MS.png
Dewgong,0,water_ice,http://cdn.bulbagarden.net/upload/2/20/087MS.png
Farfetch'd,0,normal_flying,http://cdn.bulbagarden.net/upload/5/57/083MS.png