Loading a NY map

Question

my d3 map of ny will not load. is there any way someone can help?

here is my code:

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 12px sans-serif;
}

path {
  stroke-width: 1.75px;
  stroke: #531b93;
  fill: #919191;
  cursor: pointer;
}

path:hover, path.highlighted {
  fill: #0096ff;
}

div.tooltip {
  position: absolute;
  background-color: white;
  border: 1px solid black;
  color: black;
  font-weight: bold;
  padding: 4px 8px;
  display: none;
}

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

//Map dimensions (in pixels)
var width = 600,
    height = 600;

//Map projection
var projection = d3.geo.mercator()
    .scale(58722.369041340586)
    .center([-73.97768078496284,40.705833704252484]) //projection center
    .translate([width/2,height/2]) //translate to center the map in view

//Generate paths based on projection
var path = d3.geo.path()
    .projection(projection);

//Create an SVG
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//Group for the map features
var features = svg.append("g")
    .attr("class","features");

//Create zoom/pan listener
//Change [1,Infinity] to adjust the min/max zoom scale
var zoom = d3.behavior.zoom()
    .scaleExtent([1, Infinity])
    .on("zoom",zoomed);

svg.call(zoom);

//Create a tooltip, hidden at the start
var tooltip = d3.select("body").append("div").attr("class","tooltip");

d3.json("NYC_MapInfos.geojson",function(error,geodata) {
  if (error) return console.log(error); //unknown error, check the console

  //Create a path for each map feature in the data
  features.selectAll("path")
    .data(geodata.features)
    .enter()
    .append("path")
    .attr("d",path)
    .on("mouseover",showTooltip)
    .on("mousemove",moveTooltip)
    .on("mouseout",hideTooltip)
    .on("click",clicked);

});

// Add optional onClick events for features here
// d.properties contains the attributes (e.g. d.properties.name, d.properties.population)
function clicked(d,i) {

}


//Update map on zoom/pan
function zoomed() {
  features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
      .selectAll("path").style("stroke-width", 1.75 / zoom.scale() + "px" );
}


//Position of the tooltip relative to the cursor
var tooltipOffset = {x: 5, y: -25};

//Create a tooltip, hidden at the start
function showTooltip(d) {
  moveTooltip();

  tooltip.style("display","block")
      .text(d.properties.PO_NAME);
}

//Move the tooltip to track the mouse
function moveTooltip() {
  tooltip.style("top",(d3.event.pageY+tooltipOffset.y)+"px")
      .style("left",(d3.event.pageX+tooltipOffset.x)+"px");
}

//Create a tooltip, hidden at the start
function hideTooltip() {
  tooltip.style("display","none");
}
</script>

here is the the geojson file: http://data.beta.nyc//dataset/3bf5fb73-edb5-4b05-bb29-7c95f4a727fc/resource/6df127b1-6d04-4bb7-b983-07402a2c3f90/download/f4129d9aa6dd4281bc98d0f701629b76nyczipcodetabulationareas.geojson

score 0 · Accepted Answer · answered Mar 23 '16 at 09:47

You can try geojson2svg module for SVG map creation with geojson data. As this is just plain JavaScript you'll have more control. Here is your example

Your html page (index.html):

<html>
<head>
    <link rel="stylesheet" href="./map.css"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/geojson2svg/1.0.3/geojson2svg.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/geosquare/reproject-spherical-mercator/v0.1.3/dist/reproject-spherical-mercator.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/geosquare/geojson-bbox/master/dist/geojson-bbox.min.js"></script>
</head>
<body>
 <h2>Example of New York postal code map created with geojson2svg</h2>
    <div id="mapArea" style="width:600px;height:600px;">
      <svg id="map" xmlns="http://www.w3.org/2000/svg"
        width="600" height="600" x="0" y="0" >
      </svg>
      <div class="tooltip" ></div>
    </div>
  <script type="text/javascript" src="./main.js"></script>
</body>

Javascript code (main.js):

var dataURI = "http://data.beta.nyc//dataset/3bf5fb73-edb5-4b05-bb29-7c95f4a727fc/resource/6df127b1-6d04-4bb7-b983-07402a2c3f90/download/f4129d9aa6dd4281bc98d0f701629b76nyczipcodetabulationareas.geojson";

$.get(dataURI,drawGeoJSON);
$('#map').on('mouseover','path',function(ev) {
  console.log(ev.target.feature.properties.postalCode);
  var tooltip = document.querySelector('.tooltip');
  tooltip.style.top = ev.pageY - 30;
  tooltip.style.left = ev.pageX + 5;
  tooltip.style.display = 'block';
  tooltip.innerHTML = ev.target.feature.properties.PO_NAME;
});
$('#map').on('mouseout','path',function(ev) {
  var tooltip = document.querySelector('.tooltip');
  tooltip.style.display = 'none';

});

function drawGeoJSON(geojson) {
  // covert wgs84 data to Web Mercator projection

  var geojsonMerc = reproject(geojson);
  // reproject: https://github.com/geosquare/reproject-spherical-mercator

  var extent = bbox(geojsonMerc);
  // bbox: https://github.com/geosquare/geojson-bbox

  var mapExtent = {
    left: extent[0],
    bottom: extent[1],
    right: extent[2],
    top: extent[3]
  };
  var svgMap = document.getElementById('map');

  // geojson2svg: https://github.com/gagan-bansal/geojson2svg
  var convertor = geojson2svg(
    {
      viewportSize: {width:600,height:600},
      mapExtent: mapExtent,
      attributes: {
        'vector-effect':'non-scaling-stroke'
      },
      explode: false
    }
  );
  geojsonMerc.features.forEach(function(f) {
    var svgStr = convertor.convert(f,{attributes: {id: 'pc-'+f.properties.OBJECTID}});
    var svg = parseSVG(svgStr);
    svgMap.appendChild(parseSVG(svgStr));
    var svgEle = svgMap.querySelector('#' + 'pc-'+f.properties.OBJECTID);
    svgEle.feature = f;
  });
}
//parseSVG from http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element
function parseSVG(s) {
  var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
  div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
  var frag= document.createDocumentFragment();
  while (div.firstChild.firstChild)
      frag.appendChild(div.firstChild.firstChild);
  return frag;
}

and CSS (map.css):

body {
  font: 12px sans-serif;
}

path {
  stroke-width: 1px;
  stroke: #531b93;
  fill: #919191;
  cursor: pointer;
}

path:hover, path.highlighted {
  fill: #0096ff;
}

div.tooltip {
  position: absolute;
  background-color: white;
  border: 1px solid black;
  color: black;
  font-weight: bold;
  padding: 4px 8px;
  display: none;
}

For advance usage please check this blog

@george-nwankwo If this approach is suitable for you, please feel free to ask me any doubt. — Gagan, Mar 25 '16 at 17:08

Loading a NY map

1 Answers1