D3 Scatter Plot (need help fitting dots)

Hey there,

I completed the project but I would like to move the dots away from the axis. I’ve found some way to do it but I don’t get how to do it with my implementation. Any ideas?

Link here

Hi…
Disclaimer: I’m extremely new to D3
Here’s what worked for me - shifting the scales around a little…
The tests pass and the data points are okay, so hey, that’s a win :slight_smile:

  // Create scales

  const xScale = d3
    .scaleTime()
    .domain(d3.extent(data, xAccessor))
    .range([10, dimensions.boundedWidth]);

  const yScale = d3
    .scaleTime()
    .domain([d3.max(data, yAccessor), d3.min(data, yAccessor)])
    .range([dimensions.boundedHeight - 10, 0]);

Experts of D3, do send in better solutions :grin:

hey thanks for answering, I tried the same already last day but the result is a gap in the axis origin for me… :frowning:

I used simple int for years and expanded the domain by one year on both ends.

 [d3.min(years) - 1, d3.max(years) + 1] 

Since we know the years in the sample are from 1994 to 2015 and you’re using Date, you can test the display by hardwiring the X domain first like

domain([new Date(1993,0,1), new Date(2016, 0, 1)])

to see if the display works. And if it does, you update the code to set the min and max years based on the actual data.

1 Like

Wow…that’s brilliant! Thank you very much. Now I’ve to find a solution for the x axis.

If you mean to shift the graph upward, so the slow times like those around 39:45 won’t get too close to the horizontal Date scale, then you can apply the same technique by giving a slightly larger upper bound on the time scale (Y domain). I think setting it to 40:00 should work nicely.

Hey there,

actually I’m using the seconds and applying the same concept you suggested I was able to fit everything properly. Thank you very very much! Have a nice weekend :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.