Alex-Devoid/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet and D3 Map</title>
    <meta charset="utf-8" />
    <link
        rel="stylesheet"
        href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
    />

</head>
<body>

    <div id="map" style="width: 600px; height: 400px"></div>

	<script src="http://d3js.org/d3.v3.min.js"></script>

    <script
        src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
    </script>

    <script>

        var map = L.map('map').setView([32.2226, -110.9747], 10);
        var mapLink =
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18

            }).addTo(map);

            var geoShape =  {
              "type": "FeatureCollection",
              "features": []
            }

var url = 'https://speedway.tucson.com/misc/google_sheets/?action=getdata&id=129';


		// Add an SVG element to Leaflet’s overlay pane
		var svg = d3.select(map.getPanes().overlayPane).append("svg"); //,
		 var g = svg.append("g").attr("class", "leaflet-zoom-hide");


d3.json(url, function(response) {

      console.log(response);
      response[1].forEach(function(d,i) {

      var co1 = L.latLng(parseFloat(d[response[2].indexOf("bound_ne_lat")]),parseFloat(d[response[2].indexOf("bound_ne_lng")]))
      var co2 = L.latLng(parseFloat(d[response[2].indexOf("bound_sw_lat")]),parseFloat(d[response[2].indexOf("bound_sw_lng")]))


        var bnds = L.latLngBounds(co1, co2);

      var corner1 =  bnds.getNorthWest(),
      corner2 =  bnds.getNorthEast(),
          corner3 = bnds.getSouthEast()
          corner4 =  bnds.getSouthWest();


        var fourCoords =  {
          "type": "Feature",
          "id": parseFloat(d[response[2].indexOf("id")]),
          "geometry": {
            "type": "Polygon",
            "coordinates":  [[
              [corner4.lng, corner4.lat],
              [corner3.lng, corner3.lat,],
              [corner2.lng, corner2.lat],
              [corner1.lng, corner1.lat],
              [corner4.lng, corner4.lat]
            ]]
            },
           "properties": {
               "prop0": parseFloat(d[response[2].indexOf("customers_affected")])
           }
          }

        geoShape.features.push(fourCoords)
});

console.log(geoShape);

		//  create a d3.geo.path to convert GeoJSON to SVG
		var transform = d3.geo.transform({point: projectPoint}),
            	path = d3.geo.path().projection(transform)

		// create path elements for each of the features
	var	d3_features = g.selectAll("path")
      .data(geoShape.features)
			.enter().append("path");


		map.on("viewreset", reset);

		reset();

		// fit the SVG element to leaflet's map layer
    function reset() {

  			var bounds = path.bounds(geoShape);


  			var topLeft = bounds[0],
  				bottomRight = bounds[1];

  			svg.attr("width", bottomRight[0] - topLeft[0])
  				.attr("height", bottomRight[1] - topLeft[1])
  				.style("left", topLeft[0] + "px")
  				.style("top", topLeft[1] + "px");

  			g .attr("transform", "translate(" + -topLeft[0] + ","
  			                                  + -topLeft[1] + ")");
  			// initialize the path data
  			d3_features
        .attr("d", path)
        .attr('fill','blue')
        .attr("stroke", "black")
  				.style("fill-opacity", 0.7)
  				;
  		}

		// Use Leaflet to implement a D3 geometric transformation.
  function projectPoint(x, y) {
  var point = map.latLngToLayerPoint(new L.LatLng(y, x));
  this.stream.point(point.x, point.y);
}

	})

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet and D3 Map</title>
	<meta charset="utf-8" />
	<link
	rel="stylesheet"
	href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
	/>

	</head>
	<body>

	<div id="map" style="width: 600px; height: 400px"></div>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script
	src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
	</script>

	<script>

	var map = L.map('map').setView([32.2226, -110.9747], 10);
	var mapLink =
	'<a href="http://openstreetmap.org">OpenStreetMap</a>';
	L.tileLayer(
	'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© ' + mapLink + ' Contributors',
	maxZoom: 18

	}).addTo(map);

	var geoShape = {
	"type": "FeatureCollection",
	"features": []
	}

	var url = 'https://speedway.tucson.com/misc/google_sheets/?action=getdata&id=129';


	// Add an SVG element to Leaflet’s overlay pane
	var svg = d3.select(map.getPanes().overlayPane).append("svg"); //,
	var g = svg.append("g").attr("class", "leaflet-zoom-hide");


	d3.json(url, function(response) {

	console.log(response);
	response[1].forEach(function(d,i) {

	var co1 = L.latLng(parseFloat(d[response[2].indexOf("bound_ne_lat")]),parseFloat(d[response[2].indexOf("bound_ne_lng")]))
	var co2 = L.latLng(parseFloat(d[response[2].indexOf("bound_sw_lat")]),parseFloat(d[response[2].indexOf("bound_sw_lng")]))


	var bnds = L.latLngBounds(co1, co2);

	var corner1 = bnds.getNorthWest(),
	corner2 = bnds.getNorthEast(),
	corner3 = bnds.getSouthEast()
	corner4 = bnds.getSouthWest();


	var fourCoords = {
	"type": "Feature",
	"id": parseFloat(d[response[2].indexOf("id")]),
	"geometry": {
	"type": "Polygon",
	"coordinates": [[
	[corner4.lng, corner4.lat],
	[corner3.lng, corner3.lat,],
	[corner2.lng, corner2.lat],
	[corner1.lng, corner1.lat],
	[corner4.lng, corner4.lat]
	]]
	},
	"properties": {
	"prop0": parseFloat(d[response[2].indexOf("customers_affected")])
	}
	}

	geoShape.features.push(fourCoords)
	});

	console.log(geoShape);

	// create a d3.geo.path to convert GeoJSON to SVG
	var transform = d3.geo.transform({point: projectPoint}),
	path = d3.geo.path().projection(transform)

	// create path elements for each of the features
	var d3_features = g.selectAll("path")
	.data(geoShape.features)
	.enter().append("path");


	map.on("viewreset", reset);

	reset();

	// fit the SVG element to leaflet's map layer
	function reset() {

	var bounds = path.bounds(geoShape);


	var topLeft = bounds[0],
	bottomRight = bounds[1];

	svg.attr("width", bottomRight[0] - topLeft[0])
	.attr("height", bottomRight[1] - topLeft[1])
	.style("left", topLeft[0] + "px")
	.style("top", topLeft[1] + "px");

	g .attr("transform", "translate(" + -topLeft[0] + ","
	+ -topLeft[1] + ")");
	// initialize the path data
	d3_features
	.attr("d", path)
	.attr('fill','blue')
	.attr("stroke", "black")
	.style("fill-opacity", 0.7)
	;
	}

	// Use Leaflet to implement a D3 geometric transformation.
	function projectPoint(x, y) {
	var point = map.latLngToLayerPoint(new L.LatLng(y, x));
	this.stream.point(point.x, point.y);
	}

	})

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