32:T655,md `# Nba-Elo Hussein Fardous, Shawn Pachgade, Zifang Huang, and Harry Smith

Dataset by FiveThirtyEight (1946 - 2015) ---> (Dataset 1) https://github.com/fivethirtyeight/data/tree/master/nba-elo
Used Pandas to Process Dataset 1 (1980 - 2015) ---> (Dataset 2) https://gist.githubusercontent.com/shpach/c4af6237cb34a7b04d5c44fec17a3491/raw/a186c3274c243ac915b3aa032c12430b4e8cad06/avg_nba_elo.csv?fbclid=IwAR1IUF6msbxuimC9dlaM9EfdIEdNOluUEJQ8MQ-qKYbwa7B1BKNYblcOn-w
Added NBA Team Geographic Coordinates and Primary Colors ---> (Dataset 3) https://raw.githubusercontent.com/sharry29/DataViz/master/misc/nba_colors.csv
Joined Datasets 2 and 3 ---> (Dataset 4) https://raw.githubusercontent.com/sharry29/DataViz/master/misc/avg_elos_with_pos_color.csv
Added NBA Team Logos ---> (Dataset 5) https://raw.githubusercontent.com/sharry29/DataViz/master/misc/logos/ + "team_id" + ".png"
Added NBA Team Num of Wins and Loses, and W-L ratio ---> (Dataset 6) https://gist.githubusercontent.com/ZifangH/379d5ffc385d1bc79cf3ad2a5594498b/raw/b07052c497851af53b46d76567c207e6d19e0c6e/avg_elos_with_pos_color_win_lose.csv
Formatted Every Team's Average Elo Rating per Year as JSON Object for Line Chart (1980 - 2015) ---> (Dataset 6) https://gist.githubusercontent.com/shpach/ff6baa0f8c1a607ed8959f49d797e9b8/raw/af766ca4e2ca680a48c101ad1155706449300abd/team_data_series.json
Credits to Noah Veltman for Map Template https://beta.observablehq.com/@veltman/inner-glow
Credits to Jane Pong for Slider Template https://bl.ocks.org/officeofjane/47d2b0bfeecfcb41d2212d06d095c763

`33:T494,slider_button = html`

`34:T15ce,viewof chart = { const width = 960; // const height = 650; const height = 600; // var projection = d3.geoAlbers().scale(1250).translate([width / 2, height / 2.2]); var projection = d3.geoAlbers().scale(1250).translate([width / 2, height / 2.02]); const path = d3.geoPath(); const svg = d3.select(DOM.svg(width, height)); const features = us.states.features; const IMG_SIZE = 100; // Need Observable-Friendly SVG IDs const blur = DOM.uid(); features.forEach(d => (d.id = DOM.uid())); const defs = svg.append("defs"); defs .append("filter") .attr("id", blur.id) .append("feGaussianBlur") .attr("color-interpolation-filters", "sRGB") // Better Results in Safari .attr("stdDeviation", 5); defs .selectAll("clipPath") .data(us.states.features) .enter() .append("clipPath") .attr("id", d => d.id.id) .append("path") .attr("d", path); const states = svg .selectAll("g") .data(us.states.features) .enter() .append("g"); states .append("path") .attr("d", path) .style("fill", " #cce0ff") .style("fill-opacity", 0.35) .style("stroke", "none"); states .append("path") .attr("d", path) .attr("clip-path", d => d.id.toString()) .attr("filter", blur.toString()) .style("stroke", "#e6f0ff") .style("opacity", 0.8) .style("stroke-width", 10) .style("fill", "none"); svg .append("path") .datum(us.mesh) .attr("d", path) .style("fill", "none") .style("stroke", "#1a75ff") .style("stroke-width", 1) // svg // .attr("preserveAspectRatio", "xMidYMid meet") // .attr("viewBox", "0 0 100 100") // .classed("svg-container", true); var tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden"); var elo_tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") var ratio_tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") filtered_dataset.forEach(function(d) { var def = defs.append("svg:pattern") .attr("id", "team_logo" + d.team_id) .attr("width", 1) .attr("height", 1) .attr("viewBox", "0 0 100 100") def.append("svg:rect") .attr("width", 100) .attr("height", 100) .style("fill", "white"); def.append("svg:image") .attr("xlink:href", "https://raw.githubusercontent.com/sharry29/DataViz/master/misc/logos/" + d.team_id + ".png") .attr("width", IMG_SIZE) .attr("height", IMG_SIZE) .attr("x", 0) .attr("y", 0); }); // Draw team data circles here var teamCircles = svg .selectAll("circle") .data(filtered_dataset, function(d){ return d.team_id }); console.log(teamCircles); // Remove exit selection teamCircles.exit() // .transition() // .duration(7000) // .attr("r", 0) .remove(); // Update selection teamCircles .attr("r", d => d.radius); // Enter selection teamCircles .enter() .append("svg:circle") .style("stroke", function(d) { var found = graph_teams.indexOf(d.fran_id); if (found > -1) { return "red"; } else { return "black"; } }) .attr("cx", d => projection([d.long, d.lat])[0]) .attr("cy", d => projection([d.long, d.lat])[1]) .style("fill", d => "url(#team_logo" + d.team_id + ")") .attr("r", d => d.radius) .on("mouseover", function(d, i) { d3.select(this).attr("r", d => d.radius + 8) d3.selectAll("circle").attr("opacity", 0.2) d3.select(this).attr("opacity", 1) tooltip.style("visibility", "visible").text(d.fran_id); elo_tooltip.style("visibility", "visible").text("Elo: " + d.avg_elo); ratio_tooltip.style("visibility", "visible").text("W-L: "+ d.num_wins + "-" +d.num_lose); }) .on("mousemove", function(d){ elo_tooltip.style("top", (d3.event.pageY + 10) + "px").style("left", (d3.event.pageX + 10) + "px"); tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px"); ratio_tooltip.style("top", (d3.event.pageY + 30) + "px").style("left", (d3.event.pageX + 10) + "px"); }) .on("mouseout", function(d) { d3.select(this).attr("r", d => d.radius) d3.selectAll("circle").attr("opacity", 1) tooltip.style("visibility", "hidden"); elo_tooltip.style("visibility", "hidden"); ratio_tooltip.style("visibility", "hidden"); }) .on("click", function(d, i) { // Toggle teams var found = graph_teams.indexOf(d.fran_id); if (found > -1) { mutable graph_teams.splice(found, 1); mutable sum -= 1; d3.select(this).style("stroke", "black"); } else { mutable graph_teams.push(d.fran_id); mutable sum += 1; d3.select(this).style("stroke", "red"); } }); // svg.append("text") // .attr("x", 0.5 * width) // .attr("y", height - 20) // .attr("text-anchor", "middle") // .style("font-size", "26px") // .style('fill', 'darkOrange') // .style("font-family", "serif") // .text("Average Elo Rating of NBA Teams Over 1980 to 2015"); return svg.node(); }35:Tdc8,line_chart = { sum; const svg = d3.select(DOM.svg(lineChartWidth, lineChartHeight)); const IMG_SIZE = 30; let xAxis = d3.axisBottom(xScale).tickFormat(d3.format("d")); let yAxis = d3.axisLeft(yScale).tickFormat(d3.format("d")); // Draw axes svg.append("g") .attr("transform", "translate(0," + (lineChartHeight - 30) + ")") .call(xAxis); svg.append("g") .attr("transform", "translate(" + margin.left + "," + (0) + ")") .call(yAxis); // Axis labels svg.append("text") .attr("transform", "rotate(-90)") .attr("y", 20) .attr("x",0 - (lineChartHeight / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .style("font-size", "14px") .text("Elo Rating"); svg.append("text") .attr("transform", "translate(" + (lineChartWidth/2) + " ," + (lineChartHeight - 0) + ")") .style("text-anchor", "middle") .style("font-size", "14px") .text("Year"); if(sum === 0){ svg.append("text") .attr("transform", "translate(" + (lineChartWidth/2) + " ," + (lineChartHeight/2) + ")") .style("text-anchor", "middle") .style("font-size", "14px") .text("Click on the circles in the map to plot individual team Elos") .attr("font-family", "sans-serif") .attr("fill", "grey"); } else { let yearLine = svg .append("line") .attr("x1", xScale(year)) .attr("y1", lineChartHeight) .attr("x2", xScale(year)) .attr("y2", 20) .attr("stroke-width", 2) .attr("stroke", "grey"); svg.append("text") .attr("x", xScale(year)) .attr("y", 10) .text(year) .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("fill", "grey") .attr('text-anchor', "middle"); if(showAverage){ svg .append("path") .attr( 'stroke', "grey") .datum(d => lineData['Average'].series) .attr( 'fill', 'none' ) .attr( 'stroke-width', 3 ) .attr( 'd', teamLineChart) // 11. Calls the line generator .attr( 'stroke-dasharray', "7, 3"); // .attr( 'stroke-dashoffset', function () { return this.getTotalLength(); } ) // .attr("stroke-dashoffset", 0); } } // Show the individual line graphs var paths = svg.selectAll("path") .data(graph_teams, function(d) { return d }); paths .enter() .append("path") .attr( 'stroke', d => d3.rgb(lineData[d].color)) .datum(d => lineData[d].series) .attr( 'fill', 'none' ) .attr( 'stroke-width', 1 ) .attr( 'd', teamLineChart) // 11. Calls the line generator .attr( 'stroke-dasharray', function () { return `${ this.getTotalLength() } ${ this.getTotalLength() }`; } ) .attr( 'stroke-dashoffset', function () { return this.getTotalLength(); } ) .attr("stroke-dashoffset", 0); svg.selectAll("image") .data(graph_teams) // 10. Binds data to the line .enter() .append("image") .attr("xlink:href", d => "https://raw.githubusercontent.com/sharry29/DataViz/master/misc/logos/" + lineData[d].team_id + ".png") .attr("x", lineChartWidth - 35) .attr("y", d => yScale(lineData[d].series.slice(-1)[0][1]) - IMG_SIZE/2) .attr("width", IMG_SIZE) .attr("height", IMG_SIZE); return svg.node(); }36:Tc20,viewof year = { var margin = {top: 50, right: 50, bottom: 0, left: 50}, width = 960 - margin.left - margin.right, height = 110 - margin.top - margin.bottom; var formatDateIntoYear = d3.timeFormat("%Y"); var startDate = new Date("1980-01-01"), endDate = new Date("2015-02-01"); var moving = false; var currentValue = 0; var targetValue = width; var timer = 0; var playButton = d3.select("#play-button"); var svg = d3.select("#vis") .property("value", []) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); var x = d3.scaleTime() .domain([startDate, endDate]) .range([0, targetValue]) .clamp(true); var slider = svg.append("g") .attr("class", "slider") .attr("transform", "translate(" + margin.left + "," + height + ")"); slider.append("line") .attr("class", "track") .attr("x1", x.range()[0]) .attr("x2", x.range()[1]) .select(function() {return this.parentNode.appendChild(this.cloneNode(true));}) .attr("class", "track-inset") .select(function() {return this.parentNode.appendChild(this.cloneNode(true));}) .attr("class", "track-overlay") .call(d3.drag() .on("start.interrupt", function() {slider.interrupt();}) .on("start drag", function() { currentValue = d3.event.x; update(x.invert(currentValue)); }) ); slider.insert("g", ".track-overlay") .attr("class", "ticks") .attr("transform", "translate(0," + 18 + ")") .selectAll("text") .data(x.ticks(6)) .enter() .append("text") .attr("x", x) .attr("y", 10) .attr("text-anchor", "middle") .text(function(d) {return formatDateIntoYear(d);}); var handle = slider.insert("circle", ".track-overlay") .attr("class", "handle") .attr("r", 9); var label = slider.append("text") .attr("class", "label") .attr("text-anchor", "middle") .text(formatDateIntoYear(new Date("1980-02-01"))) .attr("transform", "translate(0," + (-25) + ")") playButton .on("click", function() { var button = d3.select(this); if (button.text() == "Pause") { moving = false; clearInterval(timer); button.text("Play"); } else { moving = true; timer = setInterval(step, 200); button.text("Pause"); } }); function step() { update(x.invert(currentValue)); currentValue = currentValue + (targetValue / 151); if (currentValue > targetValue) { moving = false; currentValue = 0; clearInterval(timer); playButton.text("Play"); } }; function update(h) { handle.attr("cx", x(h)); label .attr("x", x(h)) .text(formatDateIntoYear(h)); var prev = parseInt(formatDateIntoYear(x.invert(currentValue - (targetValue / 151)))); var curr = parseInt(formatDateIntoYear(h)); if (prev != curr) { svg.property("value", parseInt(formatDateIntoYear(h))).dispatch("input"); } }; svg.property("value", 1980).dispatch("input"); return svg.node(); };37:[] 31:{"title":"Nba-Elo","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"md `\n## The Rise and Fall of NBA Teams \n- Circle size corresponds to Elo score.\n- Elo score measures relative performance amongst teams.\n\n- For more information about Elo, go [here](https://fivethirtyeight.com/features/how-we-calculate-nba-elo-ratings/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1592,"value":"clear_all_btn = {\n const button = html``\n button.onclick = function(event) {\n mutable graph_teams = [];\n mutable sum = 0;\n }\n \n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1652,"value":"viewof showAverage = checkbox({label: ' Show League Average Elo', value: false})\n// html`

\n// \n// \n// Show Average Line\n// \n//

`\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1664,"value":"checkbox = ({label = '', value = false} = {}) => {\n let wrapper = html``\n let check = html``\n wrapper.append(check)\n wrapper.append(label || '')\n \n check.checked = value\n \n check.addEventListener('change', (e) => {\n wrapper.value = check.checked\n wrapper.dispatchEvent(new CustomEvent('input'))\n })\n \n // we need to have a starting value\n wrapper.value = check.checked\n \n return wrapper\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1614,"value":"disabled_listener = {\n if (sum == 0){\n d3.selectAll(\"#clear_all_btn\")\n .attr('disabled', 'disabled')\n }\n else{\n d3.selectAll(\"#clear_all_btn\")\n .attr('disabled', null)\n // .classed(\"foo bar\", 'btn btn-primary');//('class',btn-secondary\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1392,"value":"dataset = d3.csv(\"https://gist.githubusercontent.com/ZifangH/379d5ffc385d1bc79cf3ad2a5594498b/raw/b07052c497851af53b46d76567c207e6d19e0c6e/avg_elos_with_pos_color_win_lose.csv\",\n function(data) {\n return {\n year_id: parseInt(data.year_id),\n team_id: data.team_id,\n fran_id: data.fran_id,\n avg_elo: parseInt(data.elo_n),\n long: parseFloat(data.lon),\n lat: parseFloat(data.lat),\n color: data.color,\n num_wins: parseFloat(data.num_wins),\n num_lose: parseFloat(data.num_loses),\n win_loss_ratio: data.win_loss_ratio\n }\n }\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"copy = JSON.parse(JSON.stringify(dataset))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"teams = dataset.filter(x => x.year_id === 2005).map(d => d.team_id);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"function filt(teamID) {\n \n let data = dataset.filter(x => ((x.year_id >= 2005) && (x.team_id === teamID)));\n \n // Grab only the Elos so we can Scale the Radius of each Circle accordingly\n let elo_list = data.map(x => x.avg_elo);\n let radScale = d3.scaleLinear().domain([d3.min(elo_list), d3.max(elo_list)]).range([5, 40]);\n \n data = data.map(function(x) {\n x.radius = radScale(x.avg_elo);\n return x;\n });\n \n return data;\n \n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1552,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"year","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"filtered_dataset = {\n\n let data = copy.filter(x => x.year_id === parseInt(year));\n \n // Grab only the Elos so we can Scale the Radius of each Circle accordingly\n let elo_list = data.map(x => x.avg_elo);\n let radScale = d3.scaleLinear().domain(d3.extent(elo_list)).range([10, 40]);\n \n data = data.map(function(x) {\n x.radius = radScale(x.avg_elo);\n return x;\n });\n \n return data;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"topojson = require(\"topojson-client@3\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"us = {\n const us = await d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\");\n const states = topojson.feature(us, us.objects.states);\n const mesh = topojson.mesh(us, us.objects.states);\n const neighbors = topojson.neighbors(us.objects.states.geometries);\n states.features.forEach((d, i) => d.properties.color = \"#d2b48c\");\n return {states, mesh};\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1443,"value":"mutable sum = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"mutable graph_teams = [];","pinned":true,"hidden":false,"mode":"ojs"},{"id":1373,"value":"// Reference: https://observablehq.com/@d3/multi-line-chart\n\nxScale = d3.scaleLinear()\n .domain([1980, 2015])\n .range([margin.left, lineChartWidth - margin.right]) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1372,"value":"yScale = d3.scaleLinear()\n .domain(d3.extent(dataset, d => d.avg_elo)).nice()\n .range([lineChartHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"teamLineChart = d3.line()\n .x(d => xScale(d[0]))\n .y(d => yScale(d[1]))\n .curve(d3.curveMonotoneX) // apply smoothing to the line","pinned":false,"hidden":false,"mode":"ojs"},{"id":1370,"value":"lineChartWidth = 800//960","pinned":false,"hidden":false,"mode":"ojs"},{"id":1369,"value":"lineChartHeight = 300//650;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"margin = ({top: 30, right: 40, bottom: 30, left: 80})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"parseTime = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"lineData = \n// d3.json(\"https://gist.githubusercontent.com/shpach/3076f9e9add92922a3115b97fda7cb8f/raw/4c03dff3728ed588f0ee4e4870a33d1e1bf00cdb/nba_linechart_data.json\")\n// d3.json(\"https://gist.githubusercontent.com/shpach/ff6baa0f8c1a607ed8959f49d797e9b8/raw/af766ca4e2ca680a48c101ad1155706449300abd/team_data_series.json\")\nd3.json(\"https://gist.githubusercontent.com/shpach/d0aa27d1dfeec8200a1d556b7947aa3b/raw/e8f61915597864dc76ae3917ddbad57c21c2a21a/team_data_series.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"avgData = {\n var data = [];\n for( var key in lineData){\n lineData[key].series[0]\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}