City Nature Neighborhoods

Loading and styling data from the Stanford Digital Repository in d3.carto.map.

This example uses neighborhood data from the City Nature Project.

You can see the data here.

<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>

Modified http://d3js.org/colorbrewer.v1.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js to /emeeks/f3105fda25ff785dc5ed/example/tile.js

Updated missing url https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js to https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js to /emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js to /emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js

https://d3js.org/colorbrewer.v1.min.js

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

https://d3js.org/topojson.v1.min.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js

https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js