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.

This bar chart was inspired by this bar chart created by statista. The Data originally comes from Spotify Charts.

Built with blockbuilder.org

forked and edited from curran's block: Extremist Murders in the US

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

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