D3 Examples - City Nature Neighborhoods

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto - City Nature SDR Data</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
</head>
<style>
  #d3MapLayerBox {
    display: none;
  }
  #legend {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(35,31,32,.85);
    width: 330px;
    height: 100px;
  }
  #map {
    width: 100%;
    height: 100%;
  }
  
  text {
    fill: white;
  }
  
  line {
    stroke: white;
  }
</style>
<script>
      function makeSomeMaps() {
        
    var colorScale = d3.scale.quantize().domain([0,.5]).range(colorbrewer.Greens[5])
    
    legend = d3.svg.legend().unitLabel("")
    .formatter(d3.format("%"))
    .title("Percent park")
    .scale(colorScale)
​
  d3.select("#legend").append("svg").style("width", "100%").style("height", "100%").append("g").attr("transform", "translate(20,35)").attr("class", "legend").call(legend);
​
    map = d3.carto.map();
​
    d3.select("#map").call(map);
    
    map.zoom().scale(119404).translate([39679, 12151])
​
    tileLayer = d3.carto.layer();
    tileLayer
    .type("tile")
    .path("elijahmeeks.map-azn21pbi")
    .label("Terrain")
​
    csvLayer = d3.carto.layer.csv();
    csvLayer
    .path("https://sul-stacks.stanford.edu/file/druid:qq826dq9111/neighborhood-stats_2661_20130512.csv")
    .label("Neighborhoods")
    .cssClass("point")
    .renderMode("canvas")
    .markerColor(function(d){return colorScale(d.pct_park)})
    .markerSize(3)
    .strokeColor("black")
    .x("lng")
    .y("lat");
​
    map.addCartoLayer(tileLayer).addCartoLayer(csvLayer);
​
    
  }
  
</script>
<body onload="makeSomeMaps()">
<div id="buttons"></div>
<div id="map"></div>
<div id="legend"></div>
<footer>
<script src="https://d3js.org/colorbrewer.v1.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="legend.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.js" type="text/javascript">
</script>
<script src="https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js" type="text/javascript">
</script>
</footer>
</body>
</html>
    