graphic = { const svg = d3.select(DOM.svg(width, height)) svg.attr('id','scatter') const g = svg.append('g') .attr('id','art-g') .attr('transform',`${unrotate ? 'rotate(0)' : ('translate(0,' + height/2 + ') rotate(-45)' )}`) g.html(`3,000-hit club // 3,000 hitsand 600 homers // 600-homer club // Everyone else`) const tooltip = svg.append('g') .attr('class','tooltip') const tooltipBg = tooltip.append('rect').attr('class','tooltip-bg') const tooltipName = tooltip.append('text').attr('dy',18) const tooltipStats = tooltip.append('text').attr('dy',36) g.append('rect') .attr('class','bg-rect gray') .attr('x',0) .attr('y',`${artHeight/3}`) .attr('width',`${artWidth*(2/3)}`) .attr('height',`${artHeight*2/3}`) g.append('rect') .attr('class','bg-rect hits') .attr('x',0) .attr('y',`${-artHeight*(2/3)}`) .attr('width',`${artWidth*2}`) .attr('height',`${artHeight}`) g.append('rect') .attr('class','bg-rect hr') .attr('x',`${artWidth*(2/3)}`) .attr('y',`${-artHeight}`) .attr('width',`${artWidth}`) .attr('height',`${artHeight*2}`) g.append('rect') .attr('class','stroke-rect hits') .attr('x',0) .attr('y',`${-artHeight}`) .attr('width',`${artWidth*(2/3)}`) .attr('height',`${artHeight*2}`) g.append('rect') .attr('class','stroke-rect hits') .attr('x',0) .attr('y',`${artHeight/3}`) .attr('width',`${artWidth*2}`) .attr('height',`${artHeight*(2/3)}`) g.selectAll('circle') .data(CAREERS) .join('circle') .attr('r',d => ((d[1].HR >= 600 || d[1].H >= 3000) ? radius * 2 : radius)) .attr('cx',d => xScale(d[1].HR)) .attr('cy',d => yScale(d[1].H)) .attr('class',d => `player-dot ${d[1].HR >= 600 ? 'hr hr-club' : ''} ${d[1].H >= 3000 ? 'hits hit-club' : ''}`) .on('mousemove',(e,d)=> { // d3.select(e.target).classed('hover',true) tooltip.attr('transform',`translate(${e.layerX + 6},${e.layerY - 40})`).attr('class','tooltip') tooltipName.text(d[1].dispName) tooltipStats.text(`${commafy(d[1].H)} H, ${d[1].HR} HR`) tooltipBg.attr('width',d3.max([tooltipStats.node().getBBox().width,tooltipName.node().getBBox().width])) tooltipBg.attr('height',40) d3.select(e.target).classed('hover',true).node().parentNode.append(e.target) }) .on('mouseout',(e,d)=> { d3.select(e.target).classed('hover',false) tooltip.attr('class','tooltip hidden') }) g.selectAll('g') .data(CAREERS.filter(d => (d[1].HR >= 600 || d[1].H >= 3000) || (Object.keys(alignment).includes(d[0])))) .join('g') .attr('class',d => `player-label ${Object.keys(alignment).includes(d[1].dispName) ? alignment[d[1].dispName][(!unrotate ? 'rotated' : 'normal')] : ''}`) .append('text') .attr('transform',d => `translate(${xScale(d[1].HR) + 4},${yScale(d[1].H) - 2}) rotate(${unrotate ? 0 : 45})`) .text(d => d[1].dispName) return svg.node() }