D3 Examples - Horizontal Bar Chart of 2017 NBA

Horizontal Bar Chart of 2017 NBA

This horizontal bar chart shows the top 7 Field Goals players of NBA in 2017.

The data is from Basketball Reference, also from Kaggle. Here is the according Glossary. The dataset is about players performance for NBA in 2017, including Number, Time, Player, Position, Age, Team, Games, Game Started, and etc.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>Top 2017 NBA FG Visualization</title>
    <style>
      body {
        margin: 11px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #d5d5d1;
      }
      .tick text {
        fill: #9e9893;
        font-size: 14pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 20pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="919" height="457"></svg>
    <script>
​
      const xValue = d => d.Field_Goals;
      const xLabel = 'Field Goals';
      const yValue = d => d.Players;
      const yLabel = 'Player';
      const margin = { left: 198, right: 30, top: 11, bottom: 97 };
​
      const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
​
      const g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');
​
      xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 59)
          .text(xLabel);
​
      yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -147)
          .attr('transform', `rotate(-90)`)
            .style('text-anchor','middle')
          .text(yLabel);      
      
      const xScale = d3.scaleLinear();
      const yScale = d3.scaleBand()
        .paddingInner(0.3)
        .paddingOuter(0);
​
      const xTicks = 10;
      const xAxis = d3.axisBottom()
        .scale(xScale)
        .ticks(xTicks)
        .tickPadding(7)
        .tickFormat(d3.format('-.02s'))
        .tickSize(-innerHeight);
​
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .tickPadding(12)
        .tickSize(-innerWidth);
​
      const row = d => {
        const Field_Goals = d['FG'];
        return {
          Players: d['Player'],
          Field_Goals: +d['FG']
        };
      };
      
      const top7 = data => data.slice(0, 9);
      
      d3.csv('2017_NBA.csv', row, data => {
        data = top7(data);
        yScale
          .domain(data.map(yValue).reverse())
          .range([innerHeight, 0]);
​
        xScale
          .domain([0, d3.max(data, xValue)])
          .range([0, innerWidth])
          .nice(xTicks);
​
        g.selectAll('rect').data(data)
          .enter().append('rect')
            .attr('x', 0)
            .attr('y', d => yScale(yValue(d)))
            .attr('width', d => xScale(xValue(d)))
            .attr('height', d => yScale.bandwidth())
            .attr('fill', 'steelblue');
​
        xAxisG.call(xAxis);
​
        yAxisG.call(yAxis);
        yAxisG.selectAll('.tick line').remove();
      });
    </script>
  </body>
</html>
​
    