31:T438,p1 = md`## What is Clutch? Not all moments in sports are created equal. An NBA basketball game, for example, is 48 minutes long and every made shot is worth either 2 or 3 points, no matter when it is scored. However, the context within which the shot is taken is very important when it comes to the concept of the **Clutch Gene**. Many of us counted down *4....3....2....1....Jordan*¹ and tried to hit that buzzer beater on the playground as kids. This high leverage, high pressure, high stakes type of moment, and more importantly, how one performs in said moment is what determines who is clutch, and therefore, who possess the clutch gene. The most clutch shot of the 2018-19 NBA season is, arguably, *Kahwi Leonard's* buzzer-beater in game 7 of the Eastern Conference Semi Finals. It was the first game winning shot in a game 7 of a playoff series and Kahwi's team, the *Toronto Raptors*, went on the win the NBA championship. It was a dramatic moment. The crowd is almost silent when the shot bounces off the rim and then errupts as it falls through the net. ` 32:Tbd6,chart1 = { replayShots var width = 600 var height = 600 var margin = 50 var duration = 10000 var ease = d3.easeBounce var dateExtent = d3.extent(dataByShot, d => new Date(d.date)) var timeExtent = d3.extent(dataByShot, d => d.time) var xScale = d3 .scaleTime() .domain(dateExtent) .range([0, width]) var yScale = d3 .scaleLinear() .domain(timeExtent) .range([height, 0]) var root = d3 .create('svg') .attr('width', width + margin * 2) .attr('height', height + margin * 2) var axis = root.append('g').attr('class', 'axis') axis.append('g').attr('class', 'axis axis-x') axis.append('g').attr('class', 'axis axis-y') var xAxis = d3 .axisBottom(xScale) .tickFormat(d3.timeFormat('%B')) .ticks(5) .tickPadding(margin * .2) root .select('.axis-x') .call(xAxis) .attr('transform', `translate(${margin}, ${height + margin})`) var yAxis = d3 .axisLeft(yScale) .tickFormat(d => d3.timeFormat('%-M:%S')(new Date(d * 1000))) .tickPadding(margin * .1) root .select('.axis-y') .call(yAxis) .attr('transform', `translate(${margin}, ${margin})`) var svg = root .append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margin}, ${margin})`) svg .selectAll('.shot') .data(dataByShot) .enter() .append('circle') .attr('cx', d => xScale(new Date(d.date))) .attr('cy', 0) .attr('r', 3) .attr('fill', '#F88716') .attr('fill-opacity', .25) .transition() .duration(duration) .ease(ease) .delay((d, i, n) => (i % 50) * 50 + (Math.random() * 50)) .on('start', function() { d3 .active(this) .attr('cx', d => { if(d.shot_result) { return xScale(new Date(d.date)) } else { return width + Math.random() * 1000 * (Math.round(Math.random()) === 0 ? -1 : 1) } }) .attr('cy', d => { if(d.shot_result) { return yScale(d.time) } else { return height + Math.random() * 1000 * (Math.round(Math.random()) === 0 ? -1 : 1) } }) .attr('fill', d => { if(d.shot_result) { if(d.type === 2) { return '#F88716' } else { return '#F84012' } } else { return '#000' } }) .attr('fill-opacity', d => d.shot_result ? .75 : .1) }) .on('end', function() { d3.select(this) .attr('r', d => d.shot_result ? 3 : 0) }) var node = root.node() var legend = html`

2 Pointer

3 Pointer

Missed Shot

` return html`

${legend}${node}

` }33:T438,md`## Trends Some interesting trends appear when we start to dig into the data. It comes as no surprise that *Kawhi Leonard* is one of the most clutch shooters, especially when looking at players with over 30 attempts. However, I was surprised by both *Luca Doncic* and *Trae Young*. They were *Rookie of the Year*² and runner up, were traded for each other, and are both clutch performers. *D'Angelo Russell*, a player who the media has criticised for his locker room behavior, also performed well in the clutch. On the flip side, *Paul George*, an MVP candidate, was the worst clutch performer of all players taking at least 30 attempts, with his teammate *Russell Westbrook* not much better.

D'Angelo Russell really does have ice water in his veins

`34:Tc53,selectedPlayer = { selectedTeam var team = teams.find(el => el.short === selectedTeam) var p1 = findHighestPaid(selectedTeam) var p2 = dataByTeamLeader.find(el => el.team === selectedTeam) var [first1, last1] = p1.name.toLowerCase().replace(/\./g, '').split(' ') var [first2, last2] = p2.name.toLowerCase().replace(/\./g, '').split(' ') var match = p1.name === p2.name var container = html`

` var image1 = html`

Highest Paid

${p1.name}

${p1.salary}

` var yes = html`` var no = html`` var middle = html`

Go-To Guy? ${yes} ${no}

` var mystery = html`

` var image2 = html`

Go-To Guy

${p2.name}

🏀 ${p2.shots.length} Shots

` yes.onclick = () => { var result = match ? html`

💲 Swish 💲

` : html`

🧱 Brick 🧱

` container.querySelector('.mystery').remove() container.appendChild(image2) middle.appendChild(result) yes.onclick = null no.onclick = null } no.onclick = () => { var result = !match ? html`

💲 Swish 💲

` : html`

🧱 Brick 🧱

` container.querySelector('.mystery').remove() container.appendChild(image2) middle.appendChild(result) yes.onclick = null no.onclick = null } container.appendChild(image1) container.appendChild(middle) container.appendChild(mystery) return container }35:T7f6,{ var width = 600 var height = 400 var margin = 50 var xScale = d3.scaleBand().domain(playoffByTeam.map(d => d.team)).range([0 , width]).padding(.4) var yExtent = d3.extent(playoffByTeam, d => d.percentage) var yScale = d3.scaleLinear().domain([.2, yExtent[1] + .05]).range([height, 0]) var root = d3.create('svg').attr('width', width + margin * 2).attr('height', height + margin * 2) var svg = root .append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margin}, ${margin})`) var bar = svg.selectAll('.bar') .data(playoffByTeam) .enter() .append('rect') .attr('x', d => xScale(d.team)) .attr('y', d => yScale(d.percentage)) .attr('width', xScale.bandwidth()) .attr('height', d => height - yScale(d.percentage)) .attr('fill', d => { var t = teams.find(team => d.team === team.short) return t.colors[0] }) svg.selectAll('.image').data(playoffByTeam).enter() .append('image') .attr('width', 40) .attr('height', 40) .attr('x', d => xScale(d.team)) .attr('y', height + 10) .attr('xlink:href', d => `https://observable-notebooks.s3-us-west-1.amazonaws.com/clutch-gene/team-logos/${d.team}.svg`) var axis = root.append('g').attr('class', 'axis') axis.append('g').attr('class', 'axis x-axis') axis.append('g').attr('class', 'axis y-axis') var xAxis = d3 .axisBottom(xScale) var yAxis = d3 .axisLeft(yScale) .tickFormat(d3.format('.0%')) .tickPadding(5) var xAxisElements = axis .select('.x-axis') .call(xAxis) .attr('transform', `translate(${margin}, ${height + margin})`) xAxisElements.selectAll('text').remove() axis .select('.y-axis') .call(yAxis) .attr('transform', `translate(${margin}, ${margin})`) root .append('text') .attr('x', 70) .attr('y', 80) .style('font-weight', '600') .text('Playoff Team Clutch Shooting % (Min 20 Attempts)') return root.node() }36:T935,styleDefs = css` * { box-sizing: border-box; } body { font-family: Helvetica, Arial, sans-serif; } .video-container { position: relative; width: 1000px; height: calc(1000px * 9/16); background-image: linear-gradient(22.5deg, #00000040 25%, transparent 25%, transparent 50%, #00000040 50%, #00000040 75%, transparent 75%, transparent); background-size: 2px 2px; } video { position: absolute; top: 0; left: 0; width: 1000px; height: calc(1000px * 9/16); z-index: -1; } .caption { font-size: 12px; } .axis path { stroke: #DDD; } .legend { position: absolute; top: 70px; left: 520px; width: 100px; height: 60px; background: #FFF; border: 1px solid #333; padding: 6px; z-index: 10; } .legend .row { display: flex; align-items: center; } .legend .ball { width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; } .legend .two { background: #F88716; opacity: .75; } .legend .three { background: #F84012; opacity: .75; } .legend .miss { background: #000; opacity: .3; } .legend .shot-type { font-size: 11px; } .tooltip { position: absolute; width: 200px; height: 85px; background: #FFF; border: 2px solid #808080; border-radius: 4px; z-index: 10; padding: 5px; font-size: 12px; } .logo-wrapper { display: grid; grid-template-rows: 80px 80px 80px; grid-template-columns: repeat(10, 80px); align-items: center; justify-items: center; } .logo-wrapper img { width: 60px; height: 60px; padding: 5px; border: 1px solid transparent; filter: grayscale(100%); transition: .25s ease; } .logo-wrapper img:hover { filter: none; border: 1px dashed #000; } .logo-wrapper .selected { filter: none; border: 1px solid #000; } .goto-wrapper { display: flex; align-items: center; } .goto-wrapper .player { display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #000; box-shadow: 4px 4px #000; } .player .label { width: 100%; font-weight: bold; text-align: center; color: #FFF; padding: 4px; } .goto-wrapper img { width: 250px; } .goto-wrapper .middle { display: flex; flex-direction: column; align-items: center; margin: 0 50px 0 40px; } .middle button { width: 60px; margin-top: 10px; padding: 10px; } .middle .answer { margin-top: 10px; font-weight: bold; } `37:T122a,function createBarChart(height, dataset, mmRatio, minAttempts) { var width = 600 var margin = 50 var data = dataset.filter(player => player.shots.length >= minAttempts) data.sort((a, b) => b.percentage - a.percentage) var xExtent = d3.extent(data, d => d.percentage) var xScale = d3.scaleLinear().domain(xExtent).range([0, width]) var yScale = d3.scaleBand().domain(data.map(d => d.name)).range([0 , height]).padding(.4) var root = d3 .create('svg') .attr('width', width + margin * 2) .attr('height', height + margin * 2) .attr('class', 'root') var tooltip = d3.select('body') .append('div') .attr('class', 'tooltip') .style('opacity', 0) var svg = root .append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margin}, ${margin})`) var bar = svg .selectAll('.bar') .data(data) .enter() .append('rect') .attr('class', (d, i) => `bar bar-${i}`) .attr('x', d => xScale(Math.min(mmRatio, d.percentage))) .attr('width', d => Math.abs(xScale(d.percentage) - xScale(mmRatio))) .attr('y', d => yScale(d.name)) .attr('height', yScale.bandwidth()) .attr('fill', d => d.percentage > mmRatio ? `url(#diagonalHatch)` : 'url(#negDiagonalHatch)') .attr('stroke-width', 2) .on('mouseover', function(d, i) { d3.select(this) .attr('stroke', d.percentage > mmRatio ? '#2DD26F' : '#D72D2D') d3.select(`.label-${i}`) .attr('fill', '#333') d3.select('.tooltip') .style('top', () => { var y = d3.event.y if(i > 100) { return y - 100 + 'px' } else { return y + 20 + 'px' } }) .style('left', d3.event.x + 40 + 'px') .html(`Name: ${d.name}
Team: ${d.team}
Shots: ${d.shots.filter(x => x.shot_result).length}/${d.shots.length}
FG%: ${Math.round((d.percentage * 1000)) / 10}%
`) .transition() .duration(200) .style('opacity', 1) }) .on('mouseout', function(d, i) { d3.select(this) .attr('stroke', 'none') d3.selectAll('.label') .attr('fill', '#CFCFCF') d3.select('.tooltip') .style('opacity', 0) }) var text = svg .selectAll('.label') .data(data) .enter() .append('text') .attr('class', (d, i) => `label label-${i}`) .attr('x', d => d.percentage > mmRatio ? xScale(mmRatio) - 10 : xScale(mmRatio) + 10) .attr('y', d => yScale(d.name) + yScale.bandwidth() / 2) .attr('fill', '#CFCFCF') .attr('font-size', '13px') .attr('font-weight', '600') .attr('text-anchor', d => d.percentage > mmRatio ? 'end' : 'start') .attr('alignment-baseline', 'middle') .text(d => d.name) var axis = root.append('g').attr('class', 'axis') axis.append('g').attr('class', 'axis x-axis-top') axis.append('g').attr('class', 'axis x-axis-bottom') var xAxisTop = d3 .axisTop(xScale) .tickFormat(d3.format('.0%')) .tickPadding(5) var xAxisBottom = d3 .axisBottom(xScale) .tickFormat(d3.format('.0%')) .tickPadding(5) var topAxis = axis .select('.x-axis-top') .call(xAxisTop) .attr('transform', `translate(${margin}, ${margin})`) topAxis .call(g => g.append('text') .attr('x', xScale(mmRatio)) .attr('y', -30) .attr('text-anchor', 'middle') .attr('font-size', '12px') .attr('font-weight', '600') .attr('fill', '#808080') .text(`League Average: ${mmRatio * 100}%`) ).append('line') .attr('x1', xScale(mmRatio)) .attr('x2', xScale(mmRatio)) .attr('y1', -25) .attr('y2', height + 25) .attr('stroke', '#DDD') .attr('stroke-width', 2) .attr('stroke-dasharray', '2px 2px') topAxis .call(g => g.append('text') .attr('x', xScale(mmRatio)) .attr('y', height + 30) .attr('text-anchor', 'middle') .attr('font-size', '12px') .attr('font-weight', '600') .attr('fill', '#808080') .text(`League Average: ${mmRatio * 100}%`)) axis .select('.x-axis-bottom') .call(xAxisBottom) .attr('transform', `translate(${margin}, ${height + margin})`) return root.node() }38:Tb75,teams = [ { short: 'GSW', full: 'Golden State Warriors', colors: ['#006BB6', '#FDB927', '#26282A'] }, { short: 'HOU', full: 'Houston Rockets', colors: ['#CE1141', '#000000', '#C4CED4'] }, { short: 'OKC', full: 'Oklahoma City Thunder', colors: ['#007AC1', '#EF3B24', '#002D62', '#FDBB30'] }, { short: 'LAL', full: 'Los Angeles Lakers', colors: ['#552583', '#FDB927', '#000000'] }, { short: 'DET', full: 'Detroit Pistons', colors: ['#C8102E', '#006BB6', '#002D62', '#BEC0C2'] }, { short: 'BOS', full: 'Boston Celtics', colors: ['#007A33', '#BA9653', '#963821', '#E59E6D'] }, { short: 'TOR', full: 'Toronto Raptors', colors: ['#CE272F', '#B29557', '#8B8A8F', '#1A1D16'] }, { short: 'MEM', full: 'Memphis Grizzlies', colors: ['#5D76A9', '#12173F', '#F5B112', '#707271'] }, { short: 'DEN', full: 'Denver Nuggets', colors: ['#0E2240', '#FEC524', '#8B2131', '#1D428A'] }, { short: 'POR', full: 'Portland Trailblazers', colors: ['#E03A3E', '#000000', '#FFFFFF'] }, { short: 'SAS', full: 'San Antonio Spurs', colors: ['#C4CED4', '#000000', '#FFFFFF'] }, { short: 'MIA', full: 'Miami Heat', colors: ['#98002E', '#F9A01B', '#000000'] }, { short: 'CHI', full: 'Chicago Bulls', colors: ['#CE1141', '#000000', '#FFFFFF'] }, { short: 'NOP', full: 'New Orleans Pelicans', colors: ['#0C2340', '#C8102E', '#85714D'] }, { short: 'ATL', full: 'Atlanta Hawks', colors: ['#E03A3E', '#C1D32F', '#26282A'] }, { short: 'MIN', full: 'Minnesota Timberwolves', colors: ['#0C2340', '#236192', '#78BE20', '#9EA2A2'] }, { short: 'PHI', full: 'Philadelphia 76ers', colors: ['#006BB6', '#ED174C', '#002B5C', '#C4CED4'] }, { short: 'WAS', full: 'Washington Wizards', colors: ['#002B5C', '#E31837', '#C4CED4'] }, { short: 'MIL', full: 'Milwalkee Bucks', colors: ['#AC1A2F', '#274E37', '#95999D', '#FFFFFF'] }, { short: 'CLE', full: 'Cleveland Cavaliers', colors: ['#6F263D', '#041E42', '#FFB81C', '#000000'] }, { short: 'SAC', full: 'Sacramento Kings', colors: ['#5A2D81', '#63727A', '#000000'] }, { short: 'CHO', full: 'Charolette Hornets', colors: ['#1D1160', '#00788C', '#A1A1A4'] }, { short: 'UTA', full: 'Utah Jazz', colors: ['#002B5C', '#00471B', '#F9A01B'] }, { short: 'NYK', full: 'New York Knicks', colors: ['#006BB6', '#F58426', '#BEC0C2', '#000000'] }, { short: 'ORL', full: 'Orlando Magic', colors: ['#0077C0', '#C4CED4', '#000000'] }, { short: 'LAC', full: 'Los Angeles Clippers', colors: ['#C8102E', '#1D428A', '#BEC0C2', '#000000'] }, { short: 'IND', full: 'Indiana Pacers', colors: ['#002D62', '#FDBB30', '#BEC0C2'] }, { short: 'PHO', full: 'Phoenix Suns', colors: ['#1D1160', '#E56020', '#F9AD1B', '#B95915', '#63727A'] }, { short: 'BRK', full: 'Brooklyn Nets', colors: ['#000000', '#BEC0C2', '#FFFFFF'] }, { short: 'DAL', full: 'Dallas Mavericks', colors: ['#00538C', '#002B5E', '#B8C4CA', '#000000'] } ]39:[] 2f:{"title":"The NBA Clutch Gene","cells":[{"id":0,"value":"md`# The NBA Clutch Gene`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"dagger = {\n var video = html`