Q-Zhao · October 16, 2017 23:32
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!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>
diff --git a/mobile-cellular-subscriptions-by-country.csv b/mobile-cellular-subscriptions-by-country.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!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>