D3 Examples - Module 6

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Loading CSV Data</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
​
            path.data:hover {
                stroke: #A39;
                stroke-width:2;
            }
​
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
        </style>
    </head>
    <body>
        <h2>
            Death caused by tuberculosis by countries 
        </h2>
        <p>
        Number of deaths caused by tuberculosis by countries from 2007 to 2013 (source : <a href="https://www.who.int/en/"> WHO</a>)
        </p>
        <script type="text/javascript">     
​
        var h = 600;
        var w = 600;
​
        var svg = d3.select("body")
        .append("svg")
        .attr("width",w)
        .attr("height",h);  
​
        var padding = [50,10,30,50] //top,right,bottom,left
​
        var dateFormat = d3.time.format("%Y");
​
        var xScale = d3.time.scale()
                    .range([padding[3],w-padding[1]]);
​
        var yScale = d3.scale.linear()
                    .range([h-padding[2], padding[0]]);
        
        var xAxis = d3.svg.axis()
                          .scale(xScale)
                          .orient("bottom")
                          .ticks(5)
                          .tickFormat(function(d) {
                                return dateFormat(d);
                            });;                          
​
        var yAxis = d3.svg.axis()
                          .scale(yScale)
                          .orient("left")
                          .ticks(5);
        
    
        //Load in contents of CSV file
        d3.csv("https://gist.githubusercontent.com/Alfsig/83925d69a691275bf09a/raw/664d9ddadeaa6a51e598d7a2e59a7c1540ce1a57/data_diseases.csv",function(data) {
​
            dataCountry = data.map(function(d){
                return d['Country']; 
            });
​
            xScale.domain([d3.min(data,function(d){return dateFormat.parse(d.Year);}),d3.max(data,function(d){return dateFormat.parse(d.Year);})]);
​
            yScale.domain([0,d3.max(data, function(d){
                n = d['Number of deaths due to tuberculosis']; 
                return parseFloat(n.substring(0,n.indexOf('\[')-1))
            })]);
​
            filtered = [];
            countryPushed = [];
​
            data.forEach(function(d) { 
                if (countryPushed.indexOf(d.Country) == -1) {
                    filtered.push(data.filter(function(c){return c.Country == d.Country}));
                    countryPushed.push(d.Country);
                }
            })
​
            var line = d3.svg.line()
                .x(function(d) { 
                    return xScale(dateFormat.parse(d.Year));
                })
                .y(function(d) { 
                    n = d['Number of deaths due to tuberculosis']; 
                    return yScale(parseFloat(n.substring(0,n.indexOf('\[')-1)));
                })
​
            for (var i = 0; i < filtered.length; i++) {
                svg.data([filtered[i]])
                    .append("path")
                    .attr("class","data")
                    .attr("d",line)
                    .attr("fill","none")
                    .attr("stroke","steelblue")
                    .attr("stroke-width",1)
                    .append("title")
                    .text(function(d) {return d[0].Country;})
            }
                
            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)
        });
​
        </script>
​
    </body>
</html>
​
    