D3 Examples - d3.js SF Eviction Notice Barplot Example

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Loading CSV Data with D3</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
        body {
            font-family:  "Palatino Linotype", "Book Antiqua", Palatino, serif;
            background-color: white;
            padding: 50px;
        }
        p {
            max-width: 1000px;
        }
        figure { 
            display: block;
            margin-top: 1em;
            margin-bottom: 1em;
            margin-left: 40px;
            margin-right: 40px;
        }
        figcaption {
            padding: 5px;
            font-family: ;
            font-size: 0.8em;
            font-weight: 700;
            border: none;
            background: transparent;
            word-wrap:normal;
            text-align: center;
        }
        em {
            color: black; 
            font-weight: bold;
            font-style: italic;
            }
        em1 {
            color: darkred; 
            font-weight: bold;
            font-style: italic;
            }
        svg {
            background-color: white;
            
        }
​
        </style>
    </head>
    <body>
        <figure>
            <img src = "https://media1.fdncms.com/sfexaminer/imager/evictions/u/original/2627321/evictions_mural.jpg" width = "1000" height = "547" alt=""/>            
            <figcaption style="text-align:left">PHOTO CREDIT: MIKE KOOZMIN/THE S.F. EXAMINER, November 15, 2013 </figcaption>
        </figure>
        
        <h1> SF Eviction Notices from 1997 - 2015,<em1> a first look</em1></h1>
        <p>Mouse over the bars to see in what <em>years</em> and in what San Francisco <em>neighborhoods</em> the number of eviction notices has been the greatest. Is the high eviction rate (<em1>or at least</em1> eviction notice rate) a thing of the past?</p>
        
        <p>Data from: data.sfgov.org (https://data.sfgov.org/Housing-and-Buildings/2012-Housing-Inventory/4xa2-t52k) </p>
​
        <script type="text/javascript">     
                
                //Width and height
                var w = 800;
                var h = 7000;
​
                var svg = d3.select("body")
                            .append("svg")
                            .attr("width", w)
                            .attr("height", h);
​
                //Load in contents of CSV file
            d3.csv("SF_EvictionNotices.csv", function(data) {
​
                data.sort(function(a, b) {
                    return d3.descending(+a.Total, +b.Total);
                });
​
                var c20 = d3.scale.category20();
​
​
                var bars = svg.selectAll("rect")
                    .data(data)
                    .enter()
                    .append("rect");
​
​
                bars.attr("x",0)
                    .attr("y", function(d,i) {
                        return i *10;
                    })
                    .attr("width", function(d) {
                        return  (w / 340) * d.Total;
                    })
                    .attr("height", 8)
                    .attr("fill", function(d) { return c20(d.Neighborhood); 
                    })
                    // .on("mousedown", function(d) {
                    //  fadeIn(0.15, d);
                    // })
                    // .on("mouseup", function(d) {
                    //  fadeOut(1, d)
                    // })
                    .on("mouseover", function(d) {
                        fadeIn(0.15, d);
                    })
                    .on("mouseout", function(d) {
                        fadeOut(1, d)
                    })
                    .append("title")
                    .text(function(d) {
                        return "The " + d.Neighborhood + " neighborhood had a total of " + d.Total + " eviction notices in " + d.Year
                    })
​
​
            });
​
function fadeIn(opacity, d) {
  d3.selectAll("rect")
    .filter(function(e) { return e !== d; })
    .transition()
    .duration(50)
    .style("opacity", opacity);
}
​
function fadeOut(opacity, d) {
  d3.selectAll("rect")
    .filter(function(e) { return e !== d; })
    .transition()
    .duration(275)
    .style("opacity", opacity);
}
​
​
        </script>
​
    </body>
</html>
    