0

I am trying to display a map of NYC using the following code:

   var width = 960;
   var height = 490;

   d3.select('svg')
    .attr('width', width)
    .attr('height', height);


var CityProjection = d3.geoEquirectangular();


d3.json('data.json').then(function (data) {

    var boroughs = data.features

    d3.select('svg').selectAll('path')
        .data(boroughs.map(x => x.geometry))
        .enter()
        .append('path')
        .attr('fill', '#099')


    var dAttributeFunction = d3.geoPath()
        .projection(CityProjection);

    d3.selectAll('path').attr('d', dAttributeFunction);


 });

I am able to see the data in the html document, but on my browser the map is being displayed very tiny:

enter image description here

Any insight is highly appreciated. Thanks in advance!

Diego
  • 386
  • 4
  • 19
  • 1
    You have not specified a scale or projection center/rotation that would be appropriate to appropriately size your features. Most d3 projections have parameters that default to show the whole world - you haven't altered the projection, so the map shows the whole world, which explains the size. Try `projection.fitSize([width,height],geoJsonObject)` as suggested [here](https://stackoverflow.com/a/40940028/7106086). – Andrew Reid Jan 05 '20 at 01:26
  • 1
    If you have an array of geojson features, you'll need to place them in a geojson featureCollection so that they are a single object that can be passed to fitSize, as described in the first part of [this answer](https://stackoverflow.com/a/55972888/7106086) – Andrew Reid Jan 05 '20 at 01:27
  • Thanks @AndrewReid I am new to D3 and your comment really helps. – Diego Jan 05 '20 at 01:36
  • Glad to help, let me know if there are still issues. – Andrew Reid Jan 05 '20 at 02:13

0 Answers0