Visualize data with a scatter plot with d3+react

Code Feedback
1

Hello, I just finished the scatter plot project with all tests passing, you can find it here
I chose to do it with react which was unnecessary, but I found it useful to work on that skill aswell.
One minor thing about my code is that the tooltip always stays in the same place unlike the freecodecamp example, if anyone would know how to change that, it would be much appreciated.
Other comments are welcome too ofcourse.
Thanks in advance.

2

You can change the tooltip position by changing its position via CSS properties according to where the mouse pointer is located on the plot. There are numerous examples I’ve seen in the freeCodeCamp forums and via Google that implement tooltips that follow the mouse pointer, but be aware that the D3 interface to the mouse pointer position has changed between major versions at some point, so make sure that the examples you find match the version you are using. Since you already have tooltips, I assume you have the mouse events added to your data. You need a mousemove event that styles your tooltip based on event.pageX and event.pageY or the similar values used in your version of D3 (see this example, for instance).

I used D3 v6 for my plots and chose to have the tooltip be stationary in my legend because I haven’t bothered to implement following the pointer yet.

3

Thanks but probably my question wasn’t too clear.
I know there are a lot of examples but noone of them use React which is what I was trying to do.

I already made a tooltip div element in my return statement and made ref so I could acces it.
Then i added the mouseover and mouseout d3 sections with code like this:

.on(‘mouseover’,(d,i)=>{

  let tooltip=this.myRef.current;
  let {Year,Seconds}=i;
  if(i.Doping){
    tooltip.innerHTML=i.Name +"("+i.Nationality+"), "+
    '<br>'+'Time: '+i.Time+'<br>'+ 'year: '+i.Year +'<br>'+i.Doping;
    tooltip.classList.add('show');
    tooltip.setAttribute("data-year",Year);
    
  }
  else{
    tooltip.innerHTML=i.Name +"("+i.Nationality+"), "+
    '<br>'+'time: '+i.Time+ '<br>'+'year: '+i.Year +'<br>';
    tooltip.classList.add('show');
    tooltip.setAttribute("data-year",Year)
    
  }
  
})
.on('mouseout',(d,i) => {
  let tooltip=this.myRef.current;
  tooltip.classList.remove('show')
});

I was wondering how I could add the flexible tooltip position in this, since I don’t really see what method I could use for that and was wondering if anyone had any ideas.
To me, this looks pretty neat but since nobody else is doing this it might just be poorly written code.

4

To whoever might care in the future: i changed my code and this is my working final solution with react & a flexible tooltip:tadaa