45:["$","title",null,{"children":"Sports Team Analysis by City | Sam Bryfczynski | Observable"}] 4d:Tbdd,{ var w = Math.min(width, 680); const svg = d3.select(DOM.svg(w, w)).attr('class', 'matrix'); var size = (w-40)/4, padding = 20; const g = svg.append("g") .attr("transform", "translate(" + padding + "," + padding / 2 + ")"); var x = d3.scaleLinear() .domain([0,1]) .range([padding / 2, size - padding / 2]); var y = d3.scaleLinear() .domain([0,1]) .range([size - padding / 2, padding / 2]); var xAxis = d3.axisBottom() .scale(x) .ticks(6); var yAxis = d3.axisLeft() .scale(y) .ticks(6); var domainByTrait = {}, traits = ['NBA', 'NHL', 'NFL', 'MLB'], n = traits.length; traits.forEach(function(trait) { domainByTrait[trait] = d3.extent(data, function(d) { return d[trait]; }); }); xAxis.tickSize(size * n); yAxis.tickSize(-size * n); g.selectAll(".x.axis") .data(traits) .enter().append("g") .attr("class", "x axis") .attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; }) .each(function(d) { d3.select(this).call(xAxis); }); g.selectAll(".y.axis") .data(traits) .enter().append("g") .attr("class", "y axis") .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; }) .each(function(d) { d3.select(this).call(yAxis); }); function cross(a, b) { var c = [], n = a.length, m = b.length, i, j; for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j}); return c; } g.selectAll(".y.axis") .data(traits) .enter().append("g") .attr("class", "y axis") .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; }) .each(function(d) { y.domain(domainByTrait[d]); d3.select(this).call(yAxis); }); var cell = g.selectAll(".cell") .data(cross(traits, traits)) .enter().append("g") .attr("class", "cell") .attr("transform", function(d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; }) .each(plot); // Titles for the diagonal. cell.filter(function(d) { return d.i === d.j; }).append("text") .attr("x", padding) .attr("y", padding) .attr("dy", ".71em") .text(function(d) { return d.x; }); function plot(p) { var cell = d3.select(this); cell.append("rect") .attr("class", "frame") .attr("x", padding / 2) .attr("y", padding / 2) .attr("width", size - padding) .attr("height", size - padding); // get the data for the 2 traits var cellData = getData(p.x, p.y); var format = d3.format('0.2p'); cell.selectAll("circle") .data(cellData) .enter().append("circle") .attr("cx", function(d) { return x(d.x); }) .attr("cy", function(d) { return y(d.y); }) .attr("r", 3) .append('title') .text(d=>'' + d.year + ' [' + d.teamX + ': ' + format(d.x) +', ' +d.teamY + ': ' + format(d.y) + ']'); } return svg.node(); }4e:T1a31,viewof parallel = { var w = Math.min(width, 680); let height = 300; const svg = d3.select(DOM.svg(w, height)).attr('class', 'parallel'); let innerWidth = w - 40; let innerHeight = height - 40; let g = svg.append('g').attr('transform','translate(30,20)'); let chartData = { axes: [ {key: 'NBA'}, {key: 'NHL'}, {key: 'NFL'}, {key: 'MLB'} ], values: getParallelData() }; var axisMap = d3.map(chartData.axes, function (a) { return a.key; }); var x = d3.scalePoint().range([0, innerWidth], 1), y = {}, dragging = {}; var line = d3.line(), background; // Extract the list of dimensions and create a scale for each. var dimensions = chartData.axes.map(function (axis) { // detect if number of string if (axis.isOrdinal) { y[axis.key] = d3.scalePoint() .domain(chartData.values.map(function (v) { return v.properties[axis.key]; })) .range([innerHeight, 0]); } else { y[axis.key] = d3.scaleLinear() .domain(d3.extent(chartData.values, function (p) { return +p.properties[axis.key]; })) .range([innerHeight, 0]); } return axis.key; }); x.domain(dimensions); background = g.append('g').attr("class", "background"); background.selectAll("path") .data(chartData.values) .enter().append("path") .attr("d", function (d) { return path(d.properties); }); // Add blue foreground lines for focus. let foreground = g.append("g") .attr("class", "foreground") .selectAll("path") .data(chartData.values) .enter() .append("path") .attr('class', function (d) { return d.class == null ? 'default' : d.class; }) .attr("d", function (d) { return path(d.properties); }) .on('mouseover', function (d) { }) .on('mouseout', function (d) { }); // Add a group element for each dimension. var dimensionG = g.selectAll(".dimension") .data(dimensions) .enter() .append("g") .attr("class", function (d) { var axis = axisMap.get(d); return axis.class == null ? 'dimension' : 'dimension ' + axis.class; }) .attr("transform", function (d) { return "translate(" + x(d) + ")"; }); // Add an axis and title. dimensionG.append("g") .attr("class", "axis") .each(function (d, i) { var axis = d3.axisLeft() .scale(y[d]); if (!chartData.axes[i].isOrdinal) { axis.tickFormat(buildFormatter(chartData.axes[i].format)) .ticks(chartData.axes[i].ticks ? chartData.axes[i].ticks : 10); } console.log(y[d].domain()); console.log(y[d].range()); d3.select(this).call(axis); }) .append("text") .attr("text-anchor", "middle") .attr("y", -9) .text(function (d, i) { return chartData.axes[i].title == null ? d : chartData.axes[i].title; }); // Add and store a brush for each axis. var brushes = dimensionG.append("g") .attr("class", "brush") .each(function (d) { y[d].brush = d3.brushY() .extent([[-10, 0], [10, innerHeight]]) .on("start", brushstart) .on("brush", brush); d3.select(this).call(y[d].brush); }); function position(d) { var v = dragging[d]; return v == null ? x(d) : v; } function transition(g) { return g.transition().duration(500); } // Returns the path for a given data point. function path(d) { return line(dimensions.map(function (p) { return [position(p), y[p](d[p])]; })); } // When brushing, don’t trigger axis dragging. function brushstart() { d3.event.sourceEvent.stopPropagation(); brush(); } // When brushing, don’t trigger axis dragging. function brushend() { d3.event.sourceEvent.stopPropagation(); } // Handles a brush event, toggling the display of foreground lines. function brush() { var actives = []; brushes .filter(function (d, i) { var extent = d3.brushSelection(this); if (!extent || extent[0] === extent[1]) { return false; } return extent; }) .each(function (d) { var brushSelection = d3.brushSelection(this); // check if ordinal var axis = axisMap.get(d); var invertedBrushExtent; if (!axis.isOrdinal) { invertedBrushExtent = [ y[d].invert(brushSelection[1]), y[d].invert(brushSelection[0]), ]; } else { invertedBrushExtent = {}; y[d] .domain() .forEach(function (v) { var transformed = y[d](v); if (brushSelection[0] <= transformed && transformed <= brushSelection[1]) { invertedBrushExtent[v] = true; } }); } actives.push({ dimension: d, extent: invertedBrushExtent, isOrdinal: axis.isOrdinal }); }); let activeData = []; if (actives.length === 0) { foreground.style("display", null); } else { foreground.style("display", function (d) { var displayState = actives.every(function (p) { if (!p.isOrdinal) { return p.extent[0] <= d.properties[p.dimension] && d.properties[p.dimension] <= p.extent[1]; } else { return p.extent[d.properties[p.dimension]]; } }) ? null : "none"; if(displayState === null) { activeData.push(d); } return displayState; }); } svg.property("value", activeData).dispatch("input"); } svg.property("value", []).dispatch("input"); return svg.node(); }4f:T500,getData = function (sportA, sportB) { return _(data) .values() .flatMap(cityGroup => _.values(cityGroup)) .flatMap(yearData => { var sportAData = _.filter(yearData, {sport: sportA}); var sportBData = _.filter(yearData, {sport: sportB}); let pairWiseData = []; // pairwise data for(let i=0;i= 1970 && sportAData[i].year <= 1974)) || (sportBData[j].sport==='NHL' && (sportBData[j].year >= 1970 && sportBData[j].year <= 1974))) { continue; } var winPercentageA = sportAData[i].winPercentage; var winPercentageB = sportBData[j].winPercentage; pairWiseData.push({ x: winPercentageA, y: winPercentageB, teamX: sportAData[i].team, teamY: sportBData[j].team, year: sportAData[i].year }); } } return pairWiseData; }) .filter(record => { return !_.isUndefined(record); }) .value(); }50:T70b,getParallelData = function () { return _(data) .values() .flatMap(cityGroup => _.values(cityGroup)) .flatMap(yearData => { var nhlData = _.filter(yearData, {sport: 'NHL'}); var nbaData = _.filter(yearData, {sport: 'NBA'}); var nflData = _.filter(yearData, {sport: 'NFL'}); var mlbData = _.filter(yearData, {sport: 'MLB'}); if(nhlData.length == 0 || nbaData.length == 0 || nflData.length == 0 || mlbData.length == 0){ return undefined; } // nested hell to enumerate all combinatins of teams for sports (ex. LA has multiple of many sports) var combinations = []; _.each(nhlData, nhlTeam => { if(nhlTeam.year >= 1970 && nhlTeam.year <= 1974) { return; } _.each(nbaData, nbaTeam => { _.each(nflData, nflTeam => { _.each(mlbData, mlbTeam => { combinations.push({ id: '' + nhlTeam.year + ' ' + nhlTeam.city + ' [NHL: ' + nhlTeam.team + ', NBA: ' + nbaTeam.team + ', NFL: ' + nflTeam.team + ', MLB: ' + mlbTeam.team +']', properties: { NHL: nhlTeam.winPercentage, NBA: nbaTeam.winPercentage, NFL: nflTeam.winPercentage, MLB: mlbTeam.winPercentage, year: nhlTeam.year, city: nhlTeam.city, NHLTeam: nhlTeam.team, NBATeam: nbaTeam.team, NFLTeam: nflTeam.team, MLBTeam: mlbTeam.team } }) }); }); }); }); return combinations; }) .filter(record => { return !_.isUndefined(record); }) .value(); }51:[] 49:{"id":"64c8444d87483cf9","slug":"sports-team-analysis-by-city","title":"Sports Team Analysis by City","thumbnail":"4d65ff17e1e797911667500dc0f896a80f3d2ca92da0b4c044e56a63c9b45ec0","access_level":"public","create_time":"$D2018-05-15T22:26:02.538Z","update_time":"$D2018-05-20T01:21:20.444Z","view_time":null,"first_public_time":"$D2018-05-20T00:52:29.165Z","has_unpublished_edits":null,"fork":false,"stars":4,"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":636,"publish_version":636,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sports Team Analysis by City","cells":[{"id":0,"value":"md`\n# Sports Team Analysis by City\nI wanted to analyze how teams located in the same city perform each year relative to each other. In other words, I wanted to identify which teams from the same city had great or poor seasons at the same time. My hypothesis was that perhaps there was some type of correlation. Maybe when one team in a city is doing well, it inspires/elevates the other team(s). Spoiler Alert: It doesn't appear to be the case.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md `\n## Aquiring the Data\nI used a set of NPM scripts which used Google's Puppeteer to scrape for all the regular season records of NBA, MLB, NFL, and NHL teams for the 1970-2017 seasons. Part of this script was to normalize the city names for the various teams so they could be grouped together for comparision. I excluded NHL seasons during the strikes. Also of note, since the NBA season spans across 2 years, I needed to choose one of the years to count the analysis against. I chose the later year since the majority of the season and the playoffs occur during that time.\n\nThe data is freely available on my [gist](https://gist.githubusercontent.com/sbryfcz/31190527b4bad53a6d0b6bc51c9e76e7/raw/b505eb4dfb92290c5f67ada0e0b59847ad5d1d16/city-yearly-team-records.json).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`\n## Looking for Correlation\nMy first thought was to try plotting all win rates (ie win percentages) that pairs of teams that coexist in a city into a scatterplot matrix (which can be seen below). I split the plot out by sport/league. Hovering over a dot with your mouse will show a tooltip with the year and teams that make up that dot. The diagonals cells represent an interesting aspect of the data. Some cities have more than 1 team in the same sport (ex. the Chicago Cubs and Chicago White Sox).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"md `\nBy inspection, we don't see a lot of correlation. Most of the cells have near 0 correlation. By the looks of it, there are 2 exceptions. The NBA cell in the top right appears to show some negative correlation. The dots really are showing the New York Nets/Knicks and the Los Angeles Lakers/Clippers. It appears that when one of the teams does well, the other seems to suffer. The other correlation appears to be in the NHL cell. It appears that the Rangers and Islanders have a bit of positive correlation.\n\nThis got me thinking that maybe there were other correlations between 2 teams in the same city but maybe they were hidden in the noise of all the other teams and thus not visible.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"md`\n## Pairwise Analysis\nSo following that idea I computed the spearman correlation for each pair of teams that coexisted in a city for at least 10 years. The sorted results for the most positively and negatively correlated teams are listed below. Of particular note is that the New York Nets and Knicks appear to have a decent positive correlation even though I had thought from the scatterplots above that the 2 were negatively correlated. These findings also confirmed that the New York Islanders and Rangers and fairly positively correlated.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"md `\n### Top 10 Positively Correlated Teams\n\n|City | Team A | Team B | Correlation | Number of Seasons|\n|-----|---------------|------------------|-------------:|-----------------:|\n${_(correlations)\n .map(c=>{\n return '|' + c.teamAData[0].city + '|' + c.teamA + '|' + c.teamB + '|' + winFormatter(c.correlation)+'|'+ c.teamAData.length +'|\\n';\n })\n .reverse()\n .slice(0, 10)\n .value()\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md `\n### Top Negatively Correlated Teams\n\n|City | Team A | Team B | Correlation | Number of Seasons|\n|-----|---------------|------------------|-------------:|-----------------:|\n${correlations\n .slice(0, 10)\n .map(c=>{\n return '|' + c.teamAData[0].city + '|' + c.teamA + '|' + c.teamB + '|' + winFormatter(c.correlation)+'|'+ c.teamAData.length +'|\\n';\n })\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"md`\nFinally, I wanted to be able to visualize each pair of teams individually. Each dot represents a single year's win percentage for each team. Feel free to explore the various team correlations. Honestly, it doesnt appear that many teams are very well correlated at all.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"viewof selectedPair= html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"{\n var selectTeams = _.find(correlations, correlation => {\n return (correlation.teamA+':'+correlation.teamB) === selectedPair;\n });\n \n let pairData = _.map(selectTeams.teamAData, (teamADatum, i) => {\n return {\n teamA: teamADatum.winPercentage,\n teamB: selectTeams.teamBData[i].winPercentage\n }\n });\n \n return vegalite({\n data: {values: pairData},\n mark: \"point\",\n width: 300,\n height: 300,\n autosize: \"fit\",\n encoding: {\n x: {field: \"teamA\", title:(selectTeams.teamAData[0].team + ' (Win rate)'), type: \"quantitative\", \"scale\": {\"domain\": [0, 1]}},\n y: {field: \"teamB\", title: (selectTeams.teamBData[0].team + ' (Win rate)'), type: \"quantitative\", \"scale\": {\"domain\": [0, 1]}}\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"md `\n## Best Year for a City\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"md `\nFinally, I wanted to see if there was a particularily great year for a city where 4 teams in the same city had a great year. I decided to plot it out using parallel coordinates. You can drag your mouse on the various axis below to select various city/year combinations.\n\nIt's subjective to how you define 'great', but in 1980, Philadelphia fans had a pretty good year. The\t76ers had a \t0.72 win rate, the Flyers\t0.60, the\tEagles 0.75, and the Phillies\t0.56. This (to me) appears to be the 'best' combination. \n\nFor the worst year for a city fan base, it appears certain fans of New York/New Jersey had it particularily rough in 1977. During that year, the Nets had\ta 0.27 win rate, the Rangers 0.36, the Jets\t0.21, and the\tMets 0.40. Although, with all the other New York teams, maybe fans jumped on the bandwagon of the others for a year.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md `\n### Top Selected City Years\n|Year|City|NBA||NHL||NFL||MLB||\n|---------------------|---|--|--:|--|--:|--|--:|--|--:|\n${\n _.map(parallel.slice(0, 20), d => '|' + d.properties.year + '|'+ d.properties.city +'|' + d.properties.NBATeam+'|' + winFormatter(d.properties.NBA) +'|' + d.properties.NHLTeam+'|' + winFormatter(d.properties.NHL) +'|' + d.properties.NFLTeam+'|' + winFormatter(d.properties.NFL) +'|' + d.properties.MLBTeam+'|' + winFormatter(d.properties.MLB) +'\\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":622,"value":"md `\n## Future Work\nIn the future, I'd like to perform similar analysis for post season records for teams. The regular season is great and all, but most sports fans really care about the postseason.\n\nIf you have any ideas for analysis, feel free to reach out to me via email.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"md `## Appendix\nHere are the scripts used for the visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"x = d3.scaleLinear()\n .domain([0,1]).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"y = d3.scaleLinear()\n .domain([0,1]).nice()\n .range([width - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${width - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"y2\", -width)\n .attr(\"stroke-opacity\", 0.1))\n .call(g => g.append(\"text\")\n .attr(\"x\", width - 4)\n .attr(\"y\", -4)\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"fill\", \"black\")\n .text(data.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"x2\", width)\n .attr(\"stroke-opacity\", 0.1))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"line = d3.line()\n .curve(d3.curveCatmullRom)\n .x(d => x(d.x))\n .y(d => y(d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = {\n const data = await d3.json(\"https://gist.githubusercontent.com/sbryfcz/31190527b4bad53a6d0b6bc51c9e76e7/raw/b505eb4dfb92290c5f67ada0e0b59847ad5d1d16/city-yearly-team-records.json\");\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"getPairwaiseData = function () {\n return _(data)\n .values()\n .flatMap(cityGroup => _.values(cityGroup))\n .flatMap(yearData => {\n var pairs = [];\n \n for(let i=0;i= 1970 && yearData[i].year <= 1974) {\n continue;\n }\n \n for(let j=0;j= 1970 && yearData[i].year <= 1974) {\n continue;\n }\n \n let teamB = yearData[j].team;\n \n let key = [teamA, teamB].sort().join(':');\n \n pairs.push({\n key: key,\n data: [\n yearData[i],\n yearData[j]\n ]\n });\n }\n }\n \n return pairs;\n })\n .groupBy('key')\n .mapValues(value => {\n return _.map(value, 'data');\n })\n .value();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"correlations = {\n let teamPairs = getPairwaiseData()\n \n // compute the correlations for each pair\n var correlations = _(teamPairs)\n .values()\n .filter(teamPair => teamPair.length > 10)\n .map(teamPair => {\n let teamAWinPercentages = _.map(teamPair, teams => teams[0].winPercentage);\n let teamBWinPercentages = _.map(teamPair, teams => teams[1].winPercentage);\n \n return {\n teamA: teamPair[0][0].team,\n teamB: teamPair[0][1].team,\n correlation: jStat.corrcoeff(teamAWinPercentages, teamBWinPercentages),\n teamAData: _.map(teamPair, teams => teams[0]),\n teamBData: _.map(teamPair, teams => teams[1])\n }\n })\n .sortBy('correlation')\n .value();\n \n return correlations;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"buildFormatter = function (format) {\n if (typeof format === 'function') {\n return format;\n }\n\n if (Array.isArray(format)) {\n // create a simple mapper function\n return function (v) {\n if (v < 0 || v >= format.length) {\n return undefined;\n }\n\n return format[v];\n };\n }\n\n if (typeof format === 'string') {\n return d3.format(format);\n }\n\n return d3.format('');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"winFormatter = 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":10,"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":36,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"jStat = require('jStat@1.7.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"// some styles for scatterplot matrix\nhtml`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"// some styles for parallel chart\nhtml`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 44:null