tooltipEventListeners = countriesSelection .on('mouseenter', ({ target }) => { tooltipSelection.style('visibility', 'visible'); d3.select(target) .transition() .duration(150) .ease(d3.easeCubic) .style('fill', '#ffba08'); }) .on('mousemove', ({ pageX, pageY, target }) => { tooltipSelection .style('top', `${pageY + 20}px`) .style('left', `${pageX - 10}px`) .style('z-index', 100) .html( `${ target.__data__.properties.name }
Total population: ${ target.__data__.properties.totalPopulation }
Life Expectancy: ${ target.__data__.properties.lifeExpectancy }
Employment Rate: ${ target.__data__.properties.employmentRate }
Urban Ratio: ${ target.__data__.properties.urbanPopulationRatio }
Literacy Rate: ${ target.__data__.properties.latestLiteracyRate }
GDP: ${ target.__data__.properties.GDP }
Avg GDP: ${ target.__data__.properties.avgGDP }
Avg GDP Index(Div by HK): ${ target.__data__.properties.avgGDPIndex }
ABS Latitude: ${ target.__data__.properties.absLatitude }
Labor Force Participation: ${ target.__data__.properties.laborForceParticipation }
Infant Mortality: ${ target.__data__.properties.infantMortality }
Fertility Rate(*10): ${ target.__data__.properties.fertilityRateT }
Out of Pocket Health Expenditure: ${ target.__data__.properties.healthExpenditureRatio }`, ) .append('div') .attr('class', 'triangle'); d3.selectAll('.triangle').style('top', `${-Math.sqrt(20) - 3}px`); }) .on('mouseleave', (e) => { tooltipSelection.style('visibility', 'hidden'); d3.select(e.target) .transition() .duration(150) .ease(d3.easeCubic) .style('fill', (d) => d.properties.fillColor); });