34:["$","title",null,{"children":"College Football Preseason vs Final Rankings | Sam Bryfczynski | Observable"}] 3c:T9e9,{ const height = 500; const svg = d3.select(DOM.svg(width, height)); const margin = { left: 60, top: 20, right: 20, bottom: 20 }; var rankings = d3.range(1,26).map(r=>''+r); rankings.push('Unranked'); var xDomain = _(d3.range(startYear, 2018)) .flatMap(y => { return [ ''+y+'Preseason', ''+y+'Final' ]; }) .value(); var yScale = d3.scalePoint() .domain(rankings) .range([margin.top, height-margin.bottom]); var xScale = d3.scalePoint() .domain(xDomain) .range([margin.left, width-margin.right]); var xAxisScale = d3.scalePoint() .domain(d3.range(startYear, 2018)) .range([margin.left, width-margin.right]) .padding(0.25); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale).tickSize(-width)) .call(g => g.select(".domain").remove()) let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xAxisScale)) .call(g => g.select(".domain").remove()) svg.append("g") .attr('class', 'axis--y') .call(yAxis); svg.append("g") .attr('class', 'axis--x') .call(xAxis); const g = svg.append('g') .attr('class', 'rankings'); g.selectAll('line') .data(pairs) .enter() .append('line') .style('stroke-width', d => { if(highlightTeam === d.team) { return 5; } }) .style('stroke-opacity', d=> { if(highlightTeam !== '-') { if(highlightTeam !== d.team) { return 0.3; } return 1; } return 0.5; }) .style('stroke', d=> { if(highlightTeam !== '-' && highlightTeam !== d.team) { return '#000'; } var final = d.final === 'Unranked' ? 26 : +d.final; var preseason = d.preseason === 'Unranked' ? 26 : +d.preseason; var delta = final-preseason; // return d3.interpolateRdBu((-delta + 25) / 50); // return d3.interpolateRdYlGn((-delta + 25) / 50); if (delta < 0) { return d3.interpolateRdYlGn(1); } else if( delta > 0) { return d3.interpolateRdYlGn(0); } else { return '#000'; } }) .attr('x1', d => xScale('' + d.year + 'Preseason')) .attr('y1', d => yScale(d.preseason)) .attr('x2', d => xScale('' + d.year + 'Final')) .attr('y2', d => yScale(d.final)) .append('title') .text(d=>d.team); return svg.node(); }3d:Ta48,viewof selection = { const data = avgTeamRankingChange; const width = 400; const height = 400; const margin = {top: 20, right: 30, bottom: 30, left: 40}; var maxPositiveSeasons = _.max(_.map(data, 'positiveSeasons')); var maxNegativeSeasons = _.max(_.map(data, 'negativeSeasons')); var max = Math.max(maxPositiveSeasons, maxNegativeSeasons); const x = d3.scaleLinear() .domain([0,max]) .range([margin.left, width - margin.right]) const y = d3.scaleLinear() .domain([0,max]) .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", width - margin.right) .attr("y", -4) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text('Positive Seasons')) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr('x', 5) .attr("y", 5) .attr("dy", ".71em") .attr("transform", "rotate(-90)") .attr("text-anchor", "end") .attr("font-weight", "bold") .text('Negative Seasons')) const svg = d3.select(DOM.svg(width, height)) .property("value", []); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append('line') .style('stroke', '#ccc') .attr('x1',x(0)) .attr('y1',y(0)) .attr('x2',x(max)) .attr('y2',y(max)); const dot = svg.append("g") .selectAll("g") .data(data) .enter().append("circle") .attr("transform", d => `translate(${x(d.positiveSeasons)},${y(d.negativeSeasons)})`) .attr("r", 3) .style('stroke', 'black') .attr("fill", d => { var color = d3.interpolateRdYlGn(d.positiveSeasons/(d.positiveSeasons+d.negativeSeasons)); console.log(d.positiveSeasons); return color; }); svg.append("g") .call(d3.brush() .extent([[0, 0], [width, height]]) .on("start brush end", brushed)); function brushed() { let value = []; if (d3.event.selection) { const [[x0, y0], [x1, y1]] = d3.event.selection; value = data.filter(d => x0 <= x(d.positiveSeasons) && x(d.positiveSeasons) < x1 && y0 <= y(d.negativeSeasons) && y(d.negativeSeasons) < y1); } svg.property("value", value).dispatch("input"); } return svg.node(); }3e:Tecf,viewof matrix = { const data = rankMatrix; const height = 500; const margin = {top: 20, right: width - height, bottom: 50, left: 60}; const max = _.maxBy(data, 'count').count; const x = d3.scalePoint() .padding(0.5) .domain(rankings) .range([margin.left, width - margin.right]) const y = d3.scalePoint() .padding(0.5) .domain(rankings) .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", 270) .attr("y", 30) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "middle") .text('Final Rank')) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr('x', -220) .attr("y", 5) .attr("dy", "-35px") .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .attr("font-weight", "bold") .text('Preseason Rank')) const svg = d3.select(DOM.svg(width, height)) .property("value", []); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append('line') .style('stroke', '#ccc') .attr('x1',x('1')) .attr('y1',y('1')) .attr('x2',x('Unranked')) .attr('y2',y('Unranked')); const color = function (v) { if(v === 0) { return '#ffffff'; } return d3.interpolateBlues(v); } const square = svg.append("g") .selectAll('rect') .data(data) .enter() .append("rect") .attr("x", d => x(d.finalRank) - x.step()/2) .attr("y", d => y(d.preseasonRank)- x.step()/2) .attr("width", d=> x.step()) .attr("height", d=> y.step()) .style('fill', d => color(d.count/max)); const dot = svg.append("g") .selectAll('circle') .data(data) .enter() .append("circle") .attr("cx", d => x(d.finalRank)) .attr("cy", d => y(d.preseasonRank)) .attr("r", d=> Math.sqrt(d.count)) .style('fill', 'none')//d => color(d.count/max)) .style('stroke', 'black'); // svg.append("g") // .call(d3.brush() // .extent([[0, 0], [width, height]]) // .on("start brush end", brushed)); // function brushed() { // let value = []; // if (d3.event.selection) { // const [[x0, y0], [x1, y1]] = d3.event.selection; // value = data.filter(d => x0 <= x(d.positiveSeasons) && x(d.positiveSeasons) < x1 && y0 <= y(d.negativeSeasons) && y(d.negativeSeasons) < y1); // } // svg.property("value", value).dispatch("input"); // } var legendG = svg.append('g') .attr('transform', 'translate('+(height + 10)+', 20)'); var median = d3.median(rankMatrix, d => d.count); var legendItems = legendG .selectAll('g') .data([0, 1, 4, max]) .enter() .append('g') .attr('transform', (d, i) => `translate(0, ${i * 20})`); var cellWidth = x.step(); var cellHeight = y.step(); legendItems.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', cellWidth) .attr('height', cellHeight) .style('stroke', 'black') .style('fill', d => color(d/max)) legendItems.append('circle') .attr('cx', cellWidth/2) .attr('cy', cellHeight/2) .attr('r', d => Math.sqrt(d)) .style('fill', 'none') .style('stroke', 'black'); legendItems.append('text') .attr('x', 40) .attr('y', 13) .attr('text-anchor', 'end') .style('font-size', '12px') .text(d=> d); return svg.node(); }3f:[] 38:{"id":"52a7d6def2f8dc78","slug":"college-football-preseason-vs-final-rankings","title":"College Football Preseason vs Final Rankings","thumbnail":"84d0a0a69d4c023c2761edae0efd73fdb0fc7fa12fd90f6236839be7ce3eb87c","access_level":"public","create_time":"$D2018-05-20T19:46:25.214Z","update_time":"$D2018-06-24T17:17:40.022Z","view_time":null,"first_public_time":"$D2018-06-24T17:17:48.389Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"62ceffc97c2fe102","login":"sbryfcz","name":"Sam Bryfczynski","avatar_url":"https://avatars-next.observableusercontent.com/cfdfeaa2b413b133fe6d1d98c18c191a010422b6070a5569854fdd1012a5fb4a","tier":"starter_2024","bio":"Lover of all things analytical and visual.","followed_by_you":false,"follows_you":false},"version":524,"publish_version":524,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b4339c444028318","login":"sbryfcz","name":"Sam Bryfczynski","avatar_url":"https://avatars-next.observableusercontent.com/cfdfeaa2b413b133fe6d1d98c18c191a010422b6070a5569854fdd1012a5fb4a","tier":null,"bio":"Lover of all things analytical and visual.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3b4339c444028318","login":"sbryfcz","name":"Sam Bryfczynski","avatar_url":"https://avatars-next.observableusercontent.com/cfdfeaa2b413b133fe6d1d98c18c191a010422b6070a5569854fdd1012a5fb4a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"College Football Preseason vs Final Rankings","cells":[{"id":0,"value":"md`# College Football Preseason vs Final Rankings\n\nThis plot shows the preseason vs final college football rankings (according to the AP Poll) for each season. Each line respresents a team over the course of a season. The first (left-most) point represents the team's preseason ranking. The rightmost point represents the final season ranking. For readability, teams that finished worse than they started are colored red. Teams which finished better are colored green.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viewof startYear = slider3({message: 'Start Year:', min: 1970, max: 2017, start: 2000, step: 1, int: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"viewof highlightTeam= html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"{\n var team = _.find(avgTeamRankingChange, {team: highlightTeam});\n if(highlightTeam === '-') {\n return md``;\n }\n \n var positiveSeasons = team ? team.positiveSeasons : '0';\n var negativeSeasons = team ? team.negativeSeasons : '0';\n var averageRankingChange = team ? rankChangeFormatter(team.averageRankingChange) : '-';\n \n return md `\n |Selected Team|Positive Seasons|Negative Seasons|Avg. Rank Change|\n |--|-:|-:|-:|\n |${highlightTeam}|${positiveSeasons}|${negativeSeasons}|${averageRankingChange}|\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`## Grid View`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`\n## Teams Positive Gain Seasons vs Negative Loss Seasons\nThe next scatterplot shows the number of seasons a team improved their ranking (preseason to final) vs the number of seasons they decreased their ranking. \n\nYou can drag over the dots to show what the dots represent.\n\nIt appears that Clemson (which is the rightmost team) has had the best set of seasons (in the past 20ish years). Meanwhile, Florida State (which is the top most team) seems to be failing to meet preseason expectations. Interestingly, over the last 15 years, Utah has had 7 seasons with positive ranking movement and none with negative ranking movement. This appears to be the best record for teams with no negative seasons.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"{\n if(selection.length == 0) {\n return md``;\n }\n return md `\n ### Selected Team(s)\n |Team|Positive Gain Seasons|Negative Loss Seasons|Avg. Rank Change|\n |-|-:|-:|-:|\n ${\n _.map(selection.slice(0, 20), d => '|' + d.team + '|'+ d.positiveSeasons +'|' + d.negativeSeasons+'|' + rankChangeFormatter(d.averageRankingChange) +'|\\n')\n }\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"md`\n## Ranking Change Matrix\nHere is a plot of the number of teams (since ${startYear}) that have started and ended the season at various rankings. In general, the plot looks to show that there is a huge standard deviation between where a preseason ranking places a team and where they finish the season.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"allTeamData = _(data)\n .groupBy('team')\n .mapValues(v=> {\n return {\n team: v[0].team,\n conference: v[0].conference,\n rankings: _.map(v, d => {\n return {\n year: d.year,\n week: d.week,\n rank: d.rank\n }\n })\n };\n })\n .value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"teamData = _(allTeamData)\n .mapValues(v=> {\n return {\n team: v.team,\n conference: v.conference,\n rankings: _.map(v.rankings, d => {\n return {\n year: d.year,\n week: d.week,\n rank: d.rank\n }\n })\n .filter(d=>d.year>=startYear)\n };\n })\n .value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"teams = _.keys(allTeamData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"pairs = _(teamData)\n .values()\n .flatMap(v=> {\n return _(v.rankings)\n .groupBy('year')\n .values()\n .map(g => {\n const weeks = _.keyBy(g, 'week');\n \n return {\n team: v.team,\n year: g[0].year,\n preseason: weeks['Preseason'] ? '' + weeks['Preseason'].rank : 'Unranked',\n final: weeks['Final'] ? '' + weeks['Final'].rank : 'Unranked'\n }\n })\n .value();\n })\n .value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"avgTeamRankingChange = _(pairs)\n .map(pair => {\n var preseason = pair.preseason === 'Unranked' ? 26 : +pair.preseason;\n var final = pair.final === 'Unranked' ? 26 : +pair.final;\n \n return {\n team: pair.team,\n rankingDelta: preseason-final\n };\n })\n .groupBy('team')\n .mapValues(teamGroup => {\n return {\n team: teamGroup[0].team,\n averageRankingChange: _.mean(_.map(teamGroup, 'rankingDelta')),\n seasonCount: teamGroup.length,\n positiveSeasons: _(teamGroup).filter(v=>v.rankingDelta>0).value().length,\n negativeSeasons: _(teamGroup).filter(v=>v.rankingDelta<0).value().length,\n }\n })\n .values()\n .sortBy('averageRankingChange')\n .value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"rankings = {\n var rankings = d3.range(1,26).map(r=>''+r);\n rankings.push('Unranked');\n return rankings;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"rankMatrix = {\n var matrix = [];\n \n var rankingIndicies = _(rankings)\n .keyBy(r=>''+r)\n .mapValues((r, i) => r=== 'Unranked' ? rankings.length : +i)\n .value();\n \n _.each(rankings, preseasonRank => {\n _.each(rankings, finalRank => {\n matrix.push({\n preseasonRank: preseasonRank,\n finalRank: finalRank,\n count: _.filter(pairs, {preseason:preseasonRank, final: finalRank}).length\n })\n });\n });\n \n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = (await fetch(\"https://gist.githubusercontent.com/sbryfcz/63f3f6bba23a90e8c635feeffb4c949f/raw/302e7828f915d16df12d42c02c2a75b44483ede9/cfb-rankings.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"_ = require('lodash@4.17.10')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"rankChangeFormatter = d3.format('0.2f')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"function slider3({\n message = 'Set your value', \n min = 0, max = 1, start = 0.5, step = 0.1,\n precision = 3, int = false,\n}){\n \n min = min/step;\n max = max/step;\n start = start/step;\n \n const div = html`\n\t${message}\n \n ${start*step}\n `;\n const range = div.querySelector(\"[type=range]\");\n const value_disp = div.querySelector('span');\n div.value = value_disp.innerHTML = start*step;\n\n \n range.addEventListener(\"input\", () => {\n const newValue = range.valueAsNumber*step; \n div.value = newValue;\n value_disp.innerHTML = int ? Math.round(newValue) : newValue.toPrecision(precision); \n });\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 33:null