D3 Examples - Resize - Mobile Cellular Subscriptions in United States

xxxxxxxxxx
 
<!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(){
​
          var width = chartDiv.clientWidth;
          var height = chartDiv.clientHeight;
        
            var margin = { left: width * 2/20, 
                        right: width * 1/20, 
                        top: height * 1/20, 
                        bottom: height * 4/20 };
        
                    var innerWidth = width - margin.left - margin.right;
          var innerHeight = height - margin.top - margin.bottom;
         
            svg
            .attr("width", width)
            .attr("height", height);
          
            // This is disallowed, so commented out.
            //var g = svg.selectAll('*').remove();
          
            g.attr('transform', `translate(${margin.left},${margin.top})`);
            xAxisG.attr('transform', `translate(0, ${innerHeight})`);
          
                    xText.attr('x', innerWidth / 2)
               .attr('y', height * 3/20)
               .style('font-size', String(18 * width/600))
               .text(xLabel);
            
            yText.attr('x', -innerHeight / 2)
                .attr('y', -width * 1/20)
                .style('font-size', String(18 * width/600))
                .attr('transform', `rotate(-90)`)
                .style('text-anchor', 'middle')
                .text(yLabel);
       
          var xScale = d3.scaleLinear();
          var yScale = d3.scaleLinear();
​
          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);
      
          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 => {
            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(data);
            
            paths
              .exit()
              .remove();
            
            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);
          });
      }
      
      redraw();
      
      window.addEventListener("resize", redraw);
    </script>
  </body>
</html>
    