31:T50d,styles=html``32:Tdaa,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() }33:T759,alignment = { return { "cabremi01":{ 'rotated':'', 'normal':'', }, "troutmi01":{ 'rotated':'', 'normal':'', }, "Rafael Palmeiro":{ 'rotated':'top middle', 'normal':'' }, "Nap Lajoie":{ 'rotated':'top left', 'normal':'' }, "collied01":{ 'rotated':'bottom left', 'normal':'' }, "Paul Molitor":{ 'rotated':'top left', 'normal':'' }, "Derek Jeter":{ 'rotated':'top left', 'normal':'' }, "Stan Musial":{ 'rotated':'top left', 'normal':'' }, "Carl Yastrzemski":{ 'rotated':'top left', 'normal':'' }, "Eddie Murray":{ 'rotated':'top middle', 'normal':'' }, "Babe Ruth":{ 'rotated':'', 'normal':'bottom' }, 'Willie Mays':{ 'rotated':'top left', 'normal':'top left' }, "Albert Pujols":{ 'rotated':'bottom middle', 'normal':'' }, "Jim Thome":{ 'rotated':'bottom middle', 'normal':'' }, "Cap Anson":{ "rotated":'top left', "normal":'top left' }, "Paul Waner":{ "rotated":'top left', "normal":'top left' }, "Rod Carew":{ "rotated":'bottom middle', "normal":'top left' }, "Wade Boggs":{ "rotated":'bottom', "normal":'bottom middle' }, "Lou Brock":{ "rotated":'bottom', "normal":'' }, "Roberto Clemente":{ 'rotated':'', 'normal':'bottom middle' }, "Craig Biggio":{ 'rotated':'bottom', 'normal':'bottom left' }, "Robin Yount":{ 'rotated':'bottom left', 'normal':'top middle' }, "Dave Winfield":{ 'rotated':'top left', 'normal':'bottom' }, 'Cal Ripken':{ 'rotated':'bottom left', 'normal':'top middle' } } }34:[{"id":"3c4d2579706d77c09380bc00665c61bcc3a684853e931517769935101436493a979aacf8e0d20a18c3dba32cbb9162edb2cc13b864143a63c02ed611feb94c85","href":"https://static.observableusercontent.com/files/3c4d2579706d77c09380bc00665c61bcc3a684853e931517769935101436493a979aacf8e0d20a18c3dba32cbb9162edb2cc13b864143a63c02ed611feb94c85","name":"bbref_select.csv","type":"text/csv","lastModified":1611509048189.005,"size":717356},{"id":"b643c6f350a9f0b06733a12204ab2457daffd96744583299249843ac60f37798e62ac8f199d02e02cf0e656df538dc8f7150723f56ace7be5ef1c9ed3eb03394","href":"https://static.observableusercontent.com/files/b643c6f350a9f0b06733a12204ab2457daffd96744583299249843ac60f37798e62ac8f199d02e02cf0e656df538dc8f7150723f56ace7be5ef1c9ed3eb03394","name":"Batting.csv","type":"text/csv","lastModified":1611506263341.01,"size":6697823}] 2f:{"title":"Hank Aaron, the best ever?","cells":[{"id":0,"value":"md`# Hank Aaron, the best ever?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`This graphic is an updated version of one I made in 2018 for the Los Angeles Times. I've updated it to include stats through the 2020 season. The data comes from [Chadwick Baseball Bureau's Baseball Databank](https://github.com/chadwickbureau/baseballdatabank) and its [Register](https://github.com/chadwickbureau/register).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"tweet(\"1352655895466041349\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"viewof unrotate = checkbox({\n description:'',\n options:[{value:false,label:'Un-rotate'}],\n value:false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"viewof search = Search(NAMES)","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"search","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"// home runs on the X axis (hard coding the domain because we want 600 HR and 3000 H to meet)\nxScale = d3.scaleLinear().domain([0,600]).range([0,artWidth*(2/3)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"//hits on the Y axis (also hard coding this domain ¯\\_(ツ)_/¯)\nyScale = d3.scaleLinear().domain([0,3000]).range([artHeight,artHeight/3])","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"height = width ","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"artHeight = unrotate ? height : Math.sqrt((height*height)/2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"artWidth = artHeight","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"radius=3","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`### data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"CAREERS = Array.from(d3.rollup(DATA, v => {\n let name = NAMEMAP.get(v[0].playerID)\n if(!name){return {name:v[0].playerID,H:d3.sum(v, s => s.H),HR:d3.sum(v, s => s.HR)}}\n return {name:`${name.name_first} ${name.name_nick ? (\"\\\"\" + name.name_nick + \"\\\" \") : \"\"}${name.name_last}${name.name_suffix ? \" \" + name.name_suffix : \"\"}`, dispName: `${name.name_first} ${name.name_last}`,H:d3.sum(v, s => s.H),HR:d3.sum(v, s => s.HR)}\n}, d => d.playerID))","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`### imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"DATA = d3.csvParse(await FileAttachment(\"Batting.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"NAMES = d3.csvParse(await FileAttachment(\"bbref_select.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"NAMEMAP = new Map(NAMES.map(d => [d.key_bbref, d]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {tweet} from '@mbostock/tweet'","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"import {select} from \"@harrybiddle/inputs-with-complex-values\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"import {Search} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"commafy = function(str) {\n return str.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}