block by dhoboy 1178601925731459c224bd4d69a1791d

Pokemon

Full Screen

Meaningless Pokemon data from pastebin graphed. Supplemented with types and thumbnails from bulbapedia. Hover colors from iwanthue based on the Pokemon’s type.

index.html

<!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.csv

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