31:T681,md` # Visualizing Game Outcomes Table is certainly not the best format to display data with multi-dimensional depth. It's more evident when the users want to know about details. - color represents numbers of lost game; red means more loses. - caution: the table doesn't reflect change once *random* button in the visual representation is clicked. - referenced real-world data format. # 게임결과 시각화하기 시각화의 장점을 표와 비교하여 증명하기 위해 만들었다. 표는 한 번에 단 하나의 자료축 순서밖에 나타낼 수 없지만, 시각화를 통하면 동시에 여러가지의 자료축을 동시에 나타낼 수 있다. - 색상은 패배한 수를 나타낸다. 원이 빨강에 가까울수록 더욱 많은 패배를 의미한다. - *random*버튼을 눌러 시각화 내의 값을 임의로 바꿀 수 있으며, 이 경우 상단 표에는 반영되지 않는다. *observable*에서 *general update pattern*을 사용하려면 컴포넌트간 업데이트는 추천되지 않는다. - 플랫폼에서 실제 운영되고 있는 게임 형태를 참조했다. - 가로축을 패배한 수(x axis by lose)와 순위(x axis by rank)로 변경해볼 수 있다. - abbr은 약어(abbreviation)를 뜻하며 중복된 이름이 있을 경우 옆에 고유숫자를 표시한다. - *view regression model* 을 클릭하여 회귀분석 그래프를 볼 수 있다 - 텍스트창에 팀 명을 입력하여 원하는 팀을 찾을 수 있다 # what I've learned - \`\` coordination system is slightly different from other svg elements. - \`.selectAll().data()\` pattern is always more useful than \`.datum()\` `32:T4ab,{ const table = html`

`; const thead = d3.create('thead'); const tbody = d3.create('tbody'); const hEnter = enter => enter .append('th') .text(d => d) .classed('data-head', true); const putRank = enter => enter.append('td').text((d, i) => i + 1); const putIcon = enter => enter .append('img') .attr('src', d => d.icon) .attr('width', 20) .attr('height', 20); const putAbbr = enter => enter.append('td').text(d => d.abbr); const putName = enter => enter.append('td').text(d => d.name); const putWin = enter => enter.append('td').text(d => d.win); const putLose = enter => enter.append('td').text(d => d.lose); const bEnter = enter => enter .append('tr') .call(putRank) .call(putIcon) .call(putName) .call(putAbbr) .call(putWin) .call(putLose); thead .append('tr') .selectAll('.data-head') .data(['rank', 'icon', 'name', 'abbr', 'win', 'lose']) .join(hEnter, null, null); tbody .selectAll('.data-row') .data(users) .join(bEnter, null, null); table.appendChild(thead.node()); table.appendChild(tbody.node()); return table; }33:T27b1,{ const div = html`

`; const clippedWidth = settings.width - settings.margin * 2; const clippedHeight = settings.height - settings.margin * 2; const selectFilter = html``; const selectAxisX = html` `; const btnRandom = html``; const labelCheckbox = html`view regression model`; const chkRegression = html``; const svg = d3 .create('svg') .attr('width', settings.width) .attr('height', settings.height) .attr('xmls', 'http://www.w3.org/2000/svg') .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); const stage = svg .append('g') .attr('transform', `translate(${settings.margin},${settings.margin})`); const stageAxisX = stage .append('g') .classed('custom-axis-x', true) .attr('transform', `translate(0,${clippedHeight + 30})`); const stageAxisY = stage .append('g') .classed('custom-axis-y', true) .attr('transform', 'translate(-30,0)'); const labelAxisX = stage .append('text') .attr('transform', `translate(-90,${clippedHeight + 50})`); const labelAxisY = stage .append('text') .attr('transform', `translate(${clippedWidth + 30},-20)`); const gHoverInfo = stage .append('g') .classed('hover', true) .attr('visibility', 'hidden'); gHoverInfo .append('rect') .attr('fill', 'white') .attr('width', 180) .attr('height', 30) .attr('opacity', .8) .attr('rx', 5) .attr('ry', 5); gHoverInfo .append('text') .attr('alignment-baseline', 'hanging') .attr('transform', 'translate(10,10)'); // will-be-reassigned values let _users = users; let targetAxisX = 'rank'; let yAxis = null; let xAxis = null; let filterName = null; let isRegressionVisible = false; function onMouseEnter(d, i, e) { // console.log(this); // this === hover mask d3.select(this.parentNode).raise(); d3.select(this.parentNode) .select('text') .text(d => d.name); d3.select(this.parentNode) .select('circle') .transition() .duration(200) .attr('r', settings.radius * 2); d3.select(this.parentNode) .select('.text-bg') .attr('visibility', 'visible'); const mX = d3.event.offsetX; const mY = d3.event.offsetY; gHoverInfo .attr('visibility', 'visible') .attr( 'transform', `translate(${mX - settings.margin},${mY - settings.margin + 30})` ); gHoverInfo .select('text') .text(`rank: ${d.rank}/win: ${d.win}/lose: ${d.lose}`); gHoverInfo.raise(); } function onMouseMove(d, i, e) { const mX = d3.event.offsetX; const mY = d3.event.offsetY; gHoverInfo.attr( 'transform', `translate(${mX - settings.margin},${mY - settings.margin + 30})` ); } function onMouseLeave(d, i, e) { d3.select(this.parentNode) .select('text') .text(d => d.abbr); d3.select(this.parentNode) .select('circle') .transition() .duration(200) .attr('r', settings.radius); d3.select(this.parentNode) .select('.text-bg') .attr('visibility', 'hidden'); gHoverInfo.attr('visibility', 'hidden'); } function render() { labelAxisX.text(targetAxisX); labelAxisY.text('win'); const XscaleByRank = d3 .scaleLinear() .domain([1, _users.length]) .range([0, clippedWidth]); const winnings = _users.map(u => u.win); const loses = _users.map(u => u.lose); const colorLose = v => d3.interpolateRdYlGn( d3 .scaleLinear() .domain([0, Math.max(...loses)]) .range([1, 0])(v) ); const XscaleByWin = d3 .scaleLinear() .domain([0, Math.max(...winnings)]) .range([0, clippedWidth]); const XscaleByLose = d3 .scaleLinear() .domain([0, Math.max(...loses)]) .range([0, clippedWidth]); const YscaleByWin = d3 .scaleLinear() .domain([0, Math.max(...winnings)]) .range([clippedHeight, 0]); const getCoord = (d, i) => { let _x = null; if (targetAxisX === 'rank') _x = XscaleByRank(d.rank); if (targetAxisX === 'lose') _x = XscaleByLose(d.lose); const _y = YscaleByWin(d.win); return `translate(${_x},${_y})`; }; const drawCircle = enter => enter .append('circle') .attr('cx', 0) .attr('cy', 0) .attr('r', settings.radius) .attr('stroke', 'rgba(0,0,0,0.3)') .attr('fill', d => colorLose(d.lose)); const drawMask = enter => enter .append('mask') .attr('id', d => d.abbr) .append('circle') .attr('fill', 'white') .attr('cx', settings.radius) .attr('cy', settings.radius) .attr('r', settings.radius - 2); const drawImage = enter => enter .append('image') .attr('transform', `translate(${-settings.radius},${-settings.radius})`) .attr('xlink:href', d => d.icon) .attr('width', settings.radius * 2) .attr('height', settings.radius * 2) .attr('mask', d => `url(#${d.abbr})`); const drawTextBg = enter => enter .append('rect') .classed('text-bg', true) .attr('fill', 'white') .attr('transform', 'translate(-60,-45)') .attr('width', 120) .attr('height', 30) .attr('opacity', .8) .attr('visibility', 'hidden'); const drawText = enter => enter .append('text') .attr('transform', 'translate(0,-20)') .attr('text-anchor', 'middle') .text(d => d.abbr); const drawHover = enter => enter .append('circle') .attr('cx', 0) .attr('cy', 0) .attr('r', settings.radius) .attr('fill', 'transparent') .on('mouseenter', onMouseEnter) .on('mouseleave', onMouseLeave) .on('mousemove', onMouseMove); const nEnter = enter => enter .append('g') .attr('transform', `translate(0,${clippedHeight})`) .classed('team', true) .attr('opacity', 0) .call(_enter => _enter .transition() .delay((d, i) => i * 100) .duration(500) .attr('opacity', 1) .attr('transform', getCoord) ) .call(drawCircle) .call(drawMask) .call(drawImage) .call(drawTextBg) .call(drawText) .call(drawHover); const updateText = update => update.select('text').text(d => d.abbr); const updateGroup = update => update .transition() .duration(500) .attr('transform', getCoord); const updateCircle = update => update .select('circle') .transition() .duration(500) .attr('fill', d => colorLose(d.lose)); const updateFilter = update => update.attr('opacity', d => { if (!filterName) return 1; return d.name.toLowerCase().includes(filterName.toLowerCase()) ? 1 : .3; }); const nUpdate = update => update .call(updateGroup) .call(updateFilter) .call(updateText) .call(updateCircle); const nExit = exit => exit.remove(); yAxis = d3 .axisRight(YscaleByWin) .tickSize(clippedWidth + 50) .ticks(8); if (targetAxisX === 'rank') xAxis = d3.axisBottom(XscaleByRank).ticks(_users.length); if (targetAxisX === 'lose') xAxis = d3.axisBottom(XscaleByLose).ticks(_users.length); stageAxisY.call(yAxis); stageAxisX.call(xAxis); stage .selectAll('.team') .data(_users, d => d.name) .join(nEnter, nUpdate, nExit); const regressionModel = regression .regressionLinear() .x((d, i) => i) .y(d => d.win); // console.log('regression model', regressionModel(_users)); const regressionData = regressionModel(_users); // console.log(regressionData); const regressionLine = d3 .line() .x(d => { if (targetAxisX === 'rank') return XscaleByRank(d[0]); if (targetAxisX === 'lose') return XscaleByLose(d[0]); }) .y(d => YscaleByWin(d[1])); const lEnter = enter => enter .append('path') .classed('regression', true) .attr('d', regressionLine) .attr('fill', 'transparent') .attr('visibility', 'hidden'); const lUpdate = update => update.attr('d', regressionLine); stage .selectAll('.regression') .data([regressionData]) .join(lEnter, lUpdate); } d3.select(selectAxisX).on('change', function() { targetAxisX = d3.select(this).property('value'); // console.log(targetAxisX); render(); }); d3.select(btnRandom).on('click', function() { _users = createFakeUsers(_users.length); render(); }); d3.select(selectFilter).on('keyup', function() { // console.log(selectFilter.value); filterName = selectFilter.value; console.log(filterName); render(); }); d3.select(chkRegression).on('change', function() { isRegressionVisible = chkRegression.checked; stage .select('.regression') .attr('visibility', isRegressionVisible ? 'visible' : 'hidden') .raise(); }); render(); div.appendChild(selectFilter); div.appendChild(selectAxisX); div.appendChild(btnRandom); div.appendChild(chkRegression); div.appendChild(labelCheckbox); div.appendChild(svg.node()); return div; }34:[] 2f:{"title":"Visualizing Game Outcomes","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"users = createFakeUsers(30)","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"settings = ({\n width: 1000,\n height: 500,\n margin: 100,\n radius: 15\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"class FakeUserCreator {\n constructor() {\n this.abbrMap = {};\n return this;\n }\n\n createUser(maxSize) {\n const name = faker.internet.userName();\n let abbr = name.slice(0, 2).toUpperCase();\n this.abbrMap[abbr] = (this.abbrMap[abbr] || 0) + 1;\n if (this.abbrMap[abbr] > 1) abbr = `${abbr}${this.abbrMap[abbr]}`;\n const win = parseInt(Math.random() * maxSize, 10);\n const lose = maxSize - win;\n const icon = `${faker.image.imageUrl(150, 150, 'abstract')}?${abbr}`;\n return {\n win,\n lose,\n abbr,\n name,\n icon\n };\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"createFakeUsers = maxSize => {\n const creator = new FakeUserCreator();\n return Array.from({ length: maxSize })\n .map((u, i) => creator.createUser(maxSize))\n .sort((a, b) => (a.win - a.lose > b.win - b.lose ? -1 : 1))\n .map((u, i) => ({ ...u, rank: i + 1 }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"faker = require('https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"regression = require('d3-regression@1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}