D3 Examples - World population over the past five decades

xxxxxxxxxx
 
<!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="https://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>
​
    