Can't figure out why the tooltip isn't working

JavaScript
1

I can’t hack this problem. In my mind, it should be working but there’s obviously something I can’t understand here. Can you guys help me figure out what the problem is and how I should approach it?
CodePen Link

3

oh, I completely forgot to edit out the CodePen. I was tweaking the code as I couldn’t get a stab at it. This was supposed to be in the Pen but this also doesn’t work for me

.on('mouseover', function (e, d) {
    const index = year.indexOf(d);
    d3.select('#tooltip')
        .style('opacity', 1)
        .style('left', e.pageX + 'px')
        .style('top', e.pageY + 'px')
        .html(
        `
        <p>Time: ${otherInfo[index].Time}</p>
        <p>Place: ${otherInfo[index].Place}</p>
        <p>Name: ${otherInfo[index].Name}</p>
        <p>Nationality: ${otherInfo[index].Nationality}</p>
        <p>Doping: ${otherInfo[index].Doping}</p>
        `
        );
})

I thought of something. Maybe I should store the whole array into one variable and then access the specific data where necessary. It may solve the problem; I think. But I can’t help but think if there’s an easier way.

4

I figured it out.

    .on('mouseover', function (e, d) {
        const circle = d3.select(this);
        const xValue = circle.attr('data-xvalue');
        const yValue = circle.attr('data-yvalue');
        const index = seconds.findIndex(sec => new Date(sec * 1000).getTime() === new Date(yValue).getTime());
        d3.select('#tooltip')
            .style('opacity', 1)
            .style('left', e.pageX + 'px')
            .style('top', e.pageY + 'px')
            .attr('data-year', xValue)
            .html(
                `
                <p><strong>Year:</strong> ${xValue} <strong>Time:</strong> ${otherInfo[index].Time}</p>
                <p><strong>Place:</strong> ${otherInfo[index].Place}</p>
                <p><strong>Name:</strong> ${otherInfo[index].Name}</p>
                <p><strong>Nationality:</strong> ${otherInfo[index].Nationality}</p>
                <p><strong>Doping:</strong> ${otherInfo[index].Doping}</p>
                `
            );
    })

Here in the code, I selected the working DOM element and assigned to variable circle. Then I stored data-xvalue and data-yvalue in xvalueand yvalue respectively.

After that I used .findIndex() to iterate over the elements to find the index of an element in the seconds array that matches the given condition i.e whether the time value in milliseconds derived from each element in the seconds array matches the time value stored in the data-yvalue attribute of the selected circle element.

If a match is found, findIndex() returns the index of that element in the array. This index value is then stored in the index variable. Then, the corresponding value is seen in each circle.

This logic somehow worked without me rewriting the whole code so it was a win.

P.S: Thank you everyone that managed to look over my code to figure out the problem