Top 10 largest US cities by population

This plot describes the top 10 largest us cities. I followed the instructions of Introduction to D3.

The original template is from Scatter Plot with Ordinal Axis

The data shown here comes from Top 10 largest US cities by population.

forked from curran's block: Scatter Plot with Ordinal Axis

<!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 10 Largest US Cities</title>
    <style>
      body {
        
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #5241f4;
      }
      .tick text {
        fill: #5241f4;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: white;
        font-size: 16pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>

const xValue = d => d.city;
      const xLabel = 'City';
      const yValue = d => d.population;
      const yLabel = 'Population';
      const margin = { left: 120, right: 70, top: 20, bottom: 80 };

const svg = d3.select('svg').style("background-color", "black");
      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', 60)
          .text(xLabel);

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);

const xScale = d3.scalePoint();
      const yScale = d3.scaleLinear();

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(18)
        .tickSize(-innerHeight);

const yTicks = 10;
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(yTicks)
        .tickPadding(10)
        .tickFormat(d3.format('.0s'))
        .tickSize(-innerWidth);

const row = d => {
        //const netUsersWithCommas = d['Internet Users 31 Mar 2017'];
        return {
          city: d['City'],
          population: +d['Population']
        };
      };

//const top5 = data => data.slice(0, 5);

d3.csv('data.csv', row, data => {
        //data = top5(data);
        xScale
          .domain(data.map(xValue))
          .range([0, innerWidth]);

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice(yTicks);

g.selectAll('circle').data(data)
          .enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', 'white')
            .attr('fill-opacity', 0.8)
            .attr('r', 8);

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
      });
    </script>
  </body>
</html>

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