Questions tagged [d3.geo]

d3.geo is the core geographic system and map making tool on D3js.

D3.geo is the core geographic system and map making tool on D3js.

43 questions
3
votes
1 answer

Can't get d3 map centered correctly

I have a map that is zooming back and forth between a couple of locations. However, my map coordinates are off. It appears the map is centered at [0,0] by default. I changed projection.center to a new point, but this caused some chaos-- (the map…
2
votes
0 answers

d3.geo.tile limiting zoomable map to make street view zoom scale smaller

I've been following this D3 implementation of a zoomable map tiles and this example to create a street view map of paths of a certain city. I have loaded the map but I keep running into issues with adding svg paths such as: most paths disappearing…
iamnobody
  • 646
  • 9
  • 23
2
votes
0 answers

d3.js geo graticules not displaying correctly

So I'm trying to put together a d3.js satellite projection map but I am having a couple of weird things happening. The first issue is that the graticules on the backside of my satellite projection are displaying when I don't want them to. Even when…
2
votes
0 answers

D3 geo - focus on a country that is split by map edge (get coordinates of a country independent of projection)

I am pretty new to D3 so I may have overlooked a way to solve my problem. I have a map of the world (using geoJSON and mercator projection) and when I click on a country I want the projection to focus on the country (I am using its bounding box…
KristinaZ
  • 41
  • 4
2
votes
0 answers

d3.geo.tile - Tiles don't render when zoom >=14 in IE/Edge

I can't work out the reason for this as it seems to work fine in other browsers, but when zooming in to zoom level 14 or higher I get a white page in Internet Explorer 11 and Edge. When I look at the DOM Inspector its as though the tiles are…
2
votes
2 answers

D3js : How to get the real bounding box of features crossing the anti-meridian?

I am using the var bounds = d3.geo.path() .projection(function(d) { return d; }) .bounds; to get the bound of all countries features. All works good, until I run into Fiji or Russia, which cross the anti-meridian. Fiji.bb =…
Hugolpz
  • 17,296
  • 26
  • 100
  • 187
2
votes
2 answers

Compose two rotations in D3 geo projection?

Having fun with D3 geo orthographic projection to build an interactive globe, based on all the great examples I found. You can see my simple mockup at http://bl.ocks.org/patricksurry/5721459 I want the user to manipulate the globe like a trackball…
patricksurry
  • 5,508
  • 2
  • 27
  • 38
1
vote
1 answer

D3 V4 Properly placing a bubble in the US Map

I am creating a US Map and I have a series of ACTUAL coordinates of some places in US. I would like to put a point or bubble on the right spot in the map. How do I scale/translate these? This is what I get: With what I have tried: function…
NDS
  • 119
  • 13
1
vote
0 answers

Drawing polygons on svg map from .json file

I would like to draw some polygons on top of my .svg map realized with the program below. The polygons are specified in a separate .json file (see example). Would it be possible to do it using a "draw" function as for the map? Are there better ways?…
Fede
  • 91
  • 6
1
vote
1 answer

d3.js map chart draw rectangle

I am trying to draw a map for UAE emirates using geojson. The geojson is valid and validated on geojson.io, the result appeared instead of a map a rectangle , the written code is here: var width = 20, height = 20; var scal = (1 << 10) / 2 / Math.PI;…
Haneen
  • 13
  • 3
1
vote
0 answers

d3.geo.tile point-to-point path not showing for varying widths

I have been following this block example to show nodes and paths as landmarks and roads. I have successfully loaded the map and I am able to zoom in enough to a "street view" level. I have also successfully added nodes following the example. My…
iamnobody
  • 646
  • 9
  • 23
1
vote
1 answer

D3 adds GeoJSON paths to SVG but nothing displays

I am attempting to use D3 to display a GeoJSON map of San Francisco. I have the following files which I am serving using "http-server -c-1": index.html:
David Moneysmith
  • 799
  • 2
  • 8
  • 10
1
vote
0 answers

Using D3.js to convert map projections on canvas

What I'm doing: I have a way to upload an image onto a canvas. Then, I'm using d3's map projections to allow the selection of a different map projection to convert the image to. The problem: The conversion only works if the original image is an…
Kurt
  • 1,868
  • 3
  • 21
  • 42
1
vote
1 answer

D3 Geo Projection plugin cannot find module 'fs'

I'm trying to display a D3 geo projection in a React component. When viewing any page, this error happens inside the D3 Geo projection module: Object doesn't support property or method 'readFileSync' It is thrown at this line in the module's…
1
vote
1 answer

d3.geo.path strange large bounds

Could someone explain the following scenario to me? Let's say I have a a GeoJSON file with one Polygon feature containing just four coordinates: var json = { "type": "FeatureCollection", "features": [ { "geometry": { "type":…
juniper-
  • 6,262
  • 10
  • 37
  • 65