D3 Examples - Exercise 6: Cash for Care recipients by age and sex

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Excercise module 6</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            body{
                margin-left : 4em;
                margin-right : 4em;
            }
            svg {
                background-color: white;
            }
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: Arial, sans-serif;
                font-size: 12px;
            }
​
​
​
​
        </style>
    </head>
    <body>
        <h2>Cash for Care recipients by age and sex</h2>
        <p>
            In 2012 the cash for care benefits was increased for the one year olds
            not in day care,  the benefits was removed for 2 year olds to further promote parents
            participation in the workforce.</p>
        <script type="text/javascript">     
​
            function drawYear(data){
​
                var width = 500;
                var height = 400;
​
​
                var svg = d3.select("body").append("svg");
                svg.attr("width",width).attr("height",height)
​
                var padding = {
                  top: 50,
                  right: 20,
                  bottom: 20,
                  left: 50
                };
​
​
                var dateFormat = d3.time.format("%Y");
​
​
                var xScale = d3.time.scale()
                    .range([padding.left, width - padding.left - padding.right ]);
​
​
​
                var yScale = d3.scale.linear()
                                    .range([ padding.top, height - padding.bottom]);
        
​
​
                var xAxis = d3.svg.axis()
                                .scale(xScale)
                                .ticks(10)
                                .tickFormat(function(d) {
                                    return dateFormat(d);
                                })
                                .orient("bottom");
​
​
                var yAxis = d3.svg.axis()
                                .scale(yScale)
                                .orient("left");
​
​
​
                //Configure line generator
                var line = d3.svg.line()
                    .x(function(d) {
                        return xScale(dateFormat.parse(d.year));
                    })
                    .y(function(d) {
                        return yScale(+d.number);
                    });
​
                /*********
​
                    [
                        {
                            group: "Women 24 og younger",
                            recipients: [
                                        { year: 2006, number: 90589.568 },
                                        { year: 2007, number: 90589.568 },
                                        { year: 2008, number: 90589.568 },
                                        …
                                       ]
                        },
                        …
                     ]
​
                ********************************/
​
                var years = ["2006", "2007", "2008", "2009", "2010","2011","2012","2013","2014"];
                var dataset = [];
                for (var i = 0; i < data.length; i++) {
                    dataset[i] = {
                        group : data[i]["Category"],
                        recipients : []
                    };
                    for (var j = 0; j < years.length; j++) {
                        dataset[i].recipients.push( {
                            year : years[j],
                            number : data[i][years[j]]
                            });
                    }
                }
​
                //Set scale domains
                xScale.domain([ 
                    d3.min(years, function(d) {
                        return dateFormat.parse(d);
                    }),
                    d3.max(years, function(d) {
                        return dateFormat.parse(d);
                    })
                ]);
​
                yScale.domain([ 
                    d3.max(dataset, function(d) {
                        return d3.max(d.recipients, function(d) {
                            return +d.number;
                        });
                    }),
                    0
                ]);
​
                var groups = svg.selectAll("g")
                    .data(dataset)
                    .enter()
                    .append("g")
                    .attr("stroke",
                      function (d,i){
                        console.log(d)
                        if(d.group.indexOf("Men") > -1){
                            return "steelblue";
                        }else{
                            return "red";
                        }
                      }
                      );
​
​
​
                groups.append("title")
                    .text(function(d) {
                        return d.group;
                    });
​
                groups.selectAll("path")
                    .data(function(d) {
                        return [ d.recipients ];
                    })
                    .enter()
                    .append("path")
                    .attr("class", "line")
                    .attr("d", line)
                    .attr("fill", "none")
                    .attr("stroke-width", 2)
                    ;
​
                    //Axes
                    svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + (height - padding.bottom) + ")")
                        .call(xAxis);
    
                    svg.append("g")
                        .attr("class", "y axis")
                        .attr("transform", "translate(" + (padding.left) + ",0)")
                        .call(yAxis);
​
​
            }
​
​
            //Load in contents of CSV file
            d3.csv("Number of Cash for Care recipients by year and sex2.csv", function(data) {
                drawYear(data);
            })
​
    </script>
​
    </body>
</html>
    