D3 Examples - Life expectancy at birth

xxxxxxxxxx
 
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Module 3 Exercise -- Life Expectancy for all the countries.</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js">
    </script>
    </head>
​
    <body>
        <h2>Life expectancy at birth in years for various countries for the year 2012.</h2>
        <h5>Life expectancy at birth indicates the number of years a newborn infant would live if prevailing patterns of mortality at the time of its birth were to stay the same throughout its life.</h5>
        <script type="text/javascript">
                console.clear();
            //<![CDATA[
                var w = 950;
                var h = 585;
                var normalFillColor = "#BCF5A9";
                var clickFillColor = "#FF6600";
                var hoverFillColor = "#006680";
                function randomIntForPickingData(min, max) {
                    return Math.floor(Math.random() * (max - min + 1) + min);
                }
                var changeColorOnClick = (function(){
                    var currentColor = normalFillColor;
​
                    return function(){
                        currentColor = currentColor == normalFillColor ? clickFillColor : normalFillColor;
                        d3.select(this).style("fill", currentColor);
                    }
                })();
​
                var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);
​
                //Load in contents of CSV file
                d3.csv("LifeExpectancyAtBirth.csv", function(csvData) {
                    console.time("barchart");
                    var barPadding = 1;
                    // csvData.forEach(function(row) {
                    //  console.log(Object.keys(row));
                    // });
                    csvData.sort(function(a, b) {
                        return d3.descending(+a["2012"], +b["2012"]);
                    });
                    // console.log(csvData.length);
                    var newData = [];
                    var j = 0;
                    //As our csvData is huge, get the top 15 and bottom 15 rows; but this does not give a proper distribution. So, no point.
                    //var csvData = csvData.slice(0,15).concat(csvData.slice(csvData.length-15,csvData.length));
                    
                    //As our csvData is huge, we will only use a subset of the data and for even distribution, we will select one row every n-random-rows to get 30 to 40 rows for the chart; beyond these number of rows, display gets rather too absurd.
                    var randomInt = randomIntForPickingData(5, 8);
                    for(i = 0; i < csvData.length; i += randomInt) {
                        newData[j] = csvData[i];
                        j++;
                    }
                    csvData = newData;
​
                    svg.selectAll("barchart")
                       .data(csvData)
                       .enter()
                       .append("rect")
                       .attr("x", function(d, i) {
                            return 150;
                        })
                       .attr("y", function(d, i) {
                            return Math.ceil(i * (h / csvData.length));
                        })
                       .attr("width", function(d, i) { 
                            return Math.ceil(d["2012"] * 4);
                        })
                       .attr("height", function(d, i) {
                            return Math.floor(h / csvData.length - barPadding - 2.5);
                        })
                       .attr("fill", function(d) {
                            //Cant seem to get random colors; Also it might be incorrect to display random colors since we are dealing with the data for a single type of definition.
                            //return "rgb(0, 0, " + (d["2012"] * 10) + ")";
                            return normalFillColor;
                        })
                       .on("mouseover", function(d, i) {
                          d3.select(this).attr("r", 10).style("fill", hoverFillColor);
                        })                  
                        .on("mouseout", function(d, i) {
                          d3.select(this).attr("r", 5.5).style("fill", normalFillColor);
                        })
                       .on("click", changeColorOnClick);;
                    console.timeEnd("barchart");
​
                    console.time("data-values");
                    svg.selectAll("data-values")
                       .data(csvData)
                       .enter()
                       .append("text")
                       .text(function(d, i) {
                            return d["2012"];
                       })
                       .attr("text-anchor", "middle")
                       .attr("x", function(d, i) {
                            return Math.floor((d["2012"] * 4) - 5 + 140);
                       })
                       .attr("y", function(d, i) {
                            return Math.floor(i * (h / csvData.length) + (h / csvData.length - barPadding) / 1.45);
                       })
                       .attr("fill", "black")
                       .attr("font-size", "10px")
                       .attr("font-family", "roboto");
                    console.timeEnd("data-values");
​
                    console.time("axis-labels");
                    svg.selectAll("axis-labels")
                        .data(csvData)
                        .enter()
                        .append("text")
                        .attr("x", 145)
                        .attr("y", function(d, i) {
                            return Math.floor(i * (h / csvData.length) + (h / csvData.length - barPadding) / 1.35);
                        })
                        .attr("fill", "black")
                        .attr("font-size", "10px")
                        .attr("font-family", "roboto")
                        .attr("font-weight", "bold")
                        .attr("text-anchor", "end")
                        .text(function(d) {
                            return d.CountryName
                        });
                    console.timeEnd("axis-labels");
                });
            //]]>
        </script>
    </body>
</html>
    