0

I have a topoJSON data of San Francisco that I am plotting using geoAlbers projection. However, the resulting SVG is pretty small, like a tiny spec. I have used scale and translate. Either the svg stays the same, or it disappears from the page. I already checked out this link: Center a map in d3 given a geoJSON object Can someone tell me what I am doing wrong?

Here is my code:

let width = 1050,
  height = 900;
const svg = d3.select('body').append('svg')
            .attr('width', width)
            .attr('height', height);

d3.json('/sfmaps/sfarteriesTopo.json', (error, topology) => {
  const b = topology.bbox;
  const streets = topojson.feature(topology, topology.objects.arteries).features;
   var projection = d3.geoAlbersUsa();
  var path = d3.geoPath().projection(projection);
  svg.selectAll('.streets')
          .data(streets)
          .enter().append('path')
          .attr('class', 'streets')
          .attr('d', path);

});

Here is what I have tried:

  1. projection.scale(700): shifts position of the tiny SVG, but size remains same.
  2. scale(700).translate([width/2, height/2]): shifts position again and size is still the same.
  3. scale(2): SVG becomes smaller.

I am trying out d3 for the first time, so any pointers appreciated. Thank you!

Shruti Kapoor
  • 1,106
  • 2
  • 12
  • 32
  • 1
    could you create something runnable, i.e. something that doesn't depend on /sfmaps/sfarteriesTopo.json and is a stack snippet. – Robert Longson Jun 25 '17 at 09:22

1 Answers1

0

I found out that I was using a very small scale. To fix this, I used a scale of 16000 and it worked well. I calculated scale from the bounds of the geoJSON object.

Shruti Kapoor
  • 1,106
  • 2
  • 12
  • 32