graticule | Create graticule objects

Okay so I did two things.

1. Inside of the dragged function instead of selecting all the path elements as one I selected them individually... so replace the line svg.selectAll("path").attr("d", pathGenerator) with svg.selectAll(".graticule").attr("d", pathGenerator) and svg.selectAll(".country").attr("d", pathGenerator).

2. When you append the countries you use selectAll('path') like this g.selectAll('path').data(countries.features) ... I think this confuses d3 because you have already appended some path elements so I changed it to a unique selector like this g.selectAll('.country').data(countries.features).

I'm not 100% sure why d3 behaves like that (maybe @AndrewReid can shed some light) but i've learned from experience that it's best practice to use unique selectors when appending and updating SVG elements with d3.

If you want to change features/data source/whatever with zoom, you'll need to get the current zoom state, which is contained in the the event passed to the zoom event listener (or d3.event before d3 v6).

This gives us a relatively easy zoom listener:

I solved my problem remembering that in Javascript sometimes "this" element is not always what we expect when we work inside other functions.

So what I needed to do was to save the "this" object in a variable and using that variable to do what I needed:

i dunno how you initialize src but, i have no problem if i write

You update everything in the refresh function except the lines, you just need to update those as well.

You can't use svg.selectAll(".lines").attr("d", lineToLondon) because you have a g with a class lines holding all the paths with that class. Instead you can use:

You could use numpy.bincount to create an array of the number of galaxies per pixels and then create a map of that.

Using this answer as inspiration, you can create a second projection, equivalent to the first one, but with a larger scale value. That will project a point directly above the actual point on the globe, as if it was hanging above it. This allows you to draw a line from the ground up, and look at it from all angles. It even works with your hide marker logic.

Projection.scale()

The scale of the projection determines the size of the projected world. Generally speaking d3 projections have a default scale value that will fill a 960x500 SVG/Canvas. A map produced with d3.geoOrthographic doesn't have a long edge, so this is 500x500 pixels. The default scale value is: 249.5 - half the width/height (allowing for stroke width). This scale factor is linear on both width and height: double it and double both (quadruple projected size of world). So if you want a 200x200 px world you'll want: 99.5 to be your scale value.

This is the default for d3.geoOrthographic, other scales have other scale defaults. For a Mercator, for example, it is 480/π: 2π of longitude across 960 pixels of width.

Projection.translate()

However, if you change the scale for a 200x200 pixel world, you'll have an issue with the default projection translate. By default this is set to [250,480] - half of [500,960], the default D3 anticipated size of the SVG/Canvas. This coordinate is where the geographic center of the projection (by default 0°N,0°W) is projected to. You'll want to change this to a value of [100,100]: the center of your SVG/Canvas.

Solution

D3 is fairly unique when it comes to geographic data: it uses spherical math (which despite many benefits, does lead to some challenges). d3.geoPath samples a line segment between two points so that the path follows a great circle (the shortest path between two points on a globe). Parallels do not follow great circle distances, so your path does not follow the parallel.

The behavior you are looking for requires us to draw a line between two points of latitude longitude as though they were Carteisan, even though they are not, and then preserve the points along that line when applying the stereographic projection.

When using an cylindrical projection the solution is easy enough, don't sample between points on a line. This answer contains such a solution.

This doesn't help with a stereographic projection - the linked approach would just result in a straight line between the first point and end point instead of a curved line along the parallel.

A solution is to manually sample points between start and end as though the data were Cartesian, then treat them as 3D in order to project them with a stereographic projection. This results in a path that follows parallels where start and end have the same north/south value. How frequently you sample reduces/eliminates the effect of great circle distances when using d3.geoPath.

In my solution I'm going to use two d3 helper functions:

• d3.geoDistance which measures the distance between two lat long pairs in radians.
• d3.interpolate which creates an interpolation function between two values.