D3 Examples - Superhero

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
  
  body{
    font: 12px Helvetica;
  }
  .bar {
  fill: #DC1405;
  }
  .title{
    font: 16px Helvetica;
  }
  .bar:hover {
    fill: #efce0b;
  }
  .axis {
    font: 10px sans-serif;
  }
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  .x.axis path {
    display: none;
  }
  div.tooltip {  
    position: absolute;     
    text-align: center;     
    width: 200px;          
    height: 30px;         
    padding: 2px;       
    font: 10px sans-serif;    
    background: #efce0b; 
    border-radius: 8px;     
    visibility: hidden;
}
  </style>
</head>
​
<body>
  
  <script>
    var margin = {top: 40, right: 75, bottom: 150, left: 60};
    var width = 1200 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var full = {'bw': 'Black Widow', 'capt': 'Captain America', 'hulk': 'Hulk', 'thor': 'Thor', 'hawk': 'Hawkeye', 'ironman': 'Iron Man' };
    var hover = {'bw': '#E1DFD5', 'capt': '#9CBAE3', 'hulk': '#3E640A', 'thor': '#C6BFB8', 'hawk': '#674292', 'ironman': '#beba46' };
    var fill = {'bw': '#535453', 'capt': '#FF2A2A', 'hulk': '#8A2C9A', 'thor': '#74858B', 'hawk': '#22245F', 'ironman': '#771414' };
    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 + ")");
      draw('ironman') //default    
​
  function draw(name){
    var file =  name + '.csv'
​
        d3.csv(file, function(data) {
    var x = d3.scale.ordinal()
      .domain(data.map(function(d) {return d.name;}))
      .rangeBands([0, (width - margin.right)]);
​
    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickValues(x.domain().filter(function(d, i) { 
      return !(i % 2); 
      })); 
​
    var y = d3.scale.linear()
      .domain ([0, d3.max(data, function(d) { return +d.count; })])
      .range([height, 0]);
​
    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(10);
​
      var tooltip = d3.select("body")
        .append("div")
        .attr("class", "tooltip")
​
      svg.select(".x.axis").remove(); 
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-65)" );
​
      svg.select(".y.axis").remove(); 
      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
​
      svg.select(".title").remove(); 
      svg.append("text")
        .attr("class", "title")
        .attr("x", (width / 2))             
        .attr("y", (margin.top / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .html("Most Common Superheros To Appear Alongside " + full[name] + " in Marvel Comics");
​
​
      var bars =  svg.selectAll(".bar")
        .data(data, function(d){return d.id; })
​
      bars.enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.name) ; })
        .style("fill", fill[name])
        .attr("width", x.rangeBand())
        .on("mouseover", function(d){
           tooltip
          .style("visibility", "visible")
          .html("Name: " + d.name + "<br/>" + "Count: " + d.count);
          d3.select(this).style("fill", hover[name]);
​
          })
        .on("mousemove", function(d){
           tooltip
            .style("top", (d3.event.pageY-10)+"px")
            .style("left",(d3.event.pageX+10)+"px");
        })
        .on("mouseout", function(){
          tooltip.style("visibility", "hidden");
          d3.select(this).style("fill", fill[name]);
​
        })
        .transition()
        .delay(function (d, i) { return i*10; })
        .attr("y", function(d) { return y(+ d.count); })
        .attr("height",function(d) { return height - y(d.count); });
​
​
      bars.exit().remove(); 
​
  });}
  </script>
​
  <br><br>Select another:<br>
  <input type="radio" name="hero" onchange="draw('ironman');"checked= "checked" /> Iron Man
  <input type="radio" name="hero" onchange="draw('thor');" />Thor
  <input type="radio" name="hero" onchange="draw('hulk');" />Hulk
  <input type="radio" name="hero" onchange="draw('bw');" />Black Widow
  <input type="radio" name="hero" onchange="draw('hawk');" />Hawkeye
  <input type="radio" name="hero" onchange="draw('capt');" />Captain America
<br><br><br>
Data from https://exposedata.com/marvel 
</body>
​
​
    