D3 Examples - Module 3 Exercise

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Module Exercise #3</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: #FFFFFF;
            }
            
            svg {
                background-color: #FFFFFF;
            }
            
            rect:hover {
                fill: rgba(247, 104, 151, 0.8);
            } 
        </style>
    </head>
    <body>
        <h2>Age-adjusted Stomach Cancer Death Rate Per 100,000 Women, 1930-2011</h2>
        <p>In the United States, the stomach cancer death rate has fallen considerably from 35.2 per 100,000 women in 1930 to 2.3 in 2011 &mdash; or a decrease of 93%. According to the American Cancer Society, the increased use of antibiotics and refrigeration may have <a href="https://www.cancer.org/cancer/stomachcancer/detailedguide/stomach-cancer-key-statistics">contributed</a> to this decline.</p>
        
        <script type="text/javascript">     
            var w = 625;
            var h = 1250;
            var barPadding = 2; 
                
            var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
​
            d3.csv("female_cancer_death_rates.csv", function(data) {
​
            var rects = svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect");
            
            rects.attr({
                x: 0,
                y: function(d,i) { return i * (h / data.length); },
                width: function(d) {return d.stomach * (w / 35.2); },
                height: h / data.length - barPadding,
                "fill": "rgba(174, 1, 126, 1.0)",
                
            });
            
            rects.append("title")
                .text(function(d) {
                    return "In " + d.year + ", the stomach cancer death rate was " + d.stomach + " per 100,000 women.";
                });
​
            var years = svg.selectAll("text")
                .data(data)
                .enter()
                .append("text")
                .text(function(d) {
                    return d.year;
                })
​
            years.attr({
                x: 0,
                y: function(d,i) { return i * (h / data.length) + 11.5; },
                "fill": "#FFFFFF",
                "font-size": "14px", 
                "font-weight": "bold", 
                "font-family": "sans-serif",
            });
        
            
            });
​
        </script>
​
        <p>Data source: <a href="https://www.cancer.org/research/cancerfactsstatistics/cancerfactsfigures2015/index">American Cancer Society, Cancer Facts &amp; Figures 2015</a>.</p>
        
    </body>
</html>
    