D3 Examples - W6 exercise

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 6 exercise - Mikel Madina</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<style type="text/css">
            
            body {
                background-color: white;
                font-family: Helvetica, Arial, sans-serif;
            }
​
            h1 {
                font-size: 24px;
                margin: 0;
            }
​
            p {
                font-size: 14px;
                margin: 10px 0 0 0;
            }
​
            svg {
                background-color: white;
            }
​
            circle:hover {
                fill: orange;
            }
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
​
            g.highlight path {
                stroke: rgba(255,0,0,0.35);
                stroke-width: 2;
            }
​
        </style>
</head>
<body>
<h1>Evolution of percentages of people in risk of poverty per town in Gipuzkoa</h1>
<p>The Y axis shows the percentage of people in risk of poverty.</p>
<p>The towns where the percentage grew from 2012 to 2013 are highlighted in red.</p>
<script type="text/javascript">
    var w = 700;
    var h = 500;
    var padding = [ 20, 70, 30, 70 ];  //Top, right, bottom, left
    
    //Set up date formatting and years
    var dateFormat = d3.time.format("%Y");
    //Set up scales
    var xScale = d3.time.scale()
        .range([ padding[3], w - padding[1] - padding[3] ]);
    
    var yScale = d3.scale.linear()
        .range([ padding[0], h - padding[2] ]);
​
    //Configure axis generators
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
        .ticks(2)
        .tickFormat(function(d) {
            return dateFormat(d);
        });
    
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .tickFormat(function(d) {
            return d + "%";
        });
​
    var yRightAxis = d3.svg.axis()
        .scale(yScale)
        .orient("right")
        .tickFormat(function(d) {
            return d + "%";
        });
​
​
    //Configure line generator
    var line = d3.svg.line()
        .x(function(d) {
            return xScale(dateFormat.parse(d.year));
        })
        .y(function(d) {
            return yScale(+d.amount);
        });
​
    //Create the empty SVG image
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
​
//Load in contents of CSV file
d3.csv("pobreziaetabazterketaarriskukopertsonak2012-2013.csv", function(data) {
    
    var years = ["2012", "2013"]
​
    var dataset = []
​
    //Loop once for each row in data
    for (var i = 0; i < data.length; i++) {
        //Create new object with this country's name and empty array
        dataset[i] = {
            udala: data[i].UDALA,
            biztanleak: data[i].BIZTANLEAK,
            indikadoreak: []
        };
​
        //Loop through all the years
        for (var j = 0; j < years.length; j++) {
            // If value is not empty
            if (data[i][years[j]]) {
            //Add a new object to the emissions data array
            //for this country
                dataset[i].indikadoreak.push({
                    year: years[j],
                    amount: 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.indikadoreak, function(d) {
                            return +d.amount;
                        });
                    }),
                    0
                ]);
​
// first graph, poverty relative values to population
​
//Make a group for each country
                var groups = svg.selectAll("g")
                    .data(dataset)
                    .enter()
                    .append("g")
                    .classed("highlight", function(d) {
                        for (var i = 0; i < data.length; i++) {
                            if (d.indikadoreak[0].amount < d.indikadoreak[1].amount ) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    });
​
                //Append a title with the country name (so we get easy tooltips)
                groups.append("title")
                    .text(function(d) {
                        return d.udala + " (" + d.biztanleak +")";
                    });
//Within each group, create a new line/path,
                //binding just the emissions data to each one
                groups.selectAll("path")
                    .data(function(d) {
                        return [ d.indikadoreak ];
                    })
                    .enter()
                    .append("path")
                    .attr("class", "line")
                    .attr("d", line)
                    .attr("fill", "none")
                    .attr("stroke", "rgba(100,100,100,0.5)")
                    .attr("stroke-width", 2);
​
​
​
​
//Axes
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + (h - padding[2]) + ")")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (padding[3]) + ",0)")
                    .call(yAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (w - 2*(padding[1])) + ",0)")
                    .call(yRightAxis);
​
            });
            //End USA data load function
</script>
</body>
</html>
​
    