d3-geo-projection | Extended geographic projections for d3-geo | Map library

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:

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 am trying to create a simple bubblemap that plots longitude-latitude pairs by a number of admissions for a county using US DHS data. My CSV file has the name of county, longitude, latitude, type of Admission, class of admission, number of admissions, and country of origin. I've created some checkboxes that will allow the user to see a bubblemap of the different classes of admissions that were admitted to the United States.

I've learned that the d3geoAlbersUsa projection projects the map of the USA at [0,0] which is off the coast of Africa. From the photo below (see Imgur link), you can see that my points seem to plot at the correct coordinates. However, the background map is not visible. When I use d3.geoMercator() and center the projection on [0,0] I see the map. In both cases, I don't know how to make the bubbles appear on the map.

I'm new to d3 so I'm not sure how to go about this. How do I create a bubblemap using long lat coordinates with the d3geoAlbersUsa projection? Thanks for the help.

Here is my index.html:

I'm trying to plot circles on top of a map using d3.js, I got most of the code working and can plot points from custom data, however when it comes to plotting them from csv the same code doesn't work

Here is the full code:

My question is very similar to D3 V4 Properly placing a bubble in the US Map, but the map I'm using is a map of Scotland's local authority districts instead so I can't quite see how to apply either of the solutions.

I'm creating a bubble map on top of a choropleth map of Scotland, with circles at specified locations which I'm providing as latitude/longitude coordinates.

However, the locations of the circles are completely out - the circle for Aberdeen is in the sea!

Based on D3 V4 Properly placing a bubble in the US Map, I think perhaps the GeoJSON is pre-projected so I'm using two different projections, one for the map and one for the circles. Ideally I think I would find a different GeoJSON that didn't cause this problem, but I think the one I'm using from https://martinjc.github.io/UK-GeoJSON/ is the only one available.

So my question is, is there a sensible method for figuring out what projection this map is, in order that I can use the same projection for the circles?

This is my first question on here so please bear with.

I'm trying to make a choropleth (a map where different sections are coloured in based on some value assigned to them) using d3.js. I'm using the example given at https://www.d3-graph-gallery.com/graph/choropleth_basic.html, but changing the map to one of Scotland and changing the values to population density.

When I run it, I get a map but it's all coloured in the same shade of blue. I've tried changing the domain of colorScale but to no avail.

This is what I've got at the minute: