I am trying to project a geojson file, which has a default projection type.
My path lines are appearing in the console inspector:
But the lines are only 1px by 1px, so they do not appear. What is happening?
My code:
var mapWidth = 60;
var mapHeight = 90;
var projection = d3.geo.mercator().scale([100]);
var path = d3.geo.path()
.projection(projection);
(function run() {
d3.json("./data/output.geojson", function(error, map) {
var chart = d3.select("#charts").selectAll("svg")
.data(map.features)
.enter()
.append("svg")
.attr("width", mapWidth)
.attr("height", mapHeight)
.append("g")
chart
.append("path")
.attr("d", path)
.style("fill","steelblue");
});
})()
Geojson is as following (this is a snippet):
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "neighborhood": "Battery Park City", "boroughCode": "1", "borough": "Manhattan", "@id": "http:\/\/nyc.pediacities.com\/Resource\/Neighborhood\/Battery_Park_City" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -74.013754000000176, 40.71369 ], [ -74.014262000000187, 40.710928000000195 ], [ -74.016542000000186, 40.704733000000275 ], [ -74.016174, 40.702572000000174 ], [ -74.01563, 40.701862000000233 ], [ -74.015127, 40.701390000000259 ], [ -74.014008, 40.701043000000325 ], [ -74.013959214170356, 40.700965860994032 ], [ -74.01410490300087, 40.700510828386832 ], [ -74.
