javascriptd3.jsmapsgeojsontopojson

Loading a NY map


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


Solution

  • 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