31:T430,{ const width = 200, height = 200, margin = ({top: 20, bottom: 20, left: 20, right: 20}); const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) const xScale = d3.scaleBand() .padding([.25]) .range([0, width]) .domain(nestedByNumPlayer.map(d => d.key)) const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(nestedByNumPlayer, d => d.values.length)]).nice() g.append("g") .call(d3.axisLeft(yScale)) g.append("g") .attr("transform",`translate(0, ${height})`) .call(d3.axisBottom(xScale)) g.selectAll(".bar") .data(nestedByNumPlayer) .enter().append("rect") .attr("class", "bar") .attr("width", xScale.bandwidth()) .attr("height", d => height - yScale(d.values.length)) .attr("y", d => yScale(d.values.length)) .attr("x", d => xScale(d.key)) return svg.node() }32:T427,{ const width = 800, height = 300, margin = ({top: 20, bottom: 20, left: 20, right: 20}); const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) const xScale = d3.scaleBand() .padding([.25]) .range([0, width]) .domain(nestedByPlayer.map(d => d.key)) const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(nestedByPlayer, d => d.values.length)]).nice() g.append("g") .call(d3.axisLeft(yScale)) g.append("g") .attr("transform",`translate(0, ${height})`) .call(d3.axisBottom(xScale)) g.selectAll(".bar") .data(nestedByPlayer) .enter().append("rect") .attr("class", "bar") .attr("width", xScale.bandwidth()) .attr("height", d => height - yScale(d.values.length)) .attr("y", d => yScale(d.values.length)) .attr("x", d => xScale(d.key)) return svg.node() }33:T655,{ const width = 600, height = 300, margin = ({top: 20, bottom: 50, left: 40, right: 20}); const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) const xScale = d3.scaleLinear() .range([0, width]) .domain([0, d3.max(flatPlayerData, d => d.num)]).nice() const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, 1]) const sizeScale = d3.scaleLinear() .range([2, 30]) .domain([0, d3.max(flatPlayerData, d => d.num)]) g.append("g") .call(d3.axisLeft(yScale).tickFormat(d3.format(".0%"))) g.append("g") .attr("transform",`translate(0, ${height})`) .call(d3.axisBottom(xScale)) g.selectAll(".bar") .data(flatPlayerData.filter(d => d.gameType == 3)) .enter().append("rect") .attr("class", "bar") .attr("width", d => sizeScale(d.num)) .attr("height", d => sizeScale(d.num)) .attr("y", d => yScale(d.winPer) - sizeScale(d.num)/2) .attr("x", d => xScale(d.num) - sizeScale(d.num)/2) .style("fill", d => color(d.player)) .style("stroke", "#000") g.selectAll(".circle") .data(flatPlayerData.filter(d => d.gameType == 4)) .enter().append("circle") .attr("class", "circle") .attr("r", d => sizeScale(d.num)/2) .attr("cy", d => yScale(d.winPer)) .attr("cx", d => xScale(d.num)) .style("fill", d => color(d.player)) .style("stroke", "#000") return svg.node() }34:T8bd,{ const width = 300, height = 200, margin = ({top: 20, bottom: 50, left: 40, right: 50}); const div = html`

` const svg = d3.select(div).selectAll("svg") .data(fullPlayerStats) .enter().append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) g.append("text") .text(d => "Order: " + d.key) .attr("y", -10) .style("font", "14px sans-serif") const xScale = d3.scaleLinear() .range([0, width]) .domain([0, d3.max(flatFullPlayerData, d => d.num)]).nice() const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, 1]) const sizeScale = d3.scaleLinear() .range([2, 30]) .domain([0, d3.max(flatFullPlayerData, d => d.num)]) g.append("g") .call(d3.axisLeft(yScale).tickFormat(d3.format(".0%"))) g.append("g") .attr("transform",`translate(0, ${height})`) .call(d3.axisBottom(xScale)) g.selectAll(".bar-group") .data(d => d.values.filter(d => d.key == 3)) .enter().append("g") .attr("class", "bar-group") .selectAll(".bar") .data(d => d.values) .enter().append("rect") .attr("class", "bar") .attr("width", d => sizeScale(d.value.num)) .attr("height", d => sizeScale(d.value.num)) .attr("y", d => yScale(d.value.winPer) - sizeScale(d.value.num)/2) .attr("x", d => xScale(d.value.num) - sizeScale(d.value.num)/2) .style("fill", d => color(d.key)) .style("fill-opacity", .5) .style("stroke", "#000") g.selectAll(".circle-group") .data(d => d.values.filter(d => d.key == 4)) .enter().append("g") .attr("class", "circle-group") .selectAll(".circle") .data(d => d.values) .enter().append("circle") .attr("class", "circle") .attr("r", d => sizeScale(d.value.num)/2) .attr("cy", d => yScale(d.value.winPer)) .attr("cx", d => xScale(d.value.num)) .style("fill", d => color(d.key)) .style("fill-opacity", .5) .style("stroke", "#000") return div }35:T62f,{ const width = 300, height = 200, margin = ({top: 20, bottom: 50, left: 40, right: 50}); const div = html`

` const svg = d3.select(div).selectAll("svg") .data(orderStats) .enter().append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .each(function(data) { const g = d3.select(this).append("g") .attr("transform", `translate(${margin.left},${margin.top})`) g.append("text") .text(d => d.key + " player games") .attr("y", -10) .style("font", "14px sans-serif") const xScale = d3.scaleBand() .padding([.25]) .range([0, width]) .domain(data.values.map(d => d.key)) const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, 1]) g.append("g") .call(d3.axisLeft(yScale).tickFormat(d3.format(".0%"))) g.append("g") .attr("transform",`translate(0, ${height})`) .call(d3.axisBottom(xScale)) g.selectAll(".bar") .data(d => d.values) .enter().append("rect") .attr("class", "bar") .attr("width", xScale.bandwidth()) .attr("y", d => yScale(d.value.winPer)) .attr("height", d => height - yScale(d.value.winPer)) .attr("x", d => xScale(d.key)) .style("fill", "#000") .style("fill-opacity", .5) .style("stroke", "#000") }) return div }36:Tbde,{ const width = 300, height = 200, margin = ({top: 20, bottom: 50, left: 40, right: 50}); const div = html`

` const svg = d3.select(div).selectAll("svg") .data(orderData) .enter().append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .each(function(data) { const g = d3.select(this).append("g") .attr("transform", `translate(${margin.left},${margin.top})`) g.append("text") .text(d => d.key + " player games") .attr("y", -10) .style("font", "14px sans-serif") const xScale = d3.scaleBand() .padding(.25) .range([0, width]) .domain(data.values.map(d => d.key)) const yScale = d3.scaleLinear() .range([height, 0]) .domain([20, 40]) g.append("g") .call(d3.axisLeft(yScale)) g.append("g") .attr("transform",`translate(0, ${height})`) .call(d3.axisBottom(xScale)) .selectAll("text") .text(d => convertLabel[d]) g.selectAll(".circle-groups") .data(d => d.values) .enter().append("g") .attr("class", "circle-groups") .attr("transform", d => `translate(${xScale(d.key)},0)`) .each(function(thisGroupD) { const values = calculateIQR(thisGroupD.values, 'total'); const thisGroup = d3.select(this); const boxWidth = xScale.bandwidth(); const whiskers = thisGroup.append("line") .attr("x1", boxWidth/2) .attr("x2", boxWidth/2) .attr("y1", yScale(values.min)) .attr("y2", yScale(values.max)) .style("stroke", "#000") thisGroup.append("line") .attr("x1", boxWidth/2 - 5) .attr("x2", boxWidth/2 + 5) .attr("y1", yScale(values.min)) .attr("y2", yScale(values.min)) .style("stroke", "#000") thisGroup.append("line") .attr("x1", boxWidth/2 - 5) .attr("x2", boxWidth/2 + 5) .attr("y1", yScale(values.max)) .attr("y2", yScale(values.max)) .style("stroke", "#000") const box = thisGroup.append("rect") .attr("y", yScale(values.thirdQuartile)) .attr("height", yScale(values.firstQuartile) - yScale(values.thirdQuartile)) .attr("width", boxWidth) .attr("x", 0) .style("fill", "#fff") .style("stroke", "#000"); thisGroup.append("line") .attr("x1", 0) .attr("x2", boxWidth) .attr("y1", yScale(values.median)) .attr("y2", yScale(values.median)) .style("stroke-width", 2) .style("stroke", "red") }) }) return div }39:T823,{ const width = 600, height = 300, margin = ({top: 20, bottom: 50, left: 40, right: 20}); const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) const linR = linearRegression(catanRecords.map(d => (+d.Settlement) + (+d.City)).sort(d3.ascending), catanRecords.map(d => +d['Final Score']).sort(d3.ascending)) console.log(linR) const r2 = g.append("text") .style("font", "16px sans-serif") .attr("y", 10) .attr("x", 5) .text("r squared: " + Math.round(linR.r2*100)/100) const xScale = d3.scaleLinear() .range([0, width]) .domain([20, 40]) const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, 15]).nice() g.append("g") .call(d3.axisLeft(yScale)) g.append("g") .attr("transform",`translate(0, ${height})`) .call(d3.axisBottom(xScale)) g.selectAll(".circle") .data(catanRecords.filter(d => d['Number of Players'] == 4)) .enter().append("circle") .attr("class", "circle") .attr("r", d => 5) .attr("cy", d => yScale(+d['Final Score'])) .attr("cx", d => xScale((+d.Settlement) + (+d.City))) .style("fill-opacity", .15) .style("stroke", "#000") g.selectAll(".rect") .data(catanRecords.filter(d => d['Number of Players'] == 3)) .enter().append("rect") .attr("class", "rect") .attr("width", 10) .attr("height", 10) .attr("y", d => yScale(+d['Final Score']) - 5) .attr("x", d => xScale((+d.Settlement) + (+d.City)) - 5) .style("fill-opacity", .15) .style("stroke", "#000") var myLine = g.append("line") .attr("x1", xScale(20)) .attr("y1", yScale(linR.intercept)) .attr("x2", xScale(40)) .attr("y2", yScale((40 * linR.slope) + linR.intercept )) .style("stroke", "black"); return svg.node() }3a:[] 2f:{"title":"Every Day I'm Settling","cells":[{"id":0,"value":"md`# Every Day I'm Settling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`My friends and I are **extremely** cool. We play Settlers of Catan, specifically the Cities & Knights expansion (because we're real like that), and we like to keep track of some metrics so we can better understand the nuances of the game. How likely are you to win if you get to put down your settlment first? Who's the best in our group of friends? All of lifes most important questions are finally being answered, here.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"cImg = await new Promise((resolve, reject) => {\n let i = new Image();\n i.onload = () => resolve(i);\n i.onerror = reject;\n // i.crossOrigin = 'anynomous';\n i.src = 'https://allgoodmeeple.co.uk/wp-content/uploads/2016/03/catan3065.jpg';\n i.width = 600;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`The data here has been collected over several painstaking months of continuous Cities & Knights gameplay. At the beginning of each game of Catan, after the board has been created, each player gets to put down a settlement and a city, each with a road. The player who gets to go first puts down their settlement, then like a snake draft, they will be the last to put down their city. Cities are worth twice as much as settlements in terms of their points.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`A big question we had playing the game was: just how much does it matter to go first? Do you get an unfair advantage? Let's take a look at the data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"catanRecords = d3.csv(\"https://gist.githubusercontent.com/pstuffa/8615d6b009a9112e340272c187beb579/raw/10a39325defca96e26a32686b26e54340d4b5c2f/Catan%2520Records%2520-%2520data.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`I've loaded in our CSV of games. Each row is a turn for a game, so if there's three players in a game, there are three rows. We mark the player, which turn they went (first to third in a three player game), the \"dots\" for their settlment and the dots for their city. (City dots are doubled because cities are worth twice as much.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`## Count of Games by Number of Players`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"nestedByNumPlayer = d3.nest()\n .key(d => d[\"Number of Players\"])\n .key(d => d['Game #'])\n .entries(catanRecords.filter(d => d[\"Number of Players\"] != \"\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`Ok, we have mostly three player games and two player games. It's important for our analysis that we look at only one type of game at a time, so either three person or four person.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`## Count of Games by Player`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"nestedByPlayer = d3.nest()\n .key(d => d[\"Player\"])\n .key(d => d['Game #'])\n .entries(catanRecords.filter(d => d[\"Number of Players\"] != \"\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`Harry, Dan and myself have played by far the most games. Hobie and Sam are next. We'll likely want to exclude Bethany, Max, Shaw, Brooke and Grinder from any player analysis, as they played only a little bit.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`## Win Percent by Player and Game Type`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"playerStats = d3.nest()\n .key(d => d[\"Player\"])\n .key(d => d['Number of Players'])\n .rollup(leaves => {\n return { \n num: leaves.length,\n winPer: leaves.filter(d => d[\"Winner\"] == \"TRUE\").length / leaves.length \n }\n }).entries(catanRecords.filter(d => d[\"Number of Players\"] != \"\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"flatPlayerData = {\n \n let tempArray = [];\n \n playerStats.forEach(player => {\n player.values.forEach(gameType => {\n tempArray.push({player: player.key, gameType: gameType.key, num: gameType.value.num, winPer: gameType.value.winPer});\n })\n })\n const vettedPlayers = ['Paul','Harold','Daniel','Hobie','Sam']\n return tempArray.filter(d => vettedPlayers.indexOf(d.player) > -1)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"playerLegend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md`Three player games are rectangles, and four person games are circles. Y axis is win percentage and x axis is number of games played.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"md`You can see some trends already. Dan has the best three player win percentage by far. Harry has the lowest. Much closer rankings for four person games, with Sam, Harry, Dan and myself all with win percentages in the 20-30%. But how much of that is by the order we went?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"md`## Win Percent by Player, Game Type, and Order`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"fullPlayerStats = d3.nest()\n .key(d => d['Pick Order'])\n .key(d => d['Number of Players'])\n .key(d => d[\"Player\"])\n .rollup(leaves => {\n return { \n num: leaves.length,\n winPer: leaves.filter(d => d[\"Winner\"] == \"TRUE\").length / leaves.length \n }\n }).entries(catanRecords.filter(d => d[\"Number of Players\"] != \"\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"flatFullPlayerData = {\n \n let tempArray = [];\n \n fullPlayerStats.forEach(order => {\n order.values.forEach(gameType => {\n gameType.values.forEach(player => {\n \n tempArray.push({player: player.key, gameType: gameType.key, order: order.key, num: player.value.num, winPer: player.value.winPer});\n })\n })\n })\n return tempArray.filter(d => vettedPlayers.indexOf(d.player) > -1)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"playerLegend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`Three player games are rectangles, and four person games are circles. Y axis is win percentage and x axis is number of games played`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"md`Ok, so Dan really kills it when he goes third in a three player game. Harry only wins when he goes 2nd in a three person game. I am pretty consistent across formats.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`## Win Percentage by Order`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"orderStats = d3.nest()\n .key(d => d['Number of Players'])\n .key(d => d['Pick Order'])\n .rollup(leaves => {\n return { \n num: leaves.length,\n winPer: leaves.filter(d => d[\"Winner\"] == \"TRUE\").length / leaves.length\n }\n }).entries(catanRecords.filter(d => d[\"Number of Players\"] != \"\" & vettedPlayers.indexOf(d.Player) > -1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"md`We can see in three player games that going third seems to have a real advantage. If we remember Dan's results though, this is largely driven by a single player.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`## Dot Analysis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`On each of the number pieces in Catan there are dots representing the probability that this number will be rolled. 6s and 8s have the highest probability and have five dots on their piece. 2s and 12s have the lowest probablity, so they only have a single dot. We call adding the total dots you have as 'dot analysis'. The idea, are you more likely to win if you have more dots?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"orderData = d3.nest()\n .key(d => d['Number of Players'])\n .key(d => d['Pick Order'])\n .entries(catanRecords.filter(d => d[\"Number of Players\"] != \"\" & vettedPlayers.indexOf(d.Player) > -1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"md`### Settlement Dots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"md`There is a big advantage to your settlment if you go first. It drops off by almost a full dot if you go last.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`### City Dots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"md`There is also an advantage to your city if you go last, which makes sense, as you'll be the first one to put down your city.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"md`### Total Dots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"md`Overall, it looks like in a four person game, the advantages offset, making your total dots fairly equal. It looks like three player games give you an advantage to go last.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"md`## Victory Points by Total Dots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md`While looking at dots is nice and all, we want to know how much dots correlate with victory points. Here, I've plotted Victory Points (y axis) by Total Settlement + City dots (x axis). Also, I've calculated the linear regression.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"md`Are the two correlated? With an r squared value of .92, I'd say so :)` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`## More`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"md`This data was collected manually, and there's a lot more of it. If you like this and have some interesting Catan data, ping me and I'd love to add it to the analysis.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"orderData.forEach(gameType => {\n gameType.values.forEach(order => {\n order.values.forEach(value => {\n value.Settlement = +value.Settlement\n value.City = +value.City\n value.total = (value.Settlement + value.City)\n })\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"convertLabel = ({1: \"1st\", 2: \"2nd\", 3: \"3rd\", 4: \"4th\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"vettedPlayers = ['Paul','Harold','Daniel','Hobie','Sam']","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"linearRegression = (y,x) => {\n\n\tvar lr = {};\n\tvar n = y.length;\n\tvar sum_x = 0;\n\tvar sum_y = 0;\n\tvar sum_xy = 0;\n\tvar sum_xx = 0;\n\tvar sum_yy = 0;\n\t\n\tfor (var i = 0; i < y.length; i++) {\n\t\t\n\t\tsum_x += x[i];\n\t\tsum_y += y[i];\n\t\tsum_xy += (x[i]*y[i]);\n\t\tsum_xx += (x[i]*x[i]);\n\t\tsum_yy += (y[i]*y[i]);\n\t} \n\t\n\tlr['slope'] = (n * sum_xy - sum_x * sum_y) / (n*sum_xx - sum_x * sum_x);\n\tlr['intercept'] = (sum_y - lr.slope * sum_x)/n;\n\tlr['r2'] = Math.pow((n*sum_xy - sum_x*sum_y)/Math.sqrt((n*sum_xx-sum_x*sum_x)*(n*sum_yy-sum_y*sum_y)),2);\n\t\n\treturn lr;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"calculateIQR = (data, field) => {\n \n const min = d3.min(data, d => +d[field]);\n const max = d3.max(data, d => +d[field]);\n const median = d3.median(data, d => +d[field]);\n const firstQuartile = d3.quantile(data.map(d => +d[field]).sort(d3.ascending), .25);\n const thirdQuartile = d3.quantile(data.map(d => +d[field]).sort(d3.ascending), .75);\n \n return {min: min, max: max, median: median, firstQuartile: firstQuartile, thirdQuartile: thirdQuartile}\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"playerLegend = () => {\n \n const width = 500,\n height = 20\n \n const svg = d3.select(createSVG(width, height));\n \n const n = d3.set(flatPlayerData.map(d => d.player)).values(),\n boxwidth = (width - 50)/n.length;\n \n svg.append(\"text\")\n .attr(\"dy\", 14)\n .style(\"font\", \"12px sans-serif\")\n .text(\"Players:\")\n \n const boxes = svg.selectAll(\".box\")\n .data(n)\n .enter().append(\"g\")\n .attr(\"class\",\"box\")\n .attr(\"transform\", (d,i) => `translate(${boxwidth*i + 50},0)`);\n \n boxes.append(\"rect\")\n .attr(\"width\", boxwidth)\n .attr(\"height\", height) \n .style(\"stroke\", \"#000\")\n .style(\"fill\", d => color(d))\n \n boxes.append(\"text\")\n .attr(\"dx\", 10)\n .attr(\"dy\", 14)\n .style(\"fill\", \"#fff\")\n .style(\"font\", \"12px sans-serif\")\n .text(d => d) \n \n return svg.node();\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {d3, createSVG, jitter} from '@pstuffa/helpers'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}