D3 Examples - Population in US

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Population in US</title>
    <style>
​
        .y.axis path {
            display: none;
        }
​
        .y.axis line {
            stroke: #fff;
            stroke-opacity: .2;
            shape-rendering: crispEdges;
        }
​
        .y.axis .major line {
            stroke: #000;
            stroke-opacity: 1;
        }   
​
        .birthyear,
        .age {
            text-anchor: middle;
        }
​
        .birthyear {
            fill: #fff;
        }
​
        rect {
            fill-opacity: .6;
            fill: #e377c2;
        }
​
        rect:first-child {
            fill: #1f77b4;
        }       
​
        .title {
            font: 300 78px Helvetica Neue;
            fill: #666;
            text-anchor : end;
        }
    </style>
</head>
<body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
        var margin = { top: 20, right: 40, bottom: 30, left: 20 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
​
        var barWidth = (width/20)-1;
​
        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 + ')');
​
        var xScale = d3.scale.linear().range([0, width]);
        var yScale = d3.scale.linear().range([height, 0]);
​
        var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("right")
        // .tickSize(-(width + margin.left + margin.right))
        .tickSize(-width)
        .tickFormat(function(d) { return Math.round(d / 1e6) + "M"; });
        var initYear, minYear, maxYear, presentYear;
​
        d3.csv('population.csv', function(d) {
            return {
                year:+d.year,
                age:+d.age,
                sex:+d.sex,
                people:+d.people,
            };
        }, function(err, data) {
            maxYear = d3.max(data, function(d) {return d.year;});
            initYear = presentYear = maxYear;
            minYear = d3.min(data, function(d) {return d.year});
            //Domains updated
            // xScale.domain([maxYear - d3.max(data, function(d) {return d.age;}), maxYear]);
            xScale.domain([0, 95]);
            yScale.domain([0, d3.max(data, function(d) {return d.people;})]);
            data = d3.nest()
            .key(function(d) {return d.year})
            .key(function(d) {return d.age})
                // .key(function(d) {return d.year - d.age})
                .rollup(function(d) {return d.map(function(s) {return s.people;})})
                .map(data);
​
                plotGraph.call(svg, {
                    data:data,
                    axis:{
                        y:yAxis,
                    }
                });
            });
​
        function drawAxis(params) {
            this.append('g')
            .classed("y axis", true)
            .attr('transform', 'translate(' + (width) + ',' + 0 + ')')
            .call(params.axis.y)
            .selectAll("g")
            .filter(function(val) {
                return !val;
            })
            .classed("major", true);
        }
​
        function plotGraph(params) {
            // console.log(params.data);
            var birthyears = this.append("g")
            .classed('birthyears', true);
​
            var title = this.append("text")
            .attr("class", "title")
            .attr("dy", ".71em")
            .text(initYear)
            .attr('transform', 'translate(' + (width) + ',' + 0 + ')')
​
            var birthyear = birthyears.selectAll('.birthyear')
            .data(d3.range(0, 90 + 1, 5))
            .enter()
            .append('g')
            .classed('birthyear', true)
            .attr('transform', function(d) {return 'translate(' + xScale(d) + ',' + 0 + ')';} );
​
            birthyear.selectAll('rect')
            .data(function(age) {return params.data[initYear][age] || [0,0];})
            .enter()
            .append('rect')
            .attr({
                // 'x': -barWidth/2,
                'y': yScale,
                'width': barWidth,
                'height': function(d) {return height - yScale(d);}
            });
​
            birthyear.append('text')
            .attr('x', barWidth/2)
            .attr('y', height-4)
            .text(function(d) {return d;});
​
            drawAxis.call(this, params);
​
            d3.select(window).on('keydown', function() {
                switch(d3.event.keyCode) {
                    case 37: initYear = Math.max(minYear, initYear-10); break;
                    case 39: initYear = Math.min(maxYear, initYear+10); break;
                    default: return;
                }
                if(!(initYear in params.data) || initYear === presentYear) {
                    return;
                }
​
                title.text(initYear);
                
                presentYear = initYear;
                var rects = birthyear.selectAll('rect,text');
                rects
                .remove();
​
                birthyear.selectAll('rect')
                .data(function(age) {return params.data[initYear][age] || [0,0];})
                .enter()
                .append('rect')
                .attr('height', 0)
                .transition()
                .attr({
                    'y': yScale,
                    'width': barWidth,
                    'height': function(d) {return height - yScale(d);}
                });
​
                birthyear.append('text')
                .text(function(d) {return d;})
                .attr({
                    'y': height-4,
                    'x': barWidth/2
                });
            });
        }
​
    </script>
</body>
</html>
    