32:T494,slider_button = html`

`33:T2009,chart = { const width = 960; const height = 600; 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"); // Map 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); // Tooltips 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"); filt_ds(1980).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); }); // Team Circles var teamCircles = svg.selectAll("circle") .data(filt_ds(1980), function(d) {return d.team_id}); // Remove Exit selection teamCircles.exit() .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.node().update = (y) => { // Tooltips filt_ds(y).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); }); // Team Circles var teamCircles = svg.selectAll("circle") .data(filt_ds(y), function(d) {return d.team_id}); // Remove Exit selection teamCircles.exit() .remove(); // Update selection teamCircles.transition() .duration(300) .ease(d3.easeLinear) .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"); } }); }; return svg.node(); };34:Td3f,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"); } } // 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(); };35:T117f,md ` We chose to visualize FiveThirtyEight's NBA Elo predictions as an extension of Hussein's and Shawn's previous work. The first idea that we explored involved recounting the history of the NBA through upsets, wherein we visualized each game where a heavily favored team was defeated.

These upsets would have been arranged in a grid, allowing the user to explore all of the upsets in a given season. Mousing over individual circles would have revealed information about the individual games and the corresponding team records.

Although we felt that the experience of exploring the NBA's past was an engaging aspect of this visualization, we believed that the possibilities for meaningful interactivity were somewhat limited. Seeking to create an experience of NBA history with greater user participation, we settled on this interactive map of NBA team Elo through time. The distribution of work was broadly divided as follows: * **Shawn**designed the individual team circles, implemented their interactive behavior, and created the accompanying line graph. * **Hussein** added the US map to the visualization and worked on projecting the team locations. Additionally, he implemented the smooth transitions in circle size. * **Zifang** solved our lingering projection issues and worked on the implementation of the tooltips. She also incorporated data about win-loss records into the dataset. * **Harry** aggregated team color, logo, and geographic information into the dataset. Additionally, he worked on improving the visibility of the visualization. Most of our design challenges related to the coherent display of the team locations on the US map. With many teams clustered close together, we had the issue of dominant teams obscuring their neighbors. This was a primary concern from our user studies, with all participants indicating that the circle overlap was a defect of the visualization. We were able to improve this issue by adding transparency to other circles when mousing over one of interest and by slightly adjusting the locations of the circles from their true positions. We believe that the legibility of the visualization is a more important feature than complete accuracy of team location, although we acknowledge that this might be a confusing tradeoff for users who are generally unfamiliar with the NBA teams. User studies also revealed that the concept of "Elo" was generally unfamiliar. Although we clarify this with a brief blurb, we feel that it would help to have an interactive explanation. Given another week, we would implement a widget that allows the user to explore the relationship between the Elos of two teams and the probabilities of either team winning. The following is a collection of datasets and resources we used in this project:

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"
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 Jane Pong for Slider Template https://bl.ocks.org/officeofjane/47d2b0bfeecfcb41d2212d06d095c763
Credits to Noah Veltman for Map Template https://beta.observablehq.com/@veltman/inner-glow
Credits to Mike Bostock for Multi-Line Chart Reference https://observablehq.com/@d3/multi-line-chart

`36:Tc5a,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, 300); 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":"md `# Nba-Elo\nHussein Fardous, Shawn Pachgade, Zifang Huang, and Harry Smith\n`","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- 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":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1416,"value":"clear_all_btn = {\n \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":1414,"value":"viewof showAverage = checkbox({label: 'Show Average Line', value: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"style = html``;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"mutable sum = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1387,"value":"mutable graph_teams = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1553,"value":"checkbox = ({label = '', value = false} = {}) => {\n \n let wrapper = html``;\n let check = html``;\n \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":1366,"value":"lineData = d3.json(\"https://gist.githubusercontent.com/shpach/d0aa27d1dfeec8200a1d556b7947aa3b/raw/e8f61915597864dc76ae3917ddbad57c21c2a21a/team_data_series.json\");","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);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"xScale = 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":1368,"value":"margin = ({top: 30, right: 40, bottom: 30, left: 80});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1370,"value":"lineChartWidth = 800;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1369,"value":"lineChartHeight = 300;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1426,"value":"{\n year;\n chart.update(year);\n return year;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"function filt_ds(y) {\n \n let data = JSON.parse(JSON.stringify(dataset)).filter(x => (x.year_id == parseInt(y)));\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":46,"value":"dataset = d3.csv(\"https://raw.githubusercontent.com/sharry29/DataViz/master/misc/avg_elos_with_pos_color.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":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":499,"value":"topojson = require(\"topojson-client@3\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":"$36","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"}