Horizontal Bar Chart of 2017 NBA

Part of the video course: D3.js in Motion.

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.

forked from curran's block: Horizontal Bar Chart

<!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;

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>

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