31:T552,computeResult = (dTeams, f,a, f2,a2) => { let res = {}; teams.forEach((team,i) => { let pts, diff, goalsScored, goalsReceived; res[team] = { team: team, pts : dTeams[team].pts , diff: dTeams[team].diff, goals:dTeams[team].goals }; if (i===0) { goalsScored = f; goalsReceived = a; } else if (i===1) { goalsScored = a; goalsReceived = f; } else if (i===2) { goalsScored = f2; goalsReceived = a2; } else if (i===3) { goalsScored = a2; goalsReceived = f2; } if (goalsScored > goalsReceived) { res[team].pts+=3; } else if (goalsScored === goalsReceived) { res[team].pts+=1;} res[team].diff+=goalsScored-goalsReceived; res[team].goals+=goalsScored; }); let tempPositions = Object.values(res) .sort((a,b) => d3.descending(a.pts, b.pts) || d3.descending(a.diff, b.diff) || d3.descending(a.goals, b.goals)); // .map(d => d.team); res.positions = {} for (let i = 0; i< tempPositions.length; i+=1) { let p = tempPositions[i]; res.positions[p.team] = "" + (i+1); if ( i+1 < tempPositions.length) { let np = tempPositions[i+1]; if (np.pts === p.pts && np.diff === p.diff && np.goals === p.goals) { res.positions[p.team] = res.positions[np.team] = "Empate " + (i+1) + "&" + (i+2); i+=1; } } } return res; }32:Tdf2,{ const svg = d3.select(DOM.svg(width, width)), g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let legendSize = 60, legendSizeSep = iwidth/color.domain().length; let legend = g.selectAll(".colorLegend") .data(color.domain()) .enter() .append("g") .attr("class" , "colorLegend") .attr("transform", (d,i) => "translate("+ (i*legendSizeSep+ legendSize/4) +" -130)") // .attr("x" , (d,i) => i *55 ) // .attr("y" , -150) legend.append("rect") .attr("width", legendSize) .attr("height", legendSize) .style("fill", d => color(d)) legend.append("text") .attr("dy", legendSize+15) .attr("dx", legendSize/2) .style("text-anchor", "middle") .style("font-size", "10pt") .text(d=> d) g.selectAll(".result") .data(Object.keys(dResults)) .enter() .append("rect") .attr("class", "result") .attr("x" , d => x(d.split(";")[0])) .attr("y" , d => x(d.split(";")[1])) .attr("width", x.bandwidth()) .attr("height", x.bandwidth()) .style("stroke", "#ccc") .on("click", d => console.log(dResults[d])) .on("mouseover", d => { // console.log(d3.event) g.select("text.tooltip") // .attr("x", d3.mouse(g.node())[0] + "px") .attr("y", d3.mouse(g.node())[1] + "px") .html(getTooltipText(d, d3.mouse(g.node())[0])); let textBB = g.select("text.tooltip").node().getBBox(); let pad = 10; g.select("rect.tooltip") .attr("x", textBB.x - pad) .attr("y", textBB.y - pad) .attr("width", textBB.width + pad*2) .attr("height", textBB.height + pad*2); }) .style("fill", d => color(dResults[d].positions[team])); g.append("g") .call(d3.axisTop(x)) .append("text") .attr("transform", "translate("+ iwidth/2 + ",-" + 30 + ")") .style("font-size", "16pt") .style("fill", "#333") .text(teams[0] + " vs " + teams[1]) g.append("g") .call(d3.axisLeft(x)) .append("text") .style("font-size", "16pt") .style("fill", "#333") .attr("transform", "translate(-"+ margin.left/2 + "," + (iheight/2 - 30) + ") rotate(-90) ") .text(teams[2] + " vs " + teams[3]) g.selectAll(".xDivisions") .data(["0:0","1:0"]) .enter() .append("line") .style("stroke", "#ddd5") .style("stroke-width", "3") .attr("x1", d => x(d)) .attr("x2", d => x(d)) .attr("y1", 0) .attr("y2", iheight) g.selectAll(".yDivisions") .data(["0:0","1:0"]) .enter() .append("line") .style("stroke", "#ddd5") .style("stroke-width", "3") .attr("y1", d => x(d) ) .attr("y2", d => x(d) ) .attr("x1", 0) .attr("x2", iwidth) let expl = g.selectAll(".explanations") .data(options) .enter() .append("text") .attr("class", "explanations") .attr("pointer-events", "none") .style("fill", "#fff") // .style("mix-blend-mode", "difference") .style("text-anchor", "middle") .attr("x", d=> xExpl(d[0])) .attr("y", d=> xExpl(d[1])); expl.append("tspan") .attr("x", d=> xExpl(d[0])) .attr("dy", "0px") .text(d=> teams[0]+d[0]); expl.append("tspan") .attr("dy", "1.2em") .attr("x", d=> xExpl(d[0])) .text(d=> teams[2]+d[1]); g.append("rect") .attr("class", "tooltip") .attr("pointer-events", "none") .style("fill", "#fffa"); g.append("text") .attr("class", "tooltip") .attr("pointer-events", "none") .style("fill", "#333"); return svg.node(); } 33:[] 2f:{"title":"¿Cómo pasa Colombia a la segunda ronda?","cells":[{"id":0,"value":"md`# ¿Cómo pasa Colombia a la segunda ronda?\n\nCopa mundo Russia 2018`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"// dTeams = { return {\n// \"Colombia\": { pts:3, diff:+2 },\n// \"Senegal\": { pts:4, diff:+1 },\n// \"Polonia\": { pts:0, diff:-4 },\n// \"Japón\": { pts:4, diff:+1 }\n// }}\n// dTeams = { return {\n// \"Argentina\": { pts:1, diff:-2 },\n// \"Nigeria\": { pts:3, diff:0 },\n// \"Croatia\": { pts:6, diff:5 },\n// \"Islandia\": { pts:1, diff:-2 }\n// }}\ndTeams = { return {\n \"Mexico\": { pts:6, diff:2, goals:3 },\n \"Sweden\": { pts:3, diff:0, goals:2 },\n \"Germany\": { pts:3, diff:0, goals:2 },\n \"South Korea\": { pts:0, diff:-2, goals:1 }\n}}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"// teams = [\"Colombia\",\"Senegal\",\"Japón\",\"Polonia\"]\nteams = Object.keys(dTeams)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"dResults = {\n let res = {};\n for (let fav =0 ; fav<= maxGoals; fav++) { \n for (let aga =0 ; aga<= maxGoals; aga++) { \n for (let fav2 =0 ; fav2<= maxGoals; fav2++) { \n for (let aga2 =0 ; aga2<= maxGoals; aga2++) {\n res[getKey(fav, aga, fav2, aga2)] = computeResult(dTeams, fav, aga, fav2, aga2);\n }\n } \n } \n }\n return res\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"viewof team = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"getKey = (a,b,c,d) => {\n return a + \":\" + b + \";\"+ c+ \":\" + d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"maxGoals = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"possibleResults = d3.range((maxGoals+1)*(maxGoals+1))\n .map(d => [d%(maxGoals+1),Math.floor(d/(maxGoals+1))])\n .sort((a,b) => d3.descending(a[0],b[0]) ) \n .sort((a,b) => d3.ascending(a[0]-a[1], b[0]-b[1]) || d3.ascending(a[0],b[0]) ) \n .map(d => d.join(\":\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"colors = d3.schemePRGn[9]","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"color = d3.scaleOrdinal()\n .domain([\"1\", \"Empate 1&2\", \"2\", \"Empate 2&3\", \"3\", \"Empate 3&4\", \"4\"])\n .range([colors[8],colors[7],colors[6],colors[4],colors[2], colors[1], colors[0]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"md`Posición de **${team}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"options = d3.range(9).map(d => [[\" pierde\", \" empata\", \" gana\"][d%3],[\" pierde\", \" empata\", \" gana\"][Math.floor(d/3)]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"margin = {return {top: 160, right: 20, bottom: 20, left: 60}}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"iwidth = Math.min(width - margin.left - margin.right, width - margin.top -margin.bottom)","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"iheight = iwidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"\n x = d3.scaleBand()\n // .padding(0)\n .domain(possibleResults)\n .range([0, iwidth])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"xExpl = d3.scaleOrdinal()\n .domain([\" pierde\", \" empata\", \" gana\"])\n .range([x(\"0:\"+maxGoals)+ (x(\"0:0\")-x(\"0:\"+maxGoals))/2, \n x(\"0:0\")+(x(\"1:0\")-x(\"0:0\"))/2, \n x(\"1:0\")+(x(maxGoals+\":0\")-x(\"1:0\"))/2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"xExpl(\" gana\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"width=800","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"getTooltipText = (d, x) => {\n let msg = \"\";\n let score = d.split(\";\").map(d=>d.split(\":\"))\n // console.log(d);\n msg+= \"\" + teams[0] + \" \" + score[0][0] +\" vs \" + teams[1] + \" \" +score[0][1] + \"\";\n msg+= \"\" + teams[2] + \" \" + score[1][0] +\" vs \" + teams[3] + \" \" +score[1][1] + \"\";\n msg+= \"Posiciones:\";\n d3.keys(dResults[d].positions).forEach((t,i) => \n msg+=\"\" + t + \":\" + dResults[d].positions[t] + \"\"\n );\n // console.log(msg);\n return msg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}