feyderm/index.html

## index.html
<!DOCTYPE html>
<head>

    <meta charset="utf-8">

    <style>

        #tooltip {
            font-family: sans-serif;
            color: #454545;
        }

        h3, h5 {
            margin: 0;
        }

    </style>

    <script src = "https://feyderm.github.io/d3/d3.js"></script>

</head>
<body>

    <div id = "tooltip">
        <h3><span id = "neighborhood">&nbsp</span></h3>
        <h5><span id = "datum">&nbsp</span></h5>
    </div>

    <div id="block"></div>

    <script>

        var h = 700;
        var w = 700;

        var projection = d3.geo.mercator()
                           .center([-76.612223, 39.294504])
                           .scale([150000])
                           .translate([310, 290]);

        var comma_format = d3.format(",");

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

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

        var basemap = svg.append("g");
        var points = svg.append("g");

        // load map; ref [1]
        var map = d3.json("https://feyderm.github.io/data/Baltimore_vacant_buildings_Shape.geojson", function(json) {

            // basemap for point plot
            basemap.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .attr("stroke", "grey")
                   .attr("fill", "white")
                   .on("mouseover", function(d){

                       // neigborhood fill
                       d3.select(this)
                         .attr("fill", "rgb(243, 100, 42)");

                       // neighborhood name
                       d3.select("#neighborhood")
                         .text(d.properties.csa);

                       // neigborhood data
                       d3.select("#datum")
                         .text(function() {
                             var count = parseFloat(d.properties.vacant_buildings);
                             return comma_format(count) + " vacant buildings";
                         });
                   })
                   .on("mouseout", function() {

                       d3.select(this)
                         .transition()
                         .duration(50)
                         .attr("fill", "white");

                        d3.select("#neighborhood")
                          .text("\u00A0");  // Unicode equivalent of HTML &nbsp

                        d3.select("#datum")
                          .text("\u00A0");
                   });
        });

        var vacancy = d3.csv("https://feyderm.github.io/data/Baltimore_vacant_buildings.csv", function(data) {

            data.forEach(function(d) {
                d.latitude = +d.latitude;
                d.longitude = +d.longitude;
            });

            // plot points
            points.selectAll("circle")
                  .data(data)
                  .enter()
                  .append("circle")
                  .attr("cx", function(d) {
                      return projection([d.latitude, d.longitude])[0]; })  // project lat
                  .attr("cy", function(d) {
                      return projection([d.latitude, d.longitude])[1]; })  // project lng
                  .attr("r", 1)
                  .attr("fill", "black")
                  .style("opacity", 0.35)
                  .style("pointer-events", "none");
        });

    // references
    // [1] https://data.baltimorecity.gov/Neighborhoods/Crime-Safety-2010-2012-Shape/bywi-mtiu
    </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>

	<meta charset="utf-8">

	<style>

	#tooltip {
	font-family: sans-serif;
	color: #454545;
	}

	h3, h5 {
	margin: 0;
	}

	</style>

	<script src = "https://feyderm.github.io/d3/d3.js"></script>

	</head>
	<body>

	<div id = "tooltip">
	<h3><span id = "neighborhood">&nbsp</span></h3>
	<h5><span id = "datum">&nbsp</span></h5>
	</div>

	<div id="block"></div>

	<script>

	var h = 700;
	var w = 700;

	var projection = d3.geo.mercator()
	.center([-76.612223, 39.294504])
	.scale([150000])
	.translate([310, 290]);

	var comma_format = d3.format(",");

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

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

	var basemap = svg.append("g");
	var points = svg.append("g");

	// load map; ref [1]
	var map = d3.json("https://feyderm.github.io/data/Baltimore_vacant_buildings_Shape.geojson", function(json) {

	// basemap for point plot
	basemap.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("stroke", "grey")
	.attr("fill", "white")
	.on("mouseover", function(d){

	// neigborhood fill
	d3.select(this)
	.attr("fill", "rgb(243, 100, 42)");

	// neighborhood name
	d3.select("#neighborhood")
	.text(d.properties.csa);

	// neigborhood data
	d3.select("#datum")
	.text(function() {
	var count = parseFloat(d.properties.vacant_buildings);
	return comma_format(count) + " vacant buildings";
	});
	})
	.on("mouseout", function() {

	d3.select(this)
	.transition()
	.duration(50)
	.attr("fill", "white");

	d3.select("#neighborhood")
	.text("\u00A0"); // Unicode equivalent of HTML &nbsp

	d3.select("#datum")
	.text("\u00A0");
	});
	});

	var vacancy = d3.csv("https://feyderm.github.io/data/Baltimore_vacant_buildings.csv", function(data) {

	data.forEach(function(d) {
	d.latitude = +d.latitude;
	d.longitude = +d.longitude;
	});

	// plot points
	points.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
	return projection([d.latitude, d.longitude])[0]; }) // project lat
	.attr("cy", function(d) {
	return projection([d.latitude, d.longitude])[1]; }) // project lng
	.attr("r", 1)
	.attr("fill", "black")
	.style("opacity", 0.35)
	.style("pointer-events", "none");
	});

	// references
	// [1] https://data.baltimorecity.gov/Neighborhoods/Crime-Safety-2010-2012-Shape/bywi-mtiu
	</script>
	</body>