2a:null 2b:["$","title",null,{"children":"Clarity Exercise | atmajaraman | Observable"}] 30: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/).31:Td36,{ // dimensions and set up const margin = {top: 15, right: 0, bottom: 40, left: 80}; const maxWidth = width; const maxHeight =650; 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.2); const y = d3.scaleBand() .domain(draftYears) .range([visHeight, 0]) // space between rows .padding(0.2); // 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) g.append('text') .attr('font-size', '13px') .attr('dominant-baseline', 'hanging') .attr('x', visWidth / 2 - 80) .attr('y', -margin.top) .text('NBA Draft picks over last 18 years'); return svg.node(); }32:Ta63,{ // set up const margin = {top: 30, right: 20, bottom: 50, left: 50}; const visWidth = 800 - 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).nice() .range([0, visWidth]); const y = d3.scaleLinear() .domain([0, maxCount]).nice() .range([visHeight, 0]); // draw axes and grids // axes const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); // x-axis and vertical 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', 'lightgray') .attr('stroke-width', 1) ) // axis label .append('text') .attr('x', visWidth / 2) .attr('y', 30) .attr('fill', 'black') .attr('text-anchor', 'center') .text('Month'); // 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', 'lightgray') .attr('stroke-width', 1) ) .append('text') .attr('x', -150) .attr('y', visHeight / 2 -290) .attr("transform", "rotate(-90)") .attr('fill', 'black') .attr('dominant-baseline', 'center') .attr('text-anchor', 'end') .text('Count of movies and Tv shows'); // line generator const line = d3.line() .x(d => x(d.month)) .y(d => y(d.count)); // 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); g.append('text') .attr('font-size', '13px') .attr('dominant-baseline', 'hanging') .attr('x', visWidth / 2 - 120) .attr('y', -margin.top) .text('Number of Netflix Titles added by month'); return svg.node(); }33:T7c6,{ // set up const margin = {top: 20, right: 10, bottom: 30, left: 130}; const visWidth = 1000 - 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.scaleLinear() .domain([0, d3.max(topActors, d => d.total)]).nice() .range([0, visWidth]); const y = d3.scaleBand() .domain(topActors.map(d => d.name)) .range([0, visHeight]) .padding(0.3); // 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) .append('text') .attr('x', visWidth / 2) .attr('y', 30) .attr('fill', 'black') .attr('text-anchor', 'center') .text('Count of movies and Tv shows'); // y-axis g.append('g') .call(yAxis) .append('text') .attr('x', -170) .attr('y', visHeight / 2 -390) .attr("transform", "rotate(-90)") .attr('fill', 'black') .attr('dominant-baseline', 'center') .attr('text-anchor', 'end') .text('Name of Actors'); g.append('text') .attr('font-size', '13px') .attr('dominant-baseline', 'hanging') .attr('x', visWidth / 2 - 120) .attr('y', -margin.top) .text('Number of movies and Tv shows by actors'); return svg.node(); }34:[{"id":"6a6c676e56c99197c0022b64aa21401d335d01cfeb53556007d82bce94be085a7e89124c4a579429ea62ff60b19edf536a5a69a57973a798cfc4aee84842e710","href":"https://static.observableusercontent.com/files/6a6c676e56c99197c0022b64aa21401d335d01cfeb53556007d82bce94be085a7e89124c4a579429ea62ff60b19edf536a5a69a57973a798cfc4aee84842e710","name":"netflix_titles.csv","type":"text/csv","lastModified":1636173872721.68,"size":3399671}] 2e:{"id":"448bacb1735d31f6","slug":"clarity-exercise","title":"Clarity Exercise","thumbnail":"47c7aa0ec6735e2897e8247de5070a8fb3061eb455e40ee23923135e134831c6","access_level":"public","create_time":"$D2021-11-06T04:44:32.721Z","update_time":"$D2021-11-07T07:10:39.047Z","view_time":null,"first_public_time":"$D2022-08-18T01:24:32.585Z","fork":{"id":"035008c7e64e538d","slug":"clarity-exercise","title":"Clarity - Exercise","owner":{"id":"c5bcb913b5b2fffd","login":"nyuvis","name":"EBVL"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3789f5410fc97133","login":"atmajaraman","name":"","avatar_url":null,"tier":"starter_2024"},"version":634,"publish_version":634,"role":null,"authored":false,"authors":[{"type":"individual","id":"af7f2a2f121e1241","login":"atmajaraman","name":"","avatar_url":null,"tier":null}],"members":[{"type":"individual","id":"af7f2a2f121e1241","login":"atmajaraman","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"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. When you are finished, **do not** publically publish your notebook. If you are using the \"Classic\" notebook interface, then go to the menu at the top with the three dots and click \"Enable link sharing.\" If you are using the newer notebook interface, then click \"Publish\" and set the visibility to unlisted. You can then submit the link on Brightspace.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":69,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":106,"value":"// all draft years in our dataset\ndraftYears = d3.range(draftYearExtent[0], draftYearExtent[1] + 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"// first and last draft numbers\ndraftNumberExtent = d3.extent(firstRoundsPicks, player => player.draft_number)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"// all draft numbers\ndraftNumbers = d3.range(draftNumberExtent[0], draftNumberExtent[1] + 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":119,"value":"netRatingDomain = {\n const extent = d3.extent(draftPicks, player => player.net_rating);\n return extent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"activePlayerNetRatingColor = d3.scaleSequential()\n .domain(netRatingDomain)\n .interpolator(d3.interpolatePiYG)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"nonActivePlayerColor = d3.scaleOrdinal()\n .domain(['< 25% games played', 'inactive'])\n .range([\"#fff3af\", 'lightgray'])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":128,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":613,"value":"Changes made to the visualization are\n1. A diverging color scale was added to show positive and negative ratings effectively\n2. less than 25% of games played cells were changed from red to a lighter yellow so that it does not draw readers attention first\n3. The inactive cells were changed to light gray from white to make them more visible\n4. Title was added for the viz\n5. The cell size was increased to make the cell squares \n6. Padding in between columns was increased.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":86,"value":"## Visualization 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":58,"value":"Inputs.table(netflix)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":228,"value":"monthExtent = d3.extent(titlesAddedByMonth[0].counts, d => d.month)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"maxCount = d3.max(\n titlesAddedByMonth,\n d => d3.max(d.counts, c => c.count)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"types = titlesAddedByMonth.map(d => d.type)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"lineColor = d3.scaleOrdinal()\n .domain(types)\n .range(['green', 'steelblue'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"swatches({color: lineColor})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":619,"value":"Changes made to the visualization are\n\n1. The color of the lines were changed to make them equally visible on the plot\n2. The grid lines were changed to light gray from black to make the line plot more perceivable\n3. The grid lines were plotted first and then the line plot so that the lines are laid on top of the grid lines.\n4. nice() was included to x and Y scale\n5. Title and x, y-axis labels were added\n6. Chart width was increased","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":309,"value":"roles = netflix.map(d => d.cast.map(name => ({name, type: d.type}))).flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":343,"value":"stacked = d3.stack()\n .keys(types)\n .value((d, key) => d[key] ?? 0)(topActors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"typeColor = d3.scaleOrdinal()\n .domain(types)\n .range(['steelblue', 'pink'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":354,"value":"swatches({color: typeColor})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":625,"value":"Changes made to the visualization are\n\n1. The colors of the stacked bar were changed to make them more perceivable\n2. The bars are no longer sorted alphabetically but sorted as per count\n3. The left margin was increased\n4. nice() was included to X scale\n5. Title and x, y-axis labels were added \n6. padding was added to bars to make them more differentiable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":75,"value":"------\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":79,"value":"import {nbaPlayers} from '@nyuvis/review'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"import {legend, swatches} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"