Overwatch Top Offense Hero Pick Rate in Septemper 2017

This is a bar chart about Overwatch top offense hero pick rate in September. It is inspired by Overbuff Statistics. And the original visualization code is copied from Extremist Murders in the US.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0px;
    }
    .label {
      font-size: 23pt;
      font-family: 'Verdana';
      alignment-baseline: middle;
      fill: white;
    }
    .number, .subtitle {
      font-size: 21pt;
      font-family: 'Verdana';
      alignment-baseline: middle;
      fill: #002560;
    }
    .bar {
      fill: #002560;
    }
  </style>
</head>

<body>
  <script>
    const width = 960;
    const height = 500;
    const margin = {
      left: 50,
      right: 200,
      top: 90,
      bottom: 52
    }
    
    const svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
    
    svg.append('text')
        .attr('class', 'subtitle')
        .attr('x', margin.left)
        .attr('y', 79)
        .text('Overwatch Top Offense Hero Pick Rate in Septemper 2017.');
    
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    const data = [
      {
        name: "Soldier: 76",
        value: 20.07
      },
      {
        name: "Genji",
        value: 17.31
      },
      {
        name: "McCree",
        value: 15.51
      },
      {
        name: "Pharah",
        value: 14.87
      }
    ];
    
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    
    const xValue = d => d.value;
    const yValue = d => d.name;
    
    const xScale = d3.scaleLinear()
      .domain([0, d3.max(data, xValue)])
      .range([0, innerWidth]);
    
    const yScale = d3.scaleBand()
      .domain(data.map(yValue).reverse())
      .range([innerHeight, 0])
      .padding(0.272);
    
    const groups = g.selectAll('g').data(data);
    const groupsEnter = groups
      .enter().append('g')
        .attr('transform', d => `translate(0, ${yScale(yValue(d))})`);
    
    groupsEnter
      .append('rect')
        .attr('class', 'bar')
        .attr('width', d => xScale(xValue(d)))
        .attr('height', yScale.bandwidth())
        .attr('fill', 'black');
    
    groupsEnter
      .append('text')
        .attr('class', 'label')
        .attr('x', 15)
        .attr('y', yScale.bandwidth() / 2)
        .text(yValue);
    
    const percentFormat = d3.format(",.2%");
    const xPercent = d => percentFormat(xValue(d) / 100);
    
    groupsEnter
      .append('text')
        .attr('class', 'number')
        .attr('x', d => xScale(xValue(d)) + 10)
        .attr('y', yScale.bandwidth() / 2)
        .text(d => `${xPercent(d)}`);
    
    saveAs(model-js);

</script>
</body>

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