D3 xAxie Space Visualize Data with a Scatterplot Graph

Hi, I’m triying to add some space to the x axie to look like the project reference… I haven’t figured out yet… Could someone help me with this?

I tried modifying the scale function. But It doesn’t do what i need.

const w = 700;
const padding = 30;
const xScale = d3.scaleTime();
xScale.domain(xDomain).range([padding, w - padding]);

I need the tick “1994” to be in that position but I also need the complete line.

I appreciate your help.

You don’t have to use 1994 as the minimum for the x-axis scale.

1 Like

What is your “xDomain” variable you mention.

I’m using extent so I don’t have to use min and max. Also I parsing/formating the years into Dates… But I think I can use scaleLinear, I tried but same result.

const parseYear = d3.timeParse("%Y");

const years = data.map((ele) => parseYear(ele.Year));

const xDomain = d3.extent(years);

const xScale = d3.scaleTime();
xScale.domain(xDomain).range([0, w - padding]);

Well, your domain is going to specify the start and end of your x-axis, the min and max values. So if your axis is starting at 1994 and you don’t want it to, your domain would need to be adjusted.

Yeah, I changed, I ended up looking at the reference project code to see how they did… Now I feel bad cause I didn’t find that answer but what they did is pretty clever, they expand the domain giving space for the data… This is why I did.

with this code:

xScale.domain([new Date("1993"), xDomain[1]]).range([0, w - padding]);

Buuuuuuuuuuut, I don’t feel to bad cause I already have passed all the test by myself :sweat_smile:

Exactly… in my project, my timescale was linear, so I did d3.min - 1 for the domain so that my scale started 1 year before 1994.

1 Like