Geospatial

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .page-header { 
        	color: #fff; 
           	text-align: center; 
            	background-color: #159957; 
            	background-image: linear-gradient(33deg, #ff3300, #003300);
    }
    
    body { 
      margin:0;position:fixed;top:0;right:0;bottom:0;left:0; 
    }
    
    path.land {
      fill: #000000;
      stroke: none;
    }

path.neighborhood {
    fill: none;
    stroke: white;
    stroke-width: 1.5px;
    pointer-events: none;
  }
    
  .active {
    stroke: goldenrod !important;
    stroke-width: 2.5px !important;
  }
    
    .project-name {
		font-size: 55px;
	}
  </style>
</head>

<body>
  <section class="page-header">
    	  <h1 class="project-name">311 Tree Maintenance</h1>
   	   <h2 class="project-tagline">Hume Dickie</h2>
   	</section>
  <svg height = "500" width = "960" id = "map"> </svg>
  <script>
    var svg = d3.select("#map"),
    margin = {top: 40, right: 80, bottom: 20, left: 60},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var basemap = "districts.geojson";
    var trees = "tree_data.csv";
    
    var projection = d3.geoConicEqualArea();
		var path = d3.geoPath().projection(projection);

projection.parallels([37.692514, 37.840699]);
		projection.rotate([122, 0]);
    
    //Node color legend
    var cl_xo = 675, cl_yo = 300;
    
    g.append("rect")
    	.attr("x",cl_xo)
    	.attr("y",cl_yo + 22)
    	.attr("width",20)
    	.attr("height",20)
    	.style("fill","green")
    	.style("stroke","black");
    
    g.append("rect")
    	.attr("x",cl_xo)
    	.attr("y",cl_yo)
    	.attr("width",20)
    	.attr("height",20)
    	.style("fill","red")
    	.style("stroke","black");
    
    g.append("text")
    	.attr("x",cl_xo + 25)
    	.attr("y",cl_yo + 15)
    	.text("Open");
    
    g.append("text")
    	.attr("x",cl_xo + 25)
    	.attr("y",cl_yo + 40)
    	.text("Closed");
    
    
    
    d3.json(basemap,function(error, data){
      if (error) throw error;
      projection.fitSize([960, 450], data);

d3.csv(trees,function(D){
        var symbols = g.selectAll("circle")
    		.data(D)
    		.enter()
    		.append("circle")
    		.attr("cx", function(d,i) {
          return projection([getLat(D[i].Point), getLon(D[i].Point)])[0]; })
    		.attr("cy", function(d,i) { 
          return projection([getLat(D[i].Point), getLon(D[i].Point)])[1]; })
    		.attr("r", 1.4)
        .style("fill",function(d,i){
          if (D[i].Status == "Closed") return "green";
          else return "red";
        })
    		.attr("class", "symbol");
        
        var details = g.append("foreignObject")
        .attr("id", "details")
        .attr("width", 960)
        .attr("height", 600)
        .attr("x", 0)
        .attr("y", 0);

var body = details.append("xhtml:body")
        .style("text-align", "left")
        .style("background", "none")
        .html("<p>N/A</p>");

details.style("visibility", "hidden");
      
      symbols.on("mouseover", function(d) {
        d3.select(this).raise();
        d3.select(this).classed("active", true);
        
        console.log(d);

body.html("<table border=0 cellspacing=0 cellpadding=2>" + "\n" +
          "<tr><th>Responsible Agency:</th><td>" + d.ResponsibleAgency + "</td></tr>" + "\n" +
          "<tr><th>Address:</th><td>" + d.Address + "</td></tr>" + "\n" +
          "<tr><th>Request Details:</th><td>" + d.RequestDetails + "</td></tr>" + "\n" +
          "</table>");

details.style("visibility", "visible");
        });

symbols.on("mouseout", function(d) {
          d3.select(this).classed("active", false);
          details.style("visibility", "hidden");
        });
      })
      
      var land = g.selectAll("path.land")
    		.data(data.features)
    		.enter()
    		.append("path")
    		.attr("d", path)
    		.attr("class", "land");
      
      g.selectAll("path.outline")
    		.data(data.features)
    		.enter()
    		.append("path")
    		.attr("d", path)
        .attr("class", "neighborhood")
        .each(function(d) {
          // save selection in data for interactivity
          d.properties.outline = this;
        })
        
      land.on("mouseover",function(d){
        d3.select(d.properties.outline).raise();
      	d3.select(d.properties.outline).classed("active", true);
      }).on("mouseout",function(d){
        d3.select(d.properties.outline).classed("active", false);
      });
     
    });
    
    function getLon(coords){
      coords = coords.split(" ")[0];
      coords = coords.substring(1,coords.length-1);
    	return(+coords);
    }
    
    function getLat(coords){
      coords = coords.split(" ")[1];
      coords = coords.substring(0,coords.length-1);
    	return(+coords);
    }
  </script>
</body>

https://d3js.org/d3.v4.min.js