D3 Examples - Most-streamed Spotify Weekly Tracks

Most-streamed Spotify Weekly Tracks
This statistic presents the most-streamed tracks on Spotify in the United States during the week ending August 20, 2017.
xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0px;
    }
    .label {
      font-size: 15pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: white;
    }
    .number, .subtitle {
      font-size: 20pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: #00bc54;
    }
    
    .subtitle2 {
      font-size: 14pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: #00bc54;
    }
    
    .bar {
      fill: #00c116;
    }
  </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', 57)
        .text('Most-streamed Weekly Tracks on Spotify in the United States');
    
    svg.append('text')
      .attr('class', 'subtitle2')
      .attr('x', margin.left)
      .attr('y', 84)
      .text('Data units in Millions of Tracks. Data is from week of August 20, 2017.');
    
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    const data = [
      {
        name: "Bank Account by 21 Savage",
        value: 8.17
      },
      {
        name: "Unforgettable by French Montana",
        value: 7.79
      },
      {
        name: "XO TOUR Llif3 by Lil Uzi Vert",
        value: 7.63
      },
      {
        name: "Wild Thoughts by DJ Khaled",
        value: 6.97
      },
      {
        name: "Despacito - Remix by Luis Fonsi",
        value: 6.62
      },
      {
        name: "HUMBLE by Kendrick Lamar",
        value: 6.23
      },
      {
        name: "I'm the One by DJ Khaled",
        value: 5.7
      },
      {
        name: "Mi Gente by J Balvin",
        value: 5.65
      },
      {
        name: "Sorry Not Sorry by Demi Lovato",
        value: 5.29
      },
            {
        name: "Congratulations by Post Malone",
        value: 5.26
      }
    ];
    
    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(",.1%");
    const xPercent = d => percentFormat(xValue(d) / xScale.domain()[1]);
    
    groupsEnter
      .append('text')
        .attr('class', 'number')
        .attr('x', d => xScale(xValue(d)) + 8)
        .attr('y', yScale.bandwidth() / 2)
        .text(d => `${xValue(d)}`);
​
  </script>
</body>
​
    