d3-geo | Geographic projections , spherical shapes | Dataset library

I am using d3 to plot a route on a map:

I'm new to Svelte, and am trying to figure out how to grab a CSV with Axios. It seems like it should be straightforward, but I'm not having any luck. I've tried a few different things, but nothing is getting me my data. I must be missing something? Below is my code from App.svelte file. (This is very bare bones at the moment) Would love any help. Thank you!

Update: I'm using Google Chrome version 94, and the latest version of Axios ("axios": "^0.23.0")

Also, I can get the csv if I use fetch

This is the error I'm getting:

I have create a map and I have to put some markers at some countries. I have already achieved putting some dots on the countries I want but I need some markers too. I have also tried this answer but I am having troubles with the coordinates and somehow the markers only appear on top left corner of the svg. Also I have seen some other posts as well but they didn't really worked, so pls don't close question and make it as a clone. Here's my snipped code:

I am trying to make a very basic choropleth map with D3 that can be zoomed in and panned. Although this seems very trivial there are no correct example of this online. The example here has a non-bound panning and I find it quite cringe.

Here is what I have tried. I manage to get zoom factor updated, but the map does not change.

HTML+STYLE

I have the following html, where I center the div container on the page with style:

In order to extend map projections in D3 it's suggested to require the packages like this:

Using the orthographic projection in d3-geo I'd like to be able to render points on the invisible side of the projected sphere. Specifically, I'm making an animation where a train of points travels around a meridian, but when they reach the edge, it's as if they fall off (until they reach the other side, of course). Please see my code snippet below.

Currently, the path generator (path in my example) simply returns null if you try to evaluate it on a point that's hidden. This is of course what it's supposed to do, but is it possible to tweak it such that it gives me the equivalent point on the front surface, such that I can render it in a lighter color so that it's as if we're looking through the sphere?

I've been playing around with d3.js for the first time and have managed to create a basic chloropleth map.

In essence there are 3 things remaining that i'd like to do, but am not familiar enough with d3 or Javascript to do them:

1. Make legend horizontal and move it below the coast of Africa

2. Add thin black border to all of the countries.

3. Perhaps automatically crop out antartica? This can be done in post processing if not possible

Not sure if these tasks are impossible or easy as I have not worked much with d3.js and wasn't making much headway.

I'm trying to create a world map with topojson and d3-geo using scalajs based on the following example: How-to-create-pure-react-SVG-maps-with-topojson-and-d3-geo

My biggest issue so far is what I don't understand how I can implement geoEqualEarth() and geoPath() functions from d3-geo using scala since both of them have a number of methods, for example const projection = geoEqualEarth().scale(160).translate([ 800 / 2, 450 / 2 ]). This piece of code suppose to create a projection (which is assumed to be an array of numeric values), and that projection is later used in geoPath().projection(projection)(d) to create a proper input string for the tag. I'm really confused about how such kind of logic can be implemented in scala and I'm not sure if I can use pure JS in this case.