d3-scale | Encodings that map abstract data to visual representation | Data Visualization library

I am passing d3 linear scales into a function using typescript.

At the moment, I have a basic scatter plot with linear x and y scales that are used to create the axes i.e. using

d3.scaleLinear().domain([0.65, 0.78]).range([0, width])

and

d3.scaleLinear().domain([0, 1]).range([height, 0])

in conjunction with d3.axisBottom() or d3.axisLeft() to create the plot. The resulting plot is

I would like to modify the y-axis such that the intervals between the ticks are not equal e.g. [0.01, 0.05, 0.4, 0.5, 0.9, 0.95, 0.99] while still maintaining the overall size of the plot (no changes in height). Ideally, the plot should end up looking like this (ignore best fit line):

I've tried using piecewise plotting by mapping domain values to specific ranges (heights) but this doesn't quite work because the height of the plot gets modified.

Is there a way to create an axis that has unequal tick intervals and still maintain the original shape of the svg?

As requested, here is the data for the plot (x, y):

it's the first time I use Vue (v2 not v3) and I'm stucked trying to use a variable (defined inside a methods) inside the template.

My semplified code:

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'm seeing errors in running tests in Angular:

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'm using Recharts to plot data in react.

I want to be able to see all four cartesian quadrants in the graphing process. I'm currently using this code,

I'm fairly new to D3.js and I'm trying to make a wordcloud using Jason Davies' wordcloud library for D3. I'm not sure why the lesser frequent words overlap, and the distribution of words is such that there is a lot of empty spaces in between. I want it more condensed and structured. This is the

I have seen similar questions here and I've tried a lot of solutions mentioned earlier such as:

1. Altering svg and canvas dimensions.
2. Changing the font style like .font('Helvetica')
3. Using variations of 10 words, 30 words, and 50 words.
4. Specified a text accessor function like this .text(function(d) { return d.word; })
5. Exploring options in .padding()
6. Used .rotate(0)

Here is my code on JS Fiddle.

For the sizing of words, instead of the frequency of occurrence of the word, I'm using rank in my code. This is because the sizing gets disrupted due to the outliers in my dataset. Say the highest frequency is 32, and the lowest is 1, there is a large difference between the two sizes as they are proportionally mapped.

So I opted to size the words based on rank. I have used Javascript to sort this data.

This is my first question here, so apologies if there is a lack of clarity. Would love any feedback or help/solution to this!

Thanks so much in advance :)

I built an animated choropleth map using d3 which uses your typical usa topojson file (by county). The file can be found here: