Pokemon #2

New version of Pokemon, designed with Syntagmatic. We also suspect this dataset is related to Pokemon Go. Mainly because of all the Pidgeys.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .axis text {
    font-size: 8px;
  }
  .topofbar {
    opacity: 0;
  }
  .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; }

.grayedout {
    opacity: 0.2;
    fill: #969696;
  }  
  .dim {
    opacity: 0.5;
  }

</style>
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script>

var margin = {top: 20, right: 30, bottom: 20, 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; }));

svg.selectAll(".bar") 
    .data(poke)
    .enter()
    .append("rect")
    .attr("class", function(d) {
      return "bar " + d.type;
    })
    .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); })

svg.selectAll(".topofbar")
    .data(poke)
    .enter()
    .append("rect")
    .attr("class", function(d) {
      return "topofbar";
    })
    .attr("x", function(d) {
      return x(d.pokemon);
    })
    .attr("y", function(d) {
      return 0; 
    })
    .attr("width", x.bandwidth() + 1)
    .attr("height", function(d) { return height; })
    .on("mouseover", function(pokemon) {      
      y.domain([0, pokemon.value+1]);
      
      svg.selectAll(".bar")
        .attr("class", function(d) {
          if (d.value <= 2 * (+pokemon.value) && d.pokemon == pokemon.pokemon) {
            return "bar " + d.type;            
          } else if (d.value <= 2 * (+pokemon.value)) {
            return "bar " + d.type + " dim";
          } else {
            return "bar " + d.type + " grayedout";
          }
        })
        .attr("x", function(d) {
          return x(d.pokemon);
        })
         .attr("y", function(d) {
           return y(d.value);
         })
         .attr("height", function(d) { return height - y(d.value); })

svg.select(".axis")
         .call(yAxis)
             
       tooltip.html("");
       tooltip.append("img").attr("src", pokemon.thumb);
       tooltip.append("pre");
       tooltip.select("pre")
         .text(pokemon.pokemon + "\n" + pokemon.type.split("_").join(",") + "\n" + pokemon.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>

Modified http://d3js.org/d3.v4.js to a secure url

https://d3js.org/d3.v4.js