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: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(); };34:T494,slider_button = html`

`35:T1384,viewof chart = { const width = 960; const height = 650; var projection = d3.geoAlbers().scale(1250).translate([width / 2, height / 2.2]); 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", d => d.properties.color) .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", d => d.properties.color) .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", "#444") .style("stroke-width", 1); 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") var graph_teams = {}; // Keep track of teams to plot on line chart 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", "grey") .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) tooltip.style("visibility", "visible").text(d.fran_id); elo_tooltip.style("visibility", "visible").text(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) tooltip.style("visibility", "hidden"); elo_tooltip.style("visibility", "hidden"); ratio_tooltip.style("visibility", "hidden"); }) .on("click", function(d) { // Toggle teams if(d.fran_id in graph_teams){ delete graph_teams[d.fran_id]; d3.select(this).style("stroke", "yellow"); } else{ graph_teams[d.fran_id] = d.team_id; d3.select(this).style("stroke", "red"); } svg.property("value", graph_teams).dispatch("input"); }); 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(); }36:Ted6,line_chart = { 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")); svg.append("g") .attr("transform", "translate(0," + (lineChartHeight - 30) + ")") .call(xAxis); svg.append("g") .attr("transform", "translate(" + margin.left + "," + (0) + ")") .call(yAxis); 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"); 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"); /************************ NEW WAY --- UNCOMMENT FOR LINES ******************************/ var paths = svg.selectAll("path") .data(Object.keys(chart), function(d) { return d }); // paths.exit().remove(); console.log(paths); 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(Object.keys(chart)) // 10. Binds data to the line .enter() .append("image") .attr("xlink:href", d => "https://raw.githubusercontent.com/sharry29/DataViz/master/misc/logos/" + chart[d] + ".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); /********************* END UNCOMMENT HERE **********************************/ // OLD WAY // for(var elem in chart) { // svg.append("path") // .datum(lineData[elem].series) // 10. Binds data to the line // .attr( 'fill', 'none' ) // .attr( 'stroke', d3.rgb(lineData[elem].color)) // .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(); } ) // // .transition() // // .ease(d3.easeLinear) // // .duration( 8000 ) // .attr("stroke-dashoffset", 0); // svg.append("image") // .attr("xlink:href", "https://raw.githubusercontent.com/sharry29/DataViz/master/misc/logos/" + chart[elem] + ".png") // .attr("x", lineChartWidth - 35) // .attr("y", yScale(lineData[elem].series.slice(-1)[0][1]) - IMG_SIZE/2) // .attr("width", IMG_SIZE) // .attr("height", IMG_SIZE); // } return svg.node(); }37:[] 31:{"title":"Nba-Elo","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md `### Require D3 Library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md `### Load Dataset 4`","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":179,"value":"md `### Average Elo Rating of NBA Teams Over Time`","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":1362,"value":"/*teams.forEach(function(r, s) {\n filt(r).forEach(function(d, i) {\n teamCircles.transition().duration(1000).delay(i * 1000)\n .attr(\"r\", d.radius);\n })\n });*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"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([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};","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":998,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1375,"value":"Object.keys(chart)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"$36","pinned":false,"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\")\nd3.json(\"https://gist.githubusercontent.com/shpach/ff6baa0f8c1a607ed8959f49d797e9b8/raw/af766ca4e2ca680a48c101ad1155706449300abd/team_data_series.json\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}