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