[unlisted] Resize - Mobile Cellular Subscriptions in United States

Built with blockbuilder.org

This data is from Our World in Data.

This dataset is about the mobile phone substriber number of different countries from 1980 to 2013.

forked from curran's block: Line Chart of Temperature and Responding to Resize

forked from Q-Zhao's block: Resize - Mobile Cellular Subscriptions in United States

<!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>Mobile Cellular Subscriptions in United States</title>
    <style>
      
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
      
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text {
        fill: #8E8883;
        font-size: 12pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 18pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="chart" ></div>
    <script>
      
      var chartDiv = document.getElementById("chart");
      var svg = d3.select(chartDiv).append("svg");
          
      const xValue = d => d['Year'];
      const xLabel = 'Year';
      const yValue = d => d['Mobile cellular subscriptions'];
      const yLabel = 'Subscription per 100 people';

var g = svg.append('g');
      var dataG = g.append('g');
     
      var xAxisG = g.append('g');        
      var yAxisG = g.append('g');
      var xText = xAxisG.append('text').attr('class', 'axis-label');
      var yText = yAxisG.append('text').attr('class', 'axis-label');

function redraw(data){

var xAxis = d3.axisBottom()
            .scale(xScale)
            .tickPadding(innerHeight * 0.5/20)
            .ticks(5)
            .tickSize(-innerHeight)
            .tickFormat(d3.format("d"));

var yTicks = 5;
          var yAxis = d3.axisLeft()
            .scale(yScale)
            .ticks(yTicks)
            .tickPadding(innerWidth * 0.3/20)
            .tickSize(-innerWidth)
            .tickFormat(d3.format("d"));
       
          var line = d3.line()
              .x(d => xScale(xValue(d)))
              .y(d => yScale(yValue(d)))
              .curve(d3.curveBasis);

xScale
            .domain(d3.extent(data, xValue))
            .range([0, innerWidth])
            .nice();

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

var paths = dataG.selectAll('path').data([null]);
          paths
            .enter()
              .append('path')
              .attr('fill', 'none')
              .attr('stroke', 'red')
              .attr('stroke-width', 4)
            .merge(paths)
              .attr('d', line(data));

xAxisG.call(xAxis);
          yAxisG.call(yAxis);
      }
      
      var row = d => {
        if(d['Entity'] === "United States"){
          d['Year'] = +d['Year'];
          d['Mobile cellular subscriptions'] 
            = +d['Mobile cellular subscriptions'];
          return d;
        }
      };
      
      d3.csv('mobile-cellular-subscriptions-by-country.csv', row, data => {
        redraw(data);
        window.addEventListener("resize", () => redraw(data));
      });
    </script>
  </body>
</html>

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