D3 Examples - Assignment Week 3

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Divvy_Distances</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js">
        </script>
        <style type="text/css">
            
            body {
                
                background-color: #8B8878;font-family: helvetica;font-weight: bold; margin-left:150px;
                ;
            }
            
            svg, div {
                background-color: #E0E0E0;
            }
            
            h1, p {
                position: relative;
                left: 5px;
                color: #F8F8FF; 
            }
            
        div {text-align:center; width:800px; font-size:20px; color: #000000;
            font-weight:bold; padding-top:10px; padding-bottom:10px; 
        }
        
        </style>        
    </head>
    <body>
        
        <script type="text/javascript" >
        d3.select("body").append("h1").text("Chicago Divvy BikeShare 1 Sep 2013 to 31 Aug 2014");
        var dist = "West Loop Trip Distances in Meters";
                
        d3.select("body").append("div").text(dist);
            
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 800)
                        .attr("height",500)
                        ;
            
            d3.csv("Chicago_DivvyBikeShare_01pct.csv", function(data) {
​
​
                data.sort(function(a, b) {
                    return d3.descending(+a.ridedistM, b.ridedistM);
                });
    
                data = data.filter(function(d){return d.ridedistM < 20000 && d.ridedistM > 5500 });
                
                var rects = svg.selectAll("rect")
                                .data(data)
                                .enter()
                                .append("rect")
                                .attr("fill", "#00B2EE");
                                
                rects.attr("x", 0)
                    .attr("y", function(d,i) {
                        return i * 16;
                    })
                    .attr("width", function(d) {
                        return d.ridedistM * 0.04;  
                    })
                    .attr("height", 14);
            
                
                svg.selectAll("text")
                    .data(data)
                    .enter()
                    .append("text")
                    .text(function(d) {
                        return d.ridedistM;
                    })
                    .attr("x", function(d) {
                        return ("width", d.ridedistM * 0.04) - 26;
                    })
                    .attr("y", function(d,i) {
                        return i * 16 + 10;
                        
                    })
                    .attr("font-family", "sans-serif")
                    .attr("font-size","9px")
                    .attr("fill", "white")
                    .attr("text-anchor", "right")
                    ;
                                
                                                                    
                });
                
                                
​
​
        </script>
​
    </body>
</html>
    