D3 Examples - Module 4 Exercise

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Module 4 Exercise</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            body {
                font-family: Segoe, Arial,sans-serif; 
            }
            
            h1 {
                font-size: 20px;
            }
​
            p {
                font-size: 15px;
            }
​
            #description,
            #footer {
                width: 95%;
                max-width: 750px;
                text-align: left;
                margin-left: 15px;      
            }
            
            svg {
                background-color: #FFFFFF;
            }
​
            .y.axis path,
            .y.axis line {
                opacity: 0; 
            }
​
            .y.axis text  {
                fill: #000000; 
                font-size: 15px;            
                font-weight: none;
            }
            
            .x.axis path,
            .x.axis line {
                fill: none;
                stroke: #000000;
                shape-rendering: crispEdges;
            }
​
            .x.axis text {
                fill: #000000; 
                font-size: 15px;
            }
​
            .hover text {
                fill: rgba(0, 0, 0, 1.0);
                font-weight: bold;
            }           
​
            .hover rect{
                fill: rgba(250,159,181, 1.0);
            }
​
        </style>
    </head>
​
    <body>
​
        <div id="description">
            <h1>Age-adjusted Stomach Cancer Death Rate Per 100,000 Women, 1930-2011</h1>
            <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>
        </div>
        
        <script type="text/javascript">     
​
            var w = 750;
            var h = 1500;
            var padding = [ 0, 0, 80, 55 ];  //Top, right, bottom, left
​
            
            var widthScale = d3.scale.linear()
                .range([ 0, w - padding[1] - padding[3] ]);
            
            var heightScale = d3.scale.ordinal()
                .rangeRoundBands([ padding[0], h - padding[2] ], 0.15);
​
            var xAxis = d3.svg.axis()
                .scale(widthScale)
                .orient("bottom");
​
            var yAxis = d3.svg.axis()
                .scale(heightScale)
                .orient("left");
​
            var svg = d3.select("body")
                .append("svg")
                .attr({
                    width: w,
                    height: h,
                });
​
            d3.csv("female_cancer_death_rates.csv", function(data) {
                console.log(data);
​
                widthScale.domain([ 0, d3.max(data, function(d) {
                    return +d.stomach + 4.7; }) ]);
​
                heightScale.domain(data.map(function(d) { 
                    return +d.year; }) );
​
                var barGroup = svg.selectAll("g")
                    .data(data)
                    .enter()
                    .append("g")
​
                barGroup.append("rect")
                    .attr({
                        x: padding[3],
                        y: function(d) { return heightScale(d.year); },
                        width: function(d) { return widthScale(d.stomach); },
                        height: heightScale.rangeBand(),
                        "fill": "rgba(174, 1, 126, 1.0)",
                    })
                    .append("title")
                    .text(function(d) {
                        return "In " + d.year + ", the stomach cancer death rate was " + d.stomach + " per 100,000 women.";
                    });                 
​
                barGroup.append("text")
                    .attr({
                        x: w,
                        y: function(d) { return heightScale(d.year) + 11.9; },
                        "text-anchor": "end",
                        "font-size": "15px",
                    })
                    .text(function(d) { return d.stomach; });
​
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + padding[3] + ", 0)")
                    .call(yAxis);
​
                barGroup.style("cursor", "pointer")
​
                barGroup.on("mouseover", function() { 
                    d3.select(this)
                        .classed("hover", true)
                });
​
                barGroup.on("mouseout", function() { 
                    d3.select(this)
                        .classed("hover", false)
                });
​
            });
        </script>
​
    <div id="footer">
        <p><b>Data source:</b> <a href="https://www.cancer.org/research/cancerfactsstatistics/cancerfactsfigures2015/index">American Cancer Society, Cancer Facts &amp; Figures 2015</a>.</p>
    </div>
    <br>
    </body>
</html>
    