rogerfischer/README.md

## README.md

      
    Raw
  

              README.md
            
          
    SF Realtor Neighborhood Maps with Mouseover
Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.land {
  fill: #ccc;
}
.boundary {
  fill: none;
  stroke: #999;
}
path {
  fill: lightgrey;
  stroke: #fff;
  stroke-width: .5px;
}
path:hover {
  fill: darkgrey;
}
</style>
<body>

<h1>SF Realtor Neighborhoods</h1>

<div id="background" style="width:960px;height:800;background:white"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>

<script>

var width = 960,
    height = 800;

var path = d3.geo.path()
    .projection(null);

var nameById = d3.map();

var svg = d3.select("#background").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("realtor_neighborhoods.json", function(error, sf) {
  if (error) return console.error(error);
  // console.log(sf);

svg.selectAll("path")
    .data(topojson.feature(sf, sf.objects.Realtor_Neighborhoods).features)
    .enter()
    .append("path")
    .attr("d", path)
    .append('svg:title').text(function(d) { /*console.log(d.properties); */
      return ("Neighborhood: " +d.properties.nbrhood  + ", " + d.properties.sfar_distr); });
});

</script>
</body>
</html>

## realtor_neighborhoods.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              realtor_neighborhoods.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.land {
	fill: #ccc;
	}
	.boundary {
	fill: none;
	stroke: #999;
	}
	path {
	fill: lightgrey;
	stroke: #fff;
	stroke-width: .5px;
	}
	path:hover {
	fill: darkgrey;
	}
	</style>
	<body>

	<h1>SF Realtor Neighborhoods</h1>

	<div id="background" style="width:960px;height:800;background:white"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>

	<script>

	var width = 960,
	height = 800;

	var path = d3.geo.path()
	.projection(null);

	var nameById = d3.map();

	var svg = d3.select("#background").append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.json("realtor_neighborhoods.json", function(error, sf) {
	if (error) return console.error(error);
	// console.log(sf);

	svg.selectAll("path")
	.data(topojson.feature(sf, sf.objects.Realtor_Neighborhoods).features)
	.enter()
	.append("path")
	.attr("d", path)
	.append('svg:title').text(function(d) { /console.log(d.properties); /
	return ("Neighborhood: " +d.properties.nbrhood + ", " + d.properties.sfar_distr); });
	});

	</script>
	</body>
	</html>