d3.js SF Eviction Notice Barplot Example

<!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>

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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js