2a:null 2b:["$","title",null,{"children":"When Round Robin is Visualized | sungryeol park(max) | Observable"}] 30:T155d,{ const resultPage = html`

`; const teamCount = 8; const teams = createTeams(teamCount); const rounds = simulateRoundRobin(teams); // rounds consist matches const matches = []; rounds.forEach((r, i) => r.forEach(m => { matches.push({ ...m, round: i }); }) ); console.log('matches', matches); // --- start of table render const calculateWin = side => d => { if (side === 'home') return d.homeScore > d.awayScore; if (side === 'away') return d.awayScore > d.homeScore; }; const displayName = teamId => { const team = teams[teamId]; return `${team.name}(${team.abbr})`; }; const attachRound = enter => enter .append('tr') .append('th') .attr('colspan', 4) .text((d, i) => `Round ${i}`); const attachHomeName = enter => enter .append('td') .text(d => displayName(d.home)) .classed('win', calculateWin('home')); const attachAwayName = enter => enter .append('td') .text(d => displayName(d.away)) .classed('win', calculateWin('away')); const attachHomeScore = enter => enter .append('td') .text(d => d.homeScore) .classed('win', calculateWin('home')); const attachAwayScore = enter => enter .append('td') .text(d => d.awayScore) .classed('win', calculateWin('away')); const mEnter = enter => enter .append('tr') .classed('match', true) .call(attachHomeName) .call(attachHomeScore) .call(attachAwayName) .call(attachAwayScore); const rEnter = enter => enter .append('table') .classed('round', true) .call(attachRound); const table = d3.create('table'); table .selectAll('.round') .data(rounds) .join(rEnter) .selectAll('.match') .data(d => d) .join(mEnter); // ---- end of table render const svg = d3 .create('svg') .attr('width', styles.width) .attr('height', styles.height); const stage = svg .append('g') .attr('transform', translate(styles.margin, styles.margin)); const cellWidth = styles.clippedWidth / (teams.length + 1); const cellHeight = styles.clippedHeight / (teams.length + 1); const drawTeamRect = enter => enter .append('rect') .attr('width', cellWidth) .attr('height', cellHeight); const drawTeamName = enter => enter.append('text').text(d => d.abbr); const enterTeamsX = enter => enter .append('g') .attr('transform', (_, i) => translate((i + 1) * cellWidth, 0)) .classed('team-home-x-axis', true) .call(drawTeamRect) .call(drawTeamName); stage .selectAll('.team-home-x-axis') .data(teams) .join(enterTeamsX); const enterTeamsY = enter => enter .append('g') .attr('transform', (_, i) => translate(0, styles.clippedHeight - (i + 1) * cellHeight) ) .classed('team-away-y-axis', true) .call(drawTeamRect) .call(drawTeamName); stage .selectAll('.team-away-y-axis') .data(teams) .join(enterTeamsY); const drawMatchLower = enter => enter .append('rect') .classed('match-bar-away', true) .attr('width', cellWidth / 4) .attr('height', d => cellHeight * d.awayScore * .1) .attr('transform', d => translate(cellWidth / 4, cellHeight - cellHeight * d.awayScore * .1) ); const drawMatchUpper = enter => enter .append('rect') .classed('match-bar-home', true) .attr('width', cellWidth / 4) .attr('height', d => cellHeight * d.homeScore * .1) .attr('transform', d => translate(cellWidth / 2, cellHeight - cellHeight * d.homeScore * .1) ); const drawDetailHomeScore = enter => enter .append('text') .text(d => d.homeScore) .attr('transform', translate(cellWidth * .70, cellHeight - 20)); const drawDetailAwayScore = enter => enter .append('text') .text(d => d.awayScore) .attr('transform', translate(cellWidth * .3, cellHeight - 20)); const drawMatchDetail = enter => enter .append('g') .attr('class', (d, i) => `match-detail-${i} detail-invisible`) .attr('opacity', 0) .call(drawDetailHomeScore) .call(drawDetailAwayScore); const onHitBoxEnter = (d, i, e) => { console.log(d, i, e); stage .select(`.match-detail-${i}`) .transition() .attr('opacity', 1); }; const onHitBoxLeave = (d, i, e) => { console.log(d, i, e); stage .select(`.match-detail-${i}`) .transition() .attr('opacity', 0); }; const drawMatchHitBox = enter => enter .append('rect') .attr('width', cellWidth) .attr('height', cellHeight) .attr('opacity', 0) .on('mouseenter', onHitBoxEnter) .on('mouseleave', onHitBoxLeave); const CMenter = enter => enter .append('g') .classed('chart-match', true) .attr('transform', d => translate(d.home * cellWidth, (teams.length - 1 - d.away) * cellHeight) ) .call(drawMatchUpper) .call(drawMatchLower) .call(drawMatchDetail) .call(drawMatchHitBox); const gMatch = stage .append('g') .attr('transform', translate(cellWidth, cellHeight)); gMatch .selectAll('.chart-match') // chart-match .data(matches) .join(CMenter); resultPage.appendChild(table.node()); resultPage.appendChild(svg.node()); return resultPage; }31:[] 2e:{"id":"1338633b4b264eac","slug":"round-robin-visualized","title":"When Round Robin is Visualized","thumbnail":"249db5b878fc7df710116003a343f1f7d43ccd53b5698d87882d7f7cd2ee6448","access_level":"public","create_time":"$D2019-11-27T08:24:00.100Z","update_time":"$D2020-04-11T14:11:53.322Z","view_time":null,"first_public_time":"$D2020-01-02T02:45:33.597Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"798948a27f41b861","login":"rabelais","name":"sungryeol park(max)","avatar_url":"https://avatars-next.observableusercontent.com/827c5661c54130c43dbd18c77323f1f23a062c6948ca7c22724445280a3753f9","tier":"starter_2024"},"version":548,"publish_version":548,"role":null,"authored":false,"authors":[{"type":"individual","id":"b63c1c32bcb2615c","login":"rabelais","name":"sungryeol park(max)","avatar_url":"https://avatars-next.observableusercontent.com/827c5661c54130c43dbd18c77323f1f23a062c6948ca7c22724445280a3753f9","tier":null}],"members":[{"type":"individual","id":"b63c1c32bcb2615c","login":"rabelais","name":"sungryeol park(max)","avatar_url":"https://avatars-next.observableusercontent.com/827c5661c54130c43dbd18c77323f1f23a062c6948ca7c22724445280a3753f9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"When Round Robin is Visualized","cells":[{"id":0,"value":"md`# When Round Robin is Visualized\ncompared to when it's drawn on a table...\n- easier to tell which side has more winning probability\n- easier to organize data by teams\n- easier to spot anomalies\n\n라운드 로빈을 시각화 할 경우 표로 그리는 것에 비하여...\n- 홈 팀과 원정 팀 중 어느쪽이 더욱 승률이 높은지 타낼 수 있다\n- 자료를 팀 위주로 분류하기 편하다\n- 전체 결과중 특이한 결과를 찾아내기 쉽다\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"createTeams = count => {\n let teamCount = 0;\n const prevNames = {};\n const abbrMap = {};\n\n const createTeam = () => {\n const name = faker.address.city();\n const abbr = name.slice(0, 3).toUpperCase();\n if (prevNames[name] >= 1) return createTeam();\n prevNames[name] = (prevNames[name] || 0) + 1;\n abbrMap[abbr] = (abbrMap[abbr] || 0) + 1;\n teamCount += 1;\n return {\n name,\n id: teamCount - 1,\n abbr: abbrMap[abbr] > 1 ? `${abbr}${abbrMap[abbr]}` : abbr\n };\n };\n\n return Array.from({ length: count }).map(createTeam);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"teamsDemo = createTeams(8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"demoResult = simulateRoundRobin(teamsDemo)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"html`\n

HOME(홈 팀으로 참가)

AWAY(원정 팀으로 참가)

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"translate = (x, y) => `translate(${x},${y})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"styles = {\n const _styles = {\n width: 500,\n height: 500,\n margin: 30\n };\n\n _styles.clippedWidth = _styles.width - _styles.margin * 2;\n _styles.clippedHeight = _styles.height - _styles.margin * 2;\n return _styles;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"simulateRoundRobin = _teams => {\n // this round robin model is faulty. need to be fixed later.\n const teams = _teams.slice();\n const away = teams.splice(Math.ceil(teams.length / 2), teams.length);\n const home = teams;\n let rounds = [];\n if (home.length < away.length) home.push('X');\n console.log(home, away);\n for (let i = 0; i < home.length + away.length - 1; i++) {\n away.unshift(home.splice(1, 1)[0]);\n home.push(away.pop());\n\n const matches = home.map((h, idx) => ({\n home: lodash.get(home, `[${idx}].id`),\n away: lodash.get(away, `[${idx}].id`),\n homeScore: Math.round(Math.random() * 10),\n awayScore: Math.round(Math.random() * 10)\n }));\n // .filter(match => match.home !== && match.away);\n rounds.push(matches);\n }\n return rounds;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"faker = require('https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"lodash = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"