curran/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Line chart of world population over time. Data from the United Nations Population Estimates. This is example 36 from the screencast Splitting Charts.
MIT License


## index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

    <style>

      body {
        margin: 0px;
      }

      .chart-line {
        fill: none;
        stroke: black;
        stroke-width: 5px;
      }

      .axis text {
        font-family: 'Open Sans', sans-serif;
        font-size: 12pt;
      }
      .axis .label {
        font-size: 18pt;
      }

      .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

    </style>
  </head>
  <body>
    <script>

      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 64, top: 3, right: 15, bottom: 56 };

      var xColumn = "year";
      var yColumn = "population";

      var xAxisLabelText = "Time";
      var xAxisLabelOffset = 48;

      var yAxisLabelText = "World Population";
      var yAxisLabelOffset = 40;

      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;

      var svg = d3.select("body").append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var path = g.append("path")
        .attr("class", "chart-line");

      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")")
      var xAxisLabel = xAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")")
        .attr("class", "label")
        .text(xAxisLabelText);

      var yAxisG = g.append("g")
        .attr("class", "y axis");
      var yAxisLabel = yAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
        .attr("class", "label")
        .text(yAxisLabelText);

      var xScale = d3.time.scale().range([0, innerWidth]);
      var yScale = d3.scale.linear().range([innerHeight, 0]);

      // Use a modified SI formatter that uses "B" for Billion.
      var siFormat = d3.format("s");
      var customTickFormat = function (d){
        return siFormat(d).replace("G", "B");
      };

      var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .ticks(12)
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .ticks(10)
        .tickFormat(customTickFormat)
        .outerTickSize(0);

      var line = d3.svg.line()
        .x(function(d) { return xScale(d[xColumn]); })
        .y(function(d) { return yScale(d[yColumn]); });

      function render(data){
        xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
        yScale.domain([0, d3.max(data, function (d){ return d[yColumn]; })]);

        xAxisG.call(xAxis);
        yAxisG.call(yAxis);

        path.attr("d", line(data));
      }

      function type(d){
        d.year = new Date(d.year);
        d.population = +d.population;
        return d;
      }

      d3.csv("worldPopulationByYear.csv", type, render);

    </script>
  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## worldPopulationByYear.csv

          
            year
            population

            
              1950
              2525149312

            
              1951
              2571867515

            
              1952
              2617940399

            
              1953
              2664029010

            
              1954
              2710677773

            
              1955
              2758314525

            
              1956
              2807246148

            
              1957
              2857662910

            
              1958
              2909651396

            
              1959
              2963216053

            
              1960
              3018343828

            
              1961
              3075073173

            
              1962
              3133554362

            
              1963
              3194075347

            
              1964
              3256988501

            
              1965
              3322495121

            
              1966
              3390685523

            
              1967
              3461343172

            
              1968
              3533966901

            
              1969
              3607865513

            
              1970
              3682487691

            
              1971
              3757734668

            
              1972
              3833594894

            
              1973
              3909722120

            
              1974
              3985733775

            
              1975
              4061399228

            
              1976
              4136542070

            
              1977
              4211322427

            
              1978
              4286282446.9999995

            
              1979
              4362189531

            
              1980
              4439632465

            
              1981
              4518602042

            
              1982
              4599003374

            
              1983
              4681210508

            
              1984
              4765657562

            
              1985
              4852540569

            
              1986
              4942056118

            
              1987
              5033804944

            
              1988
              5126632694

            
              1989
              5218978019

            
              1990
              5309667699

            
              1991
              5398328753

            
              1992
              5485115276

            
              1993
              5570045380

            
              1994
              5653315893

            
              1995
              5735123084

            
              1996
              5815392305

            
              1997
              5894155105

            
              1998
              5971882825

            
              1999
              6049205203

            
              2000
              6126622121

            
              2001
              6204310739

            
              2002
              6282301767

            
              2003
              6360764684

            
              2004
              6439842408

            
              2005
              6519635850

            
              2006
              6600220247

            
              2007
              6681607320

            
              2008
              6763732879

            
              2009
              6846479521

            
              2010
              6929725043

            
              2011
              7013427052

            
              2012
              7097500453

            
              2013
              7181715139

            
              2014
              7265785946

            
              2015
              7349472099

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>D3 Example</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

	<style>

	body {
	margin: 0px;
	}

	.chart-line {
	fill: none;
	stroke: black;
	stroke-width: 5px;
	}

	.axis text {
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
	}
	.axis .label {
	font-size: 18pt;
	}

	.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	</head>
	<body>
	<script>

	var outerWidth = 960;
	var outerHeight = 500;
	var margin = { left: 64, top: 3, right: 15, bottom: 56 };

	var xColumn = "year";
	var yColumn = "population";

	var xAxisLabelText = "Time";
	var xAxisLabelOffset = 48;

	var yAxisLabelText = "World Population";
	var yAxisLabelOffset = 40;

	var innerWidth = outerWidth - margin.left - margin.right;
	var innerHeight = outerHeight - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", outerWidth)
	.attr("height", outerHeight);
	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	var path = g.append("path")
	.attr("class", "chart-line");

	var xAxisG = g.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + innerHeight + ")")
	var xAxisLabel = xAxisG.append("text")
	.style("text-anchor", "middle")
	.attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")")
	.attr("class", "label")
	.text(xAxisLabelText);

	var yAxisG = g.append("g")
	.attr("class", "y axis");
	var yAxisLabel = yAxisG.append("text")
	.style("text-anchor", "middle")
	.attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
	.attr("class", "label")
	.text(yAxisLabelText);

	var xScale = d3.time.scale().range([0, innerWidth]);
	var yScale = d3.scale.linear().range([innerHeight, 0]);

	// Use a modified SI formatter that uses "B" for Billion.
	var siFormat = d3.format("s");
	var customTickFormat = function (d){
	return siFormat(d).replace("G", "B");
	};

	var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
	.ticks(12)
	.outerTickSize(0);
	var yAxis = d3.svg.axis().scale(yScale).orient("left")
	.ticks(10)
	.tickFormat(customTickFormat)
	.outerTickSize(0);

	var line = d3.svg.line()
	.x(function(d) { return xScale(d[xColumn]); })
	.y(function(d) { return yScale(d[yColumn]); });

	function render(data){
	xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
	yScale.domain([0, d3.max(data, function (d){ return d[yColumn]; })]);

	xAxisG.call(xAxis);
	yAxisG.call(yAxis);

	path.attr("d", line(data));
	}

	function type(d){
	d.year = new Date(d.year);
	d.population = +d.population;
	return d;
	}

	d3.csv("worldPopulationByYear.csv", type, render);

	</script>
	</body>
	</html>
	year	population
	1950	2525149312
	1951	2571867515
	1952	2617940399
	1953	2664029010
	1954	2710677773
	1955	2758314525
	1956	2807246148
	1957	2857662910
	1958	2909651396
	1959	2963216053
	1960	3018343828
	1961	3075073173
	1962	3133554362
	1963	3194075347
	1964	3256988501
	1965	3322495121
	1966	3390685523
	1967	3461343172
	1968	3533966901
	1969	3607865513
	1970	3682487691
	1971	3757734668
	1972	3833594894
	1973	3909722120
	1974	3985733775
	1975	4061399228
	1976	4136542070
	1977	4211322427
	1978	4286282446.9999995
	1979	4362189531
	1980	4439632465
	1981	4518602042
	1982	4599003374
	1983	4681210508
	1984	4765657562
	1985	4852540569
	1986	4942056118
	1987	5033804944
	1988	5126632694
	1989	5218978019
	1990	5309667699
	1991	5398328753
	1992	5485115276
	1993	5570045380
	1994	5653315893
	1995	5735123084
	1996	5815392305
	1997	5894155105
	1998	5971882825
	1999	6049205203
	2000	6126622121
	2001	6204310739
	2002	6282301767
	2003	6360764684
	2004	6439842408
	2005	6519635850
	2006	6600220247
	2007	6681607320
	2008	6763732879
	2009	6846479521
	2010	6929725043
	2011	7013427052
	2012	7097500453
	2013	7181715139
	2014	7265785946
	2015	7349472099