D3 Examples - Line chart of population evolution

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Line chart</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <style media="screen">
    body {
        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: rgb(128,128,128);
    }
    h1{
        font-weight: normal;
        font-size: 25px;
        color: #777;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: #777;
        shape-rendering: crispEdges;
    }
    .axis text {
        font-size: 12px;
    }
    </style>
</head>
<body>
    <h1></h1>
​
    <script type="text/javascript">
    //margin convention
    var margin = {top: 10, right: 20, bottom: 60, left: 30},
    width = 960 - margin.left - margin.right,
    height = 650 - margin.top - margin.bottom;
​
    //create x and y scale. We'll set the domain later
    var xScale = d3.time.scale()
    .range([ margin.bottom, width - margin.top - margin.bottom ]);
    var yScale = d3.scale.linear()
    .range([ height - margin.right, margin.top]);
​
    // data formatting and years
    var dateFormat = d3.time.format("%Y");
​
    //d3 functions to format numbers https://github.com/mbostock/d3/wiki/Formatting
    var format = d3.format("s");
    var formatComma = d3.format(",");
    //create x axis
    var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(8)
    .tickFormat(function(d) {
        return dateFormat(d);
    });
​
    //Germany line
    var lineGermany = d3.svg.line()
    .x(function(d) {
        return xScale(dateFormat.parse(d.year));
    })
    .y(function(d) {
        return yScale(d.Germany);
    });
​
    //Japan line
    var lineJapan = d3.svg.line()
    .x(function(d) {
        return xScale(dateFormat.parse(d.year));
    })
    .y(function(d) {
        return yScale(d.Japan);
    });
​
    //Italy line
    var lineItaly = d3.svg.line()
    .x(function(d) {
        return xScale(dateFormat.parse(d.year));
    })
    .y(function(d) {
        return yScale(d.Italy);
    });
​
    //UnitedKingdom line
    var lineUnitedKingdom = d3.svg.line()
    .x(function(d) {
        return xScale(dateFormat.parse(d.year));
    })
    .y(function(d) {
        return yScale(d.UnitedKingdom);
    });
​
    //UnitedStates line
    var lineUnitedStates = d3.svg.line()
    .x(function(d) {
        return xScale(dateFormat.parse(d.year));
    })
    .y(function(d) {
        return yScale(d.UnitedStates);
    });
​
​
    //create y axis
    var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .tickFormat(function(d) {
        return format(d);
    });
    //create svg container
    var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    //load data
    d3.csv("population.csv", function (data){
​
​
        //convert strings to number
        data.forEach(function(d){
            d.Germany = +d.Germany;
            d.Italy = +d.Italy;
            d.Japan = +d.Japan;
            d.UnitedKingdom = +d.UnitedKingdom;
            d.UnitedStates = +d.UnitedStates;
        });
        var trans = 15;
​
        /*//color scale, no significant here
        var color = d3.scale.linear()
        .domain(d3.extent(data, function(d) {
        return d.value;
    }))
    .range(["rgb(223, 196, 149)", "rgb(143, 86, 11)"])
    */
    //set scales domain
    xScale.domain([
        d3.min(data, function(d) {
            return dateFormat.parse(d.year);
        }),
        d3.max(data, function(d) {
            return dateFormat.parse(d.year);
        })
    ]);
    var totalData =
​
    yScale.domain([0, d3.max(data, function(d) {
        return d.UnitedStates;
    })]);
​
​
​
    // Germany line
​
    var germany = svg.append("path");
​
    germany.datum(data)
    .attr("class", "GermanyLine")
    .attr("d", lineGermany)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .append("title")
    .text("Germany");
​
    // Italy line
    var italy = svg.append("path");
​
    italy.datum(data)
    .attr("class", "ItalyLine")
    .attr("d", lineItaly)
    .attr("fill", "none")
    .attr("stroke", "red")
    .append("title")
    .text("Italy");
​
    // Japan line
    var japan = svg.append("path");
​
    japan.datum(data)
    .attr("class", "Japan")
    .attr("d", lineJapan)
    .attr("fill", "none")
    .attr("stroke", "orange")
    .append("title")
    .text("Japan");
​
    // UnitedKingdom line
    var uk = svg.append("path");
​
    uk.datum(data)
    .attr("class", "UnitedKingdom")
    .attr("d", lineUnitedKingdom)
    .attr("fill", "none")
    .attr("stroke", "brown")
    .append("title")
    .text("United Kingdom");
​
    // UnitedStates line
    var us = svg.append("path");
​
    us.datum(data)
    .attr("class", "UnitedStates")
    .attr("d", lineUnitedStates)
    .attr("fill", "none")
    .attr("stroke", "green")
    .append("title")
    .text("United States");
​
    //create axis
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (height) + ")")
    .call(xAxis)
    .append("text")
    .attr("y", 35)
    .attr("x",width/2-margin.left)
    .attr("dy", ".5em")
    .text("from 1960 to 2030");
    svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (margin.bottom - trans) + ",0)")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y",-55)
    .attr("x",-(height/2)-margin.top)
    .attr("dx", "1em")
    .text("Total population");
});
</script>
​
</body>
</html>
​
    