31:T5f7,## Visualization 1 This first visualization uses a [dataset](https://www.kaggle.com/justinas/nba-players-data) on basketball players from the 2020-2021 NBA season. Every year, the NBA has a draft where teams select new players, typically from college or other countries, to add to their rosters. The draft occurs in two rounds. One team picks one player at a time. Roughly speaking, the teams are ordered from worst team to best team, so that the worse teams get to select the better players. In this matrix, we visualize the first round picks from the past 18 NBA drafts. The rows represent draft years and the columns represent draft positions. For example, the first row represents the 2020 draft. The first column represents all of the players who were picked first in their year, the second column represents the players who were picked second, etc. If the player played in more than 25% of the games during the 2020-2021 season, then we color their cell according to their net rating, which may be positive or negative. If they played in less than 25% of the games, then we color their cell red. Since their sample size is so small, their net rating has more variance and is less meaningful. If they played in no games, then we color their cell white. This could mean the player is retired or they were injured for the whole season, for example. You are free to change the colors used. This visualization is inspired by Russell Goldenberg's [Twenty years of the NBA redrafted](https://pudding.cool/2017/03/redraft/).32:Tc61,{ // dimensions and set up const margin = {top: 0, right: 0, bottom: 40, left: 80}; const maxWidth = width; const maxHeight = 500; const numCols = draftNumbers.length; const numRows = draftYears.length; // calculate the maximum size that a cell can be const cellSize = Math.min( (maxWidth - margin.left - margin.right) / numCols, (maxHeight - margin.top - margin.bottom) / numRows ); const visWidth = cellSize * numCols; const visHeight = cellSize * numRows; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); // scales const x = d3.scaleBand() .domain(draftNumbers) .range([0, visWidth]) // space betwen columns .padding(0.05); const y = d3.scaleBand() .domain(draftYears) .range([visHeight, 0]) // space between rows .padding(0.6); // axis generators const xAxis = d3.axisBottom(x).tickSize(0); const yAxis = d3.axisLeft(y).tickSize(0); // draw axes // x-axis g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) .call(g => g.select('.domain').remove()) // axis label .append('text') .attr('x', visWidth / 2) .attr('y', 30) .attr('fill', 'black') .attr('text-anchor', 'center') .text('draft position'); // y-axis g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) // axis label .append('text') .attr('x', -35) .attr('y', visHeight / 2) .attr('fill', 'black') .attr('dominant-baseline', 'center') .attr('text-anchor', 'end') .text('draft year'); // draw squares // create one group for each cell const cells = g.append('g') .selectAll('g') .data(draftPicks) .join('g') // move the cell into its position .attr('transform', d => `translate(${x(d.number)},${y(d.year)})`); // add rectangle to each cell cells.append('rect') .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .attr('fill', d => { // the color scale that we use depends on whether or not the // player is active if (d.type === 'active') { return activePlayerNetRatingColor(d.net_rating); } else { return nonActivePlayerColor(d.type); } }) // out of curiosity, add tooltip .append('title') .text(d => d.name); // add text label to each cell cells.filter(d => d.type === 'active') .append('text') .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') .attr('x', x.bandwidth() / 2) .attr('y', y.bandwidth() / 2) .attr('font-size', 9) .attr('font-weight', 'bold') .attr('font-family', 'sans-serif') // use white labels on dark cells and black labels on light cells .attr('fill', d => d3.hcl(activePlayerNetRatingColor(d.net_rating)).l < 60 ? 'white' : 'black') .text(d => d.net_rating) return svg.node(); }33:T7ad,{ // set up const margin = {top: 10, right: 10, bottom: 20, left: 20}; const visWidth = 300 - margin.left - margin.right; const visHeight = 600 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); // scales const x = d3.scaleTime() .domain(monthExtent) .range([0, visWidth]); const y = d3.scaleLinear() .domain([0, maxCount]) .range([visHeight, 0]); // line generator const line = d3.line() .x(d => x(d.month)) .y(d => y(d.count)); // axes const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); // draw lines g.append('g') .selectAll('path') .data(titlesAddedByMonth) .join('path') .attr('d', d => line(d.counts)) .attr('fill', 'none') .attr('stroke', d => lineColor(d.type)) .attr('stroke-width', 2); // draw axes and grids // x-axis and verical grid lines g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) .call( // clone the axis tick marks to create the grid lines g => g.selectAll('.tick > line').clone() .attr('y1', 0) .attr('y2', -visHeight) .attr('stroke', 'black') .attr('stroke-width', 1) ) // y-axis and horizontal grid lines g.append('g') .call(yAxis) .call( // clone the axis tick marks to create the grid lines g => g.selectAll('.tick > line') // skip the first tick mark, since that's the baseline // of the x-axis .filter((d, i) => i !== 0).clone() .attr('x1', 0) .attr('x2', visWidth) .attr('stroke', 'black') .attr('stroke-width', 1) ) return svg.node(); }34:T517,{ // set up const margin = {top: 10, right: 10, bottom: 20, left: 50}; const visWidth = width - margin.left - margin.right; const visHeight = 500 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); // scales const x = d3.scaleLinear() .domain([0, d3.max(topActors, d => d.total)]) .range([0, visWidth]); const y = d3.scaleBand() .domain(topActors.map(d => d.name).sort()) .range([0, visHeight]); // axes const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); // draw bars const layers = g.append('g') .selectAll('g') .data(stacked) .join('g') .attr('fill', d => typeColor(d.key)); layers.selectAll('rect') .data(d => d) .join('rect') .attr('x', d => x(d[0])) .attr('width', d => x(d[1]) - x(d[0])) .attr('y', d => y(d.data.name)) .attr('height', y.bandwidth()); // draw axes // x-axis g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis); // y-axis g.append('g') .call(yAxis); return svg.node(); }35:[{"id":"ee9eb95b5d76414ac5857ec0bc4548165b1cc991b269eeaee4896a351a2b3c8644fb40176cd9f35bfaec7b53e9a2e04ee56ecf8b2ae6e48b9d4ee2a9430e111b","href":"https://static.observableusercontent.com/files/ee9eb95b5d76414ac5857ec0bc4548165b1cc991b269eeaee4896a351a2b3c8644fb40176cd9f35bfaec7b53e9a2e04ee56ecf8b2ae6e48b9d4ee2a9430e111b","name":"nba_players_2020_2021.csv","type":"text/csv","lastModified":1666304686114.428,"size":74907},{"id":"6a6c676e56c99197c0022b64aa21401d335d01cfeb53556007d82bce94be085a7e89124c4a579429ea62ff60b19edf536a5a69a57973a798cfc4aee84842e710","href":"https://static.observableusercontent.com/files/6a6c676e56c99197c0022b64aa21401d335d01cfeb53556007d82bce94be085a7e89124c4a579429ea62ff60b19edf536a5a69a57973a798cfc4aee84842e710","name":"netflix_titles.csv","type":"text/csv","lastModified":1666304686114.428,"size":3399671}] 2f:{"title":"Clarity Exercise","cells":[{"id":0,"value":"# Clarity Exercise\n\nIn this exercise, I have provided some bad or incomplete visualizations. Your job is to improve them.\n\nTo get started, create a fork of this notebook. Please click \"Publish\" and set the visibility to unlisted. You can then submit the link on Brightspace.","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"// get the list of players who were drafted in the first round\nfirstRoundsPicks = nbaPlayers.filter(player => player.draft_round === 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"// first and last draft year in our dataset\ndraftYearExtent = d3.extent(firstRoundsPicks, player => player.draft_year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"// all draft years in our dataset\ndraftYears = d3.range(draftYearExtent[0], draftYearExtent[1] + 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"// first and last draft numbers\ndraftNumberExtent = d3.extent(firstRoundsPicks, player => player.draft_number)","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"// all draft numbers\ndraftNumbers = d3.range(draftNumberExtent[0], draftNumberExtent[1] + 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"// map from draft year to draft number to player\ndraftYearToNumberToPlayer = d3.index(\n firstRoundsPicks,\n d => d.draft_year,\n d => d.draft_number\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"`draftPicks` contains one object for each cell in our grid. Each object has a draft year, draft number, and type. The type is either \"active\", \"inactive\", or \"< 25% games played\". If the player is active, then their object also contains their net rating.","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"draftPicks = d3.cross(\n draftYears,\n draftNumbers\n)\n .map(([year, number]) => {\n const player = draftYearToNumberToPlayer?.get(year)?.get(number) ?? null;\n const cell = { year, number };\n\n if (!player) {\n // if player is null, then they did not play in the 2020-2021 season\n cell.type = 'inactive';\n return cell;\n } else if (player.gp < 18) {\n // if the player played in less that a quarter of the games during the season\n // we treat them differently because their net rating is based on a smaller\n // sample size\n cell.type = '< 25% games played';\n cell.name = player.name;\n return cell;\n } else {\n // otherwise the player played in more than a quarter of the games during the season\n cell.type = 'active';\n cell.net_rating = player.net_rating;\n cell.name = player.name;\n return cell;\n }\n })\n // the 2003 and 2004 drafts had only 29 picks in the first round\n .filter(({year, number}) => !(year <= 2004 && number >= 30))","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"netRatingDomain = {\n const extent = d3.extent(draftPicks, player => player.net_rating);\n return extent;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"activePlayerNetRatingColor = d3.scaleSequential()\n .domain(netRatingDomain)\n .interpolator(d3.interpolateGreens)","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"nonActivePlayerColor = d3.scaleOrdinal()\n .domain(['< 25% games played', 'inactive'])\n .range(['red', 'white'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"html`

\n ${legend({color: activePlayerNetRatingColor, title: \"Net rating (min. 25% games played in '20-'21 season)\"})}\n

\n ${swatches({color: nonActivePlayerColor})}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"## Visualization 2","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"Our next dataset is on [Netflix Movies and TV Shows](https://www.kaggle.com/shivamb/netflix-shows). This line chart shows the number of movies and TV shows that were added to Netflix in each month since 2016.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"netflix = (await FileAttachment(\"netflix_titles.csv\").csv())\n .map(d => {\n d.date_added = d3.timeParse(\"%B %-d, %Y\")(d.date_added);\n d.release_year = +d.release_year\n \n // for movies, duration is length in minutes\n // for tv shows, duration is number of seasons\n d.duration = d.duration ? +d.duration.split(' ')[0] : undefined;\n\n d.cast = d.cast.split(', ').filter(d => d !== '');\n\n d.listed_in = d.listed_in.split(', ').filter(d => d !== '');\n\n return d;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"Inputs.table(netflix)","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"titlesAddedByMonth = d3.rollups(\n netflix.filter(d => d.date_added && d.date_added.getFullYear() >= 2016),\n g => g.length,\n d => d.type,\n d => d3.timeMonth(d.date_added)\n).map(([type, counts]) => ({\n type,\n counts: counts\n .map(([month, count]) => ({month, count}))\n .sort((a, b) => d3.ascending(a.month, b.month))\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"monthExtent = d3.extent(titlesAddedByMonth[0].counts, d => d.month)","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"maxCount = d3.max(\n titlesAddedByMonth,\n d => d3.max(d.counts, c => c.count)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"types = titlesAddedByMonth.map(d => d.type)","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"lineColor = d3.scaleOrdinal()\n .domain(types)\n .range(['Moccasin', 'blue'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"swatches({color: lineColor})","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"## Visualization 3\n\nUsing the same Netflix dataset, here we have a stacked bar chart that visualizes the actors that have appeared in 20 or more movies or TV shows on Netflix. The stacked bar chart shows the number of movies and the number of TV shows that each of the top actors has appeared in.","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"roles = netflix.map(d => d.cast.map(name => ({name, type: d.type}))).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"topActors = Array.from(\n d3.rollup(\n roles,\n g => g.length,\n d => d.name,\n d => d.type\n ),\n ([name, typeToCount]) => {\n const obj = Object.fromEntries(typeToCount);\n obj.name = name;\n obj.total = d3.sum(typeToCount.values());\n return obj;\n }\n)\n.sort((a, b) => d3.descending(a.total, b.total))\n.filter(d => d.total >= 20)","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"stacked = d3.stack()\n .keys(types)\n .value((d, key) => d[key] ?? 0)(topActors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"typeColor = d3.scaleOrdinal()\n .domain(types)\n .range(['DarkMagenta', 'Purple'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"swatches({color: typeColor})","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"------\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"import {legend, swatches} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"nbaPlayers = FileAttachment(\"nba_players_2020_2021.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}