ckuijjer/README.md

## README.md

      
    Raw
  

              README.md
            
          
    An implementation in D3 of Figure 4-41 "World population over the past five decades" in "Visualize This" by Nathan Yau.

  
## index.html
<!DOCTYPE html>
<body>
<style>
    body {
        font-family: Georgia;
        font-size: 14px;
        color: #333;
    }

    #container {
        width: 640px;
        height: 500px;
        margin: 0 auto;
        position: relative;
        border: 1px solid #eee;
    }

    #inner-container {
        position: absolute;
        top: 20px;
        left: 20px;
        bottom: 20px;
        right: 20px;
    }

    #header {
        font-size: 20px;
        font-weight: bold;
    }

    #description {
        position: absolute;
        width: 270px;
        right: 0;
        top: 310px;
        line-height: 1.6em;
    }

    svg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
    }

    .axis-rule {
        shape-rendering: crispEdges;
        stroke: #eee;
    }

    .axis-rule.zero {
        stroke-width: 2;
        stroke: #000;
    }

    .axis .domain {
        display: none;
    }

    .axis.x line {
        shape-rendering: crispEdges;
        stroke: #999;
    }

    .line {
        fill-opacity: 0;
        stroke-width: 4;
        stroke: #8b001b;
    }
</style>
<div id="container">
    <div id="inner-container">
        <div id="header">WORLD POPULATION</div>
        <div id="description">The world population has grown from just over 3 billion to nearly 7 billion over the past five decades.</div>
    </div>
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    var width = 640,
        height = 500,
        margin = { top: 90, right: 20, bottom: 40, left: 20},
        padding = { top: 0, right: 10, bottom: 0, left: 50 };


    // Width/height of the chart without margin and padding
    var chartWidth = width - margin.left - margin.right - padding.left - padding.right;
    var chartHeight = height - margin.top - margin.bottom - padding.top - padding.bottom;

    var xValue = function(d) { return d.year; },
        xScale = d3.scale.linear().range([0, chartWidth]),
        xMap = function(d) { return xScale(xValue(d)); },
        xAxis = d3.svg.axis()
            .scale(xScale)
            .tickFormat(d3.format('f'))
            .tickSize(8)
            .ticks(6)
            .orient('bottom');

    var yValue = function(d) { return d.population; },
        yScale = d3.scale.linear().range([chartHeight, 0]),
        yMap = function(d) { return yScale(yValue(d)); },
        yAxis = d3.svg.axis()
            .scale(yScale)
            .orient('right');

    var svg = d3.select('#container').append('svg')
        .attr('width', width)
        .attr('height', height);

    var chart = svg.append('g')
        .attr('class', 'chart')
        .attr('transform', 'translate(' + (margin.left + padding.left) + ', ' + (margin.top + padding.top) + ')');

    var csvfile = 'world-population.csv';
    d3.csv(csvfile, function(d) {
            return {
                year: +d.Year,
                population: +d.Population / Math.pow(10, 9)
            };
        }, function(error, data) {
            // Set the domain based on the data
            xScale.domain(d3.extent(data, xValue)).nice();
            yScale.domain([0, d3.max(data, yValue)]).nice();

            // Render the X axis
            chart.append('g')
                .attr('class', 'axis x')
                .attr('transform', 'translate(0, ' + chartHeight + ')')
                .call(xAxis)

            // Render the Y axis
            chart.append('g')
                .attr('transform', 'translate(' + (-padding.left - 5) + ', -12)')
                .attr('class', 'axis y')
                .call(yAxis)
                .append('text')
                    .attr('x', 24)
                    .attr('y', 6)
                    .style('text-anchor', 'start')
                    .text('billion people');

            // Render the Y axis rulers
            chart.selectAll('.axis-rule.x')
                .data(yScale.ticks(7))
                .enter()
                    .append('line')
                    .attr('class', function(d) {
                        var cls = 'axis-rule x'

                        if (d == 0) {
                            cls += ' zero';
                        }

                        return cls;
                    })
                    .attr('x1', -padding.left)
                    .attr('x2', chartWidth + padding.right)
                    .attr('y1', function(d) { return yScale(d); })
                    .attr('y2', function(d) { return yScale(d); })

            // Render the line
            chart.append('path')
                .datum(data)
                .attr('class', 'line')
                .attr('d', d3.svg.line()
                    .x(xMap)
                    .y(yMap));
        });

</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world-population.csv

          
            Year
            Population

            
              1960
              3028654024

            
              1961
              3068356747

            
              1962
              3121963107

            
              1963
              3187471383

            
              1964
              3253112403

            
              1965
              3320396924

            
              1966
              3390712300

            
              1967
              3460521851

            
              1968
              3531547287

            
              1969
              3606994959

            
              1970
              3682870688

            
              1971
              3761750672

            
              1972
              3839147707

            
              1973
              3915742695

            
              1974
              3992806090

            
              1975
              4068032705

            
              1976
              4141383058

            
              1977
              4214499013

            
              1978
              4288485981

            
              1979
              4363754326

            
              1980
              4439638086

            
              1981
              4516734312

            
              1982
              4595890494

            
              1983
              4675178812

            
              1984
              4753877875

            
              1985
              4834206631

            
              1986
              4918126890

            
              1987
              5004006066

            
              1988
              5090899475

            
              1989
              5178059174

            
              1990
              5266783430

            
              1991
              5351836347

            
              1992
              5433823608

            
              1993
              5516863641

            
              1994
              5598658151

            
              1995
              5681689325

            
              1996
              5762235749

            
              1997
              5842585301

            
              1998
              5921799957

            
              1999
              6001269553

            
              2000
              6078274622

            
              2001
              6155652495

            
              2002
              6232413711

            
              2003
              6309266583

            
              2004
              6385778679

            
              2005
              6462054420

            
              2006
              6538196688

            
              2007
              6614396907

            
              2008
              6692030277

            
              2009
              6775235741
	<!DOCTYPE html>
	<body>
	<style>
	body {
	font-family: Georgia;
	font-size: 14px;
	color: #333;
	}

	#container {
	width: 640px;
	height: 500px;
	margin: 0 auto;
	position: relative;
	border: 1px solid #eee;
	}

	#inner-container {
	position: absolute;
	top: 20px;
	left: 20px;
	bottom: 20px;
	right: 20px;
	}

	#header {
	font-size: 20px;
	font-weight: bold;
	}

	#description {
	position: absolute;
	width: 270px;
	right: 0;
	top: 310px;
	line-height: 1.6em;
	}

	svg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	}

	.axis-rule {
	shape-rendering: crispEdges;
	stroke: #eee;
	}

	.axis-rule.zero {
	stroke-width: 2;
	stroke: #000;
	}

	.axis .domain {
	display: none;
	}

	.axis.x line {
	shape-rendering: crispEdges;
	stroke: #999;
	}

	.line {
	fill-opacity: 0;
	stroke-width: 4;
	stroke: #8b001b;
	}
	</style>
	<div id="container">
	<div id="inner-container">
	<div id="header">WORLD POPULATION</div>
	<div id="description">The world population has grown from just over 3 billion to nearly 7 billion over the past five decades.</div>
	</div>
	</div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var width = 640,
	height = 500,
	margin = { top: 90, right: 20, bottom: 40, left: 20},
	padding = { top: 0, right: 10, bottom: 0, left: 50 };


	// Width/height of the chart without margin and padding
	var chartWidth = width - margin.left - margin.right - padding.left - padding.right;
	var chartHeight = height - margin.top - margin.bottom - padding.top - padding.bottom;

	var xValue = function(d) { return d.year; },
	xScale = d3.scale.linear().range([0, chartWidth]),
	xMap = function(d) { return xScale(xValue(d)); },
	xAxis = d3.svg.axis()
	.scale(xScale)
	.tickFormat(d3.format('f'))
	.tickSize(8)
	.ticks(6)
	.orient('bottom');

	var yValue = function(d) { return d.population; },
	yScale = d3.scale.linear().range([chartHeight, 0]),
	yMap = function(d) { return yScale(yValue(d)); },
	yAxis = d3.svg.axis()
	.scale(yScale)
	.orient('right');

	var svg = d3.select('#container').append('svg')
	.attr('width', width)
	.attr('height', height);

	var chart = svg.append('g')
	.attr('class', 'chart')
	.attr('transform', 'translate(' + (margin.left + padding.left) + ', ' + (margin.top + padding.top) + ')');

	var csvfile = 'world-population.csv';
	d3.csv(csvfile, function(d) {
	return {
	year: +d.Year,
	population: +d.Population / Math.pow(10, 9)
	};
	}, function(error, data) {
	// Set the domain based on the data
	xScale.domain(d3.extent(data, xValue)).nice();
	yScale.domain([0, d3.max(data, yValue)]).nice();

	// Render the X axis
	chart.append('g')
	.attr('class', 'axis x')
	.attr('transform', 'translate(0, ' + chartHeight + ')')
	.call(xAxis)

	// Render the Y axis
	chart.append('g')
	.attr('transform', 'translate(' + (-padding.left - 5) + ', -12)')
	.attr('class', 'axis y')
	.call(yAxis)
	.append('text')
	.attr('x', 24)
	.attr('y', 6)
	.style('text-anchor', 'start')
	.text('billion people');

	// Render the Y axis rulers
	chart.selectAll('.axis-rule.x')
	.data(yScale.ticks(7))
	.enter()
	.append('line')
	.attr('class', function(d) {
	var cls = 'axis-rule x'

	if (d == 0) {
	cls += ' zero';
	}

	return cls;
	})
	.attr('x1', -padding.left)
	.attr('x2', chartWidth + padding.right)
	.attr('y1', function(d) { return yScale(d); })
	.attr('y2', function(d) { return yScale(d); })

	// Render the line
	chart.append('path')
	.datum(data)
	.attr('class', 'line')
	.attr('d', d3.svg.line()
	.x(xMap)
	.y(yMap));
	});

	</script>
	</body>
	Year	Population
	1960	3028654024
	1961	3068356747
	1962	3121963107
	1963	3187471383
	1964	3253112403
	1965	3320396924
	1966	3390712300
	1967	3460521851
	1968	3531547287
	1969	3606994959
	1970	3682870688
	1971	3761750672
	1972	3839147707
	1973	3915742695
	1974	3992806090
	1975	4068032705
	1976	4141383058
	1977	4214499013
	1978	4288485981
	1979	4363754326
	1980	4439638086
	1981	4516734312
	1982	4595890494
	1983	4675178812
	1984	4753877875
	1985	4834206631
	1986	4918126890
	1987	5004006066
	1988	5090899475
	1989	5178059174
	1990	5266783430
	1991	5351836347
	1992	5433823608
	1993	5516863641
	1994	5598658151
	1995	5681689325
	1996	5762235749
	1997	5842585301
	1998	5921799957
	1999	6001269553
	2000	6078274622
	2001	6155652495
	2002	6232413711
	2003	6309266583
	2004	6385778679
	2005	6462054420
	2006	6538196688
	2007	6614396907
	2008	6692030277
	2009	6775235741