D3 Examples - 2013 Adult Smoking Data, US, State by State

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Up in smoke</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <style type="text/css">
            
            body {
                margin: 0;
                background-color: #53565a;
                font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
            }
​
            #container {
                width: 750px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 50px;
                padding: 50px;
                background-image:url(cigarette.svg);
                background-repeat:no-repeat;
                background-position:bottom;
                background-color: #ebebeb;
                box-shadow: -4px -4px 2px 2px #f7941d;
            }
​
            h1 {
                font-size: 48px;
                margin: 0;
                drop-initial-size:80px;
​
            }
​
            p {
                font-size: 16px;
                margin: 12px 0 6px 0;
            }
​
            a:link {
                text-decoration: none;
                color: #425671;
            }
​
            a:hover {
                text-decoration: underline;
            }
​
            a:visited {
                color: #6b6f74;
            }
​
            a:active {
                color: #425671;
            }
​
            svg {
                background-color:transparent;
            }
​
            g.bar text {
                font-size: 12px;
                font-weight: bold;
                text-anchor: end;
                color:#E8E8E8;
                opacity: 0;
            }
​
            g.bar:hover rect {
                fill: #f7941d;
            }
​
            g.bar:hover text {
                opacity: 1;
            }
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
​
            .y.axis path,
            .y.axis line {
                opacity: 0;
            }
​
        </style>
    </head>
    <body>
​
        <div id="container">
​
            <h1>Up in smoke</h1>
​
            <p>The percentage of adult smokers in 2013, state by state. <strong>Source:</strong> <a href="https://www.cdc.gov/statesystem/cigaretteuseadult.html">Center for Disease Control and Prevention's State Tobacco Activities Tracking and Evaluation (STATE) system</a>, 2013.</p>
​
        </div>
​
        <script type="text/javascript">     
​
​
            var w = 750;
            var h = 850;
            var padding = [ 20, 10, 30, 120 ];  //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.2);
​
​
​
            var xAxis = d3.svg.axis()
                            .scale(widthScale)
                            .orient("bottom");
                            
            var yAxis = d3.svg.axis()
                            .scale(heightScale)
                            .orient("left");
​
            var svg = d3.select("#container")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
            d3.csv("smokersbystate.csv", function(data) {
​
                data.sort(function(a, b) {
                    return d3.descending(+a.smokers, +b.smokers);
                });
​
                widthScale.domain([ 0, d3.max(data, function(d) {
                    return +d.smokers;
                }) ]);
​
                heightScale.domain(data.map(function(d) { return d.state; } ));
​
                //Bind data to groups (not bars directly)
                var groups = svg.selectAll("g")
                                .data(data)
                                .enter()
                                .append("g")
                                .attr("class", "bar");
​
                //Add a rect to each group
                var rects = groups.append("rect")
                    .attr("x", padding[3])
                    .attr("y", function(d) {
                        return heightScale(d.state);
                    })
                    .attr("width", 0)
                    .attr("height", heightScale.rangeBand())
                    .attr("fill", "#787c81");
​
                //Add a text element to each group
                groups.append("text")
                    .attr("x", function(d) {
                        return padding[3] + widthScale(d.smokers) - 3;
                    })
                    .attr("y", function(d) {
                        return heightScale(d.state) + 11;
                    })
                    .text(function(d) {
                        return d.smokers;
                    });
​
                rects.transition()
                    .delay(function(d, i) {
                        return i * 50;
                    })
                    .duration(1000)
                    .attr("width", function(d) {
                        return widthScale(d.smokers);
                    });
​
                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);
​
            });
​
​
        </script>
​
    </body>
</html>
    