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

forked from Q-Zhao's block: 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>
      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: 20pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d['Year'];
      const xLabel = 'Year';
      const yValue = d => d['Mobile cellular subscriptions'];
      const yLabel = 'Subscription per 100 people';
      const margin = { left: 120, right: 60, top: 20, bottom: 120 };

const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 80)
          .text(xLabel);

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);

const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .ticks(5)
        .tickSize(-innerHeight)
      	.tickFormat(d3.format("d")); 
      const yTicks = 5;
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(yTicks)
        .tickPadding(15)
        .tickSize(-innerWidth)
      	.tickFormat(d3.format("d"));

const line = d3.line()
        .x(d => xScale(xValue(d)))
        .y(d => yScale(yValue(d)))
        .curve(d3.curveBasis);

const 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);

g.append('path')
            .attr('fill', 'none')
            .attr('stroke', 'red')
            .attr('stroke-width', 4)
            .attr('d', line(data));

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
      });
    </script>
  </body>
</html>

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