D3 Examples - Top 5 Largest U.S. Cities by Population

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .label{
      font-size:20px;
      font-family:'sans-serif';
      fill:yellow;
      alignment-baseline:middle;}
    .number{
      font-size:20px;
      font-family:'sans-serif';
      fill:#0000c1;
      alignment-baseline:middle;}
    .substitle{
      font-size:36px;
      font-family:'sans-serif';
      fill:#0000c1;
      alignment-baseline:middle;}
    .bar{
      fill:#8e0015
    }
  </style>
</head>
​
<body>
  <script>
    const width=960;
    const height=500;
    const margin={
      left:20,
      right:200,
      top:100,
      bottom:100
    };
    const svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
    svg.append('text')
        .attr('class','substitle')
      .attr('x',margin.left)
        
      .attr('y',80).text('Top 5 Largest U.S. Cities by Population')
    const g=svg.append('g')
        .attr('transform',`translate(${margin.left},${margin.top})`);
    
    const data=[
      {name:"New York City",
       value:8550405,
      },
      {name:"Los Angeles",
       value:3971883,
      },
      {name:"Chicago",
       value:2720546,
      },
      {name:"Houston",
       value:2296224,
      },
      {name:"Philadelphia",
       value:1567442,
      }
      
    ];
    
    const innerHeight=height-margin.top-margin.bottom;
    const innerWidth=width-margin.left-margin.right;
    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.3);
    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', 8)
        .attr('y', yScale.bandwidth() / 2)
        .text(yValue);
    
    
    groupsEnter
      .append('text')
        .attr('class', 'number')
        .attr('x', d => xScale(xValue(d)) + 8)
        .attr('y', yScale.bandwidth() / 2)
        .text(xValue);
  </script>
</body>
    