31:T521,md`# Ranking The Banana Boat Crew

The *Banana Boat Crew* refers to a group of superstar NBA players who are close friends and were all drafted into the league around 2003. The group consists of **LeBron James** (*1st, 2003*), **Carmelo Anthony** (*3rd, 2003*), **Dwayne Wade** (*5th, 2003*) and **Chris Paul** (*4th, 2005*). The *Banana Boat* monicker entered the basketball lexicon in 2015 when a photo of the group riding an inflatable banana surfaced while the quartet was vacationing with their wives in the Bahamas.

While all the members are considered future *Hall of Famers* it can be a challenge to rank them in order of greatness. Of course, **LeBron** is the consensus #1, and the statistics back that up. However, the positions after him are up for debate. This is particularly true if we define greatness as individual basketball skill. The visualization compares members of the *Banana Boat Crew* across various individual statistical categories over the course of their careers. `32:T45b,md`# Conclusion As of the end of the 2018-19 season, **Dwayne Wade** is retired, **Carmelo Anthony** has been waived by multiple teams, **Chris Paul** is considered an aging superstar with an albatross of a contract and **LeBron James** is still considered, by many, to be the best player in the NBA. This consistency can be seen in the visualization, not only does **LeBron** rank near the top of all categories, his performance shows little sign of deterioration, and is even increasing in many cases.

What I personally found a little shocking was how well **Chris Paul** stacks up to his fellow 🍌s. He is captain to the boat in assists, steals, free throws and is 2nd to **LeBron** is advanced metrics like *PER*. If I was forced to rank the players strictly by individual statistics I would do so like this, although 2nd and 3rd are close. |Rank|Player| |:-:|:-:| |1|King James| |2|CP3| |3|D-Wade| |4|Melo| `33:Ta25,function draw() { svg.selectAll('*').remove() var axis = svg.append('g').attr('class', 'g-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('%Y')) .ticks(8) .tickPadding(margin.v * .25) svg .select('.axis--x') .call(xAxis) .attr('transform', `translate(${margin.h / 2}, ${height})`) .call(g => g.append('text') .attr('x', width + 20) .attr('y', -5) .attr('font-weight', '600') .text('Season')) var yAxis = d3 .axisLeft(yScale) .tickFormat(getYFormat()) .ticks(4) svg .select('.axis--y') .call(yAxis) .attr('transform', `translate(${margin.h / 2}, ${margin.v})`) .call(g => g.append('text') .attr('x', 10) .attr('y', 10) .attr('font-weight', '600') .attr('text-anchor', 'start') .text(categories.find(el => el.value === stat).label)) var legend = svg .selectAll('.legend') .data(names) .enter() .append('g') .attr('class', 'legend') .attr('transform', (d, i) => `translate(${i * 150}, 0)`) legend .append('rect') .attr('width', 15) .attr('height', 15) .attr('x', 150) .attr('y', 10) .attr('fill', d => cScale(d)) .attr('stroke', d => d3.rgb(cScale(d)).darker(.75)) .attr('stroke-width', 1) legend .append('text') .attr('x', 170) .attr('y', 22) .attr('font-weight', '600') .text(d => d) nestedData.forEach(n => { var l = length(line(n)) svg .append('path') .datum(n) .attr("fill", "none") .attr("stroke", d => cScale(d[0].NAME)) .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-dasharray", `0,${l}`) .attr("d", line) .attr('transform', `translate(${margin.h / 2}, ${margin.v})`) .transition() .duration(duration) .ease(d3.easeLinear) .attr("stroke-dasharray", `${l},${l}`) }) svg .append('g') .selectAll('circle') .data(data) .join('circle') .attr('stroke', d => cScale(d.NAME)) .attr('fill', d => d3.rgb(cScale(d.NAME)).darker(.75)) .attr('stroke-width', 2) .attr('cx', d => xScale(new Date(d.YEAR))) .attr('cy', d => yScale(d[stat])) .attr('r', 5) .attr('transform', `translate(${margin.h / 2}, ${margin.v})`) .append('title') .text(d => getYFormat()(d[stat])) return svg.node() }34:[] 2f:{"title":"Ranking The Banana Boat Crew","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"viewof stat = radio({\n title: 'Statistical Categories',\n description: 'Choose a stat to re-draw the visualization.',\n options: categories.map(el => el),\n value: 'PTS'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"draw()","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"css`\nbody {\n font-family: Arial, Helvetica, sans-serif;\n user-select: none;\n}\nsvg {\n border: 1px solid #ccc;\n padding: 5px;\n}\n.axis path {\n stroke: #eee;\n}\n.axis text {\n fill: #111;\n font-size: 10px;\n}\n.axis line {\n stroke: #aaa;\n}\n.legend {\n font-size: 11px;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"margin = ({\n v: 40,\n h: 80\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"duration = 2500","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"svg = d3.select(DOM.svg(width + margin.h * 1.5, height + margin.v * 2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"xScale = d3\n .scaleTime()\n .domain([new Date('2004'), new Date('2018')])\n .range([0, width + margin.h / 2])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(data, d => d[stat]))\n .range([height - margin.v, 0])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"cScale = d3\n .scaleOrdinal()\n .domain(names)\n .range(['#83B964', '#D99D26', '#6677CC', '#C75757'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"line = d3\n .line()\n .curve(d3.curveCatmullRom)\n .x(d => xScale(new Date(d.YEAR)))\n .y(d => yScale(d[stat]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"function getYFormat() {\n switch(stat) {\n case('FG%'):\n case('FT%'):\n case('3P%'):\n case('TS%'):\n return d3.format('.0%')\n case('SAL'): \n return d3.format('$.0s')\n default: return d3.format('0')\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"function length(path) {\n return d3.create(\"svg:path\").attr(\"d\", path).node().getTotalLength();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"nestedData = [lebron, carmelo, dwade, cp]","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"names = ['LeBron James', 'Carmelo Anthony', 'Dwayne Wade', 'Chris Paul']","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"categories = [\n {label: 'Points', value: 'PTS'},\n {label: 'Rebounds', value: 'TRB'},\n {label: 'Assists', value: 'AST'},\n {label: 'Steals', value: 'STL'},\n {label: 'Blocks', value: 'BLK'},\n {label: 'Turnovers', value: 'TOV'},\n {label: 'Games Played', value: 'G'},\n {label: 'Games Started', value: 'GS'},\n {label: 'Minutes Played', value: 'MP'},\n {label: 'Usage Rate', value: 'USG%'},\n {label: 'True Shooting %', value: 'TS%'},\n {label: 'Field Goal %', value: 'FG%'},\n {label: 'Three Point %', value: '3P%'},\n {label: 'Free Throw %', value: 'FT%'},\n {label: 'Player Efficency Rating', value: 'PER'},\n {label: 'Win Shares', value: 'WS'},\n {label: 'Value Over Replacement Player', value: 'VORP'},\n {label: 'Defensive Box +/-', value: 'DBPM'},\n {label: 'Total Box +/-', value: 'BPM'},\n {label: 'Salary', value: 'SAL'},\n {label: 'Age', value: 'AGE'}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"data = [...lebron, ...carmelo, ...dwade, ...cp]","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"lebron = d3.json('https://gist.githubusercontent.com/benjaminadk/38e663888c7b4420266ff127af0f0459/raw/17c812913d78f572e913eed4637e0bbd4459a40c/lebron.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"carmelo = d3.json('https://gist.githubusercontent.com/benjaminadk/f3c041f24b5abc3f927cfeb251645d1c/raw/cef74589019fe4696a5251918e389c4759c82530/carmelo.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"dwade = d3.json('https://gist.githubusercontent.com/benjaminadk/f7596ed6f752848a8b927a7f79af435e/raw/bcd94abb1752909f6cf1c01b0e1517132b6cc8d5/dwade.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"cp = d3.json('https://gist.githubusercontent.com/benjaminadk/d99707a33f7afeedccc21076573013e5/raw/5d5e6cf3202e65b19881e143a34b8fe53aeb5312/cp.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"css = (...args) => {\n const style = interpolate(...args)\n return html`\n

CSS

\n${md`\n~~~css\n${style}\n~~~\n`}\n

\n\n\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"interpolate = (strings, ...interpolations) => {\n let s = ''\n for (let i = 0; i < strings.length; i++) {\n s += strings[i]\n if (i < interpolations.length) {\n s += String(interpolations[i])\n }\n }\n return s\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"import {radio, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}