Stack Overflow
Stack Overflow

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
28
votes
1 answer

What is the proper way to use D3's projection.stream()?

So I'm experimenting a bit with D3's geo stream API, and things feel a bit hazy. I've been reading through the documentation here: https://github.com/mbostock/d3/wiki/Geo-Streams One point of confusion I have is the proper implementation of stream…
Al R.
  • 2,430
  • 4
  • 28
  • 40
9
votes
1 answer

d3.js geo worldmap - merge russia (shift small part from the left next to america to the right)

I created a simple worldmap with d3 as you can see here: http://bl.ocks.org/wiesson/ef18dba71256d526eb42 Is there a simple way to shift the small part of russia (as illustrated in the picture) to the right, without creating a new topojson? If not,…
wiesson
  • 6,544
  • 5
  • 40
  • 68
6
votes
1 answer

d3.js visibility-zone calculations or how to draw geo rectangle

i want to figure out how to properly calculate vizibility zone and draw it using d3.geo projections. visibility zone in my case is optical camera frustum for now, i have a two plots, both represent azimuth and elevation from view point, one in…
Stranger in the Q
  • 3,668
  • 2
  • 21
  • 26
6
votes
2 answers

How to fix map boundaries on d3 cartographic raster reprojection?

I try to use the raster reprojection of a map following this example. If I change the example kavrayskiy7 projection by the Azimuthal Equidistant projection, var projection = d3.geo.azimuthalEquidistant() .scale(90) .translate([width / 2,…
Daniel Ramos
  • 63
  • 4
6
votes
2 answers

D3.geo : Spherical arcs rather than straight lines for parallels?

I just made a D3js globe localisator, which looks like this : If you look carefully, the red square looks ugly since it doesn't follow the Earth's curve. I have the area bounding box in decimal degrees : var bb = {W:-5.0, N:50.0, E:10.0, S:40.0…
Hugolpz
  • 17,296
  • 26
  • 100
  • 187
5
votes
1 answer

line on d3 map not forming a curve

I have created a map using d3.js. I want to show a curved line between two locations. I am able to show a line, but sometimes it does not form a perfect curve. For some lines, the lines curve behind the map (across the anti-meridian) to their…
Lone Ranger
  • 557
  • 2
  • 9
5
votes
1 answer

D3.js map projections on a canvas image

I'm trying to take the contents of a canvas element (which really is just an image loaded onto the canvas) and distort them into different map projections using d3. So for I've found exactly one example that does this (this other SO question). The…
Kurt
  • 1,868
  • 3
  • 21
  • 42
4
votes
1 answer

D3.js: Set fitExtent or fitSize (or center and scale programmatically) for map with multiple geoJSON files

I want to plot multiple countries for which the data comes from individual topoJSON files. The map with these countries should be in the middle of the screen (centered) and the appropriate scale should be set that the map fills up the whole…
elrey
  • 167
  • 2
  • 8
4
votes
0 answers

How to calculate projection.scale() in D3.js for a fullscreen world map

I'm wondering how to calculate and determine a right value of projection.scale([value]) for a world map in full screen with D3.js. The documentation says the default value is 150. But what does this "150" stand for? I'm trying to draw a world map…
leccmo
  • 329
  • 4
  • 16
4
votes
1 answer

Apply d3 geo projection to an image

I have an image of which I know the lower left and upper right coordinates of the mercator projection (lat/long). I added it to Google Maps as a google.maps.GroundOverlay, which gives me the correct result I've added some color markers on the…
Daniel F
  • 13,684
  • 11
  • 87
  • 116
4
votes
1 answer

Avoid flickering in d3.geo.tile

I'm implementing a basic interactive map with some data placed on top of the openstreetmap tiles. The code is very similar to a classic d3.geo.tile example: http://bl.ocks.org/mbostock/5342063 All seems to be working perfectly except one thing: the…
Alexander Kachkaev
  • 842
  • 15
  • 29
3
votes
1 answer

My cities are being plotted with the wrong projection (quite small and to the left). Using d3.geo.albersUSA()

D3 newbie. My cities are being plotted with the wrong projection (quite small and to the left) as compared to my map which is the correct size. It also looks like the longitude may be reversed. Using d3.geo.albersUSA(). The .scale of the map is set…
Lucy Green
  • 31
  • 2
3
votes
1 answer

Why doesn't my geo LineString follow latitude/graticule curves?

I'm trying to draw LineStrings that follow various latitude segments, however the built-in geodesic arc interpolation doesn't seem to be drawing arcs that follow latitude. My question is: why not and how do I achieve this? Here is my result: And my…
jovrtn
  • 33
  • 4
3
votes
1 answer

syncing d3.js with THREE.js earth

I am trying to combine WebGL earth with d3.geo.satellite projection. I have managed to to overlay the 2 projections on top of each other and sync rotation, but I am having trouble to sync zooming. When I sync them to match size, WebGL projection…
nxtwrld
  • 1,942
  • 14
  • 15
3
votes
0 answers

D3 LineString between two D3 centroid objects

I have a bunch of data that is coded with the Census FIPS code for states and counties (i.e. New York is FIPS 36, Kings County is FIPS 36047). I'm mapping that data using the d3.geo.albersUSA projection from the TopoJSON file here, which uses FIPS…
merry
  • 331
  • 2
  • 6
1
2 3