2e:null 2f:["$","title",null,{"children":"DOTA2 Ranked matches win/loss difference visualized | Hassan Usman | Observable"}] 34:T1717,chart = { if (matchData.length === 0) { return md`## No data found for player ID ${form.playerid}.` } let { margin, width, height, CANVAS_WIDTH,CANVAS_HEIGHT } = chartDimensions let svg = d3.create("svg") .attr("width", CANVAS_WIDTH) .attr("height", CANVAS_HEIGHT) let mainG = svg .append("g") .attr('width', width) .attr('height', height) .attr('transform', `translate(${margin.left}, ${margin.top})`) .attr('class', 'pointer-events-all') // Labels let xLabel = mainG.append('text') .attr('x', width / 2) .attr('y', height + (margin.bottom / 2)) .attr('font-size', 30) .attr('text-anchor', 'middle') .text('Time') // y-label let yLabel = mainG.append('text') .attr('x', -(height / 2)) .attr('y', -(margin.x / 3.5)) .attr('font-size', 30) .attr('text-anchor', 'middle') .attr('transform', 'rotate(-90)') .text('Win/Loss Difference') // X - axis let x = d3.scaleTime() .domain(d3.extent(matchData, d => d.date)) .range([ 0, width ]); let xz = x let uniqueYears = Object.keys(matchData.reduce((acc, d) => { acc[d.date.getFullYear()] = 1 return acc }, {})).length let xAxis = mainG.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y")).ticks(uniqueYears)); // Y - axis let [yMin, yMax] = d3.extent(matchData, d => d.currentWinCount) let y = d3.scaleLinear() .domain([yMin - 10, yMax + 10]) .range([ height, 0 ]); mainG.append("g") .call(d3.axisLeft(y)); /* gradient */ const gradient = DOM.uid() if (coloredGraph) { mainG.append("linearGradient") .attr("id", gradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", height) .selectAll("stop") .data([ {offset: 0, color: "green"}, {offset: y(0) / height, color: "green"}, {offset: y(0) / height, color: "#e52222"}, {offset: 1, color: "#e52222"} ]) .join("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); } /* Line graph */ let line = (data, x) => d3.line() .x(d => x(d.date)) .y(d => y(d.currentWinCount))(data) let linePath = mainG.append("path") .attr('class', 'linepath') .datum(matchData) .attr("fill", "none") .attr("stroke", coloredGraph ? gradient : '#128ebd') .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line(matchData, x)) /* zoom */ function zoomed() { xz = d3.event.transform.rescaleX(x); linePath.attr("d", line(matchData, xz)); let k = parseInt(d3.event.transform.k, 10) || 1; xAxis.call(d3.axisBottom(xz).tickFormat(d3.timeFormat(k <= 2 ? "%Y" : "%b %Y")).ticks( k <= 2 ? uniqueYears : k > 20 ? 4 : 6)); } const zoom = d3.zoom() .scaleExtent([1, 32]) .extent([[0, 0], [width, height]]) .translateExtent([[0, -Infinity], [width, Infinity]]) .on("zoom", zoomed); svg.call(zoom) .transition() .duration(750) /* Tooltip */ let callout = (g, value, d) => { if (!value) return g.style("display", "none"); g .style("display", null) .style("pointer-events", "none") .style("font", "10px sans-serif"); const path = g.selectAll("path") .data([null]) .join("path") .attr("fill", "#ffffffb0") .attr("stroke", "#ed6a0d") .attr("stroke-width", "1.5"); const text = g.selectAll("text") .data([null]) .join("text") .call(text => text .selectAll("tspan") .data((value + "").split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (d, i) => `${i * 1.4}em`) .style("font-weight", (_, i) => i ? null : "bold") .text(d => d)); { const {x, y, width: w, height: h} = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`) .attr("transform", ""); } g.select('.x-hover-line').attr('y2', height - y(d.currentWinCount)); g.select('.y-hover-line').attr('x2', -xz(d.date)); } const d3bisect = d3.bisector(d => d.date).left; let bisect = mx => { const date = xz.invert(mx); const index = d3bisect(matchData, date, 1); const a = matchData[index - 1]; const b = matchData[index]; return b && (date - a.date > b.date - date) ? b : a; } // Tooltip container const tooltip = mainG.append("g").attr('class', 'pointer-events-all tooltip-group').style("display", "none"); // Tooltip x-axis line tooltip.append('line') .attr('class', 'x-hover-line hover-line') .attr('y1', 0) .attr('y2', height); // Tooltip x-axis line tooltip.append('line') .attr('class', 'y-hover-line hover-line') .attr('x1', 0) .attr('x2', width); mainG.on("touchmove mousemove", function() { const d = bisect(d3.mouse(this)[0]); tooltip .attr("transform", `translate(${xz(d.date)},${y(d.currentWinCount)})`) .call(callout, `${d.currentWinCount} \n ${formatDate(d.date)}`, d); }); // Tooltip listener mainG.on("touchend mouseleave", () => tooltip.call(callout, null)); // Invisible rect to listen mouse move events let rectPadding = 30 mainG.append('rect') .attr('class', 'click-capture') .style('visibility', 'hidden') .attr('x', -rectPadding) .attr('y', -rectPadding) .attr('width', width + (rectPadding * 2)) .attr('height', height + (rectPadding * 2)); /* base line on zero */ mainG.append('line') .attr('class', 'x-base-line') .attr('x1', 0) .attr('x2', width) .attr('y1', y(0)) .attr('y2', y(0)); return svg.node() }35:T548,{ const customCSS = document.createElement("style"); customCSS.innerHTML = ` input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .pointer-events-all { pointer-events: all; } h1, h2, h3, h4, h5, p, div, span, a { max-width: none !important; } .block { display: block; } .inline-block { display: inline-block; } .text-center { text-align: center; } .flex { display: flex } .space-between { justify-content: space-between; } .danger { color: #d43434; } .success { color: #22aa0d; } .neutral { color: #1970fd; } .tooltip circle { fill: #02ffff; stroke: #ff3b00; stroke-width: 2px; } .hover-line { stroke: #777; stroke-width: 2px; stroke-dasharray: 3,3; opacity: 0.7; } .line { fill: none; stroke-width: 3px; stroke: grey; } .x-base-line { stroke: #000; stroke-width: 1px; opacity: 0.2; } .tooltip-group text { font-size: 14px; } .colored-graph-checkbox { display: block; max-width: none; margin: 0 auto; text-align: center; font-size: 1.2rem; cursor: pointer; } .colored-graph-checkbox input[type=checkbox] { margin: -3px 8px 0px 0px; } ` return customCSS; }36:[] 32:{"id":"b26ae5636c1acbb1","slug":"dota2-ranked-matches-win-loss-difference-visualized","title":"DOTA2 Ranked matches win/loss difference visualized","thumbnail":"9d67e1f2e1808980b728e0d975d5b2770585184512c0ae219b8d385038ee95d2","access_level":"public","create_time":"$D2020-08-19T09:49:07.634Z","update_time":"$D2020-12-08T15:43:04.990Z","view_time":null,"first_public_time":"$D2020-08-19T09:49:16.933Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4dcf4e3d80a1f9e2","login":"husseyexplores","name":"Hassan Usman","avatar_url":"https://avatars-next.observableusercontent.com/325b31e172b2b86833606e3a81d6d3ef9b816c9edb7db12f93fdc01103e3189d","tier":"starter_2024"},"version":528,"publish_version":528,"role":null,"authored":false,"authors":[{"type":"individual","id":"b65da4bdcfbb8a76","login":"husseyexplores","name":"Hassan Usman","avatar_url":"https://avatars-next.observableusercontent.com/325b31e172b2b86833606e3a81d6d3ef9b816c9edb7db12f93fdc01103e3189d","tier":null}],"members":[{"type":"individual","id":"b65da4bdcfbb8a76","login":"husseyexplores","name":"Hassan Usman","avatar_url":"https://avatars-next.observableusercontent.com/325b31e172b2b86833606e3a81d6d3ef9b816c9edb7db12f93fdc01103e3189d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"DOTA2 Ranked matches win/loss difference visualized","cells":[{"id":322,"value":"md`# DOTA2 Ranked matches win/loss difference visualized\nStarting from 0, each win gives you +1 point and each loss gives you -1 point. \n\nWith this chart, you can easily visualize how much you've progessed over time.\n\nChart can be zoomed and dragged.\n\nPlayer ID can be provided via URL query param \\`pid\\` as well. Example link:\\n\nhttps://observablehq.com/@husseyexplores/dota2-ranked-matches-win-loss-difference-visualized?pid=149486894\n\n(Data source: https://opendota.com)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"viewof form = observableForm(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1,"value":"{\n if (matchData.length) {\n let diff = Number(playerInfo.difference)\n return html`

${playerInfo.name}

\n Total matches: ${playerInfo.totalMatches}\n Win rate: ${playerInfo.winRate}\n Matches won: ${playerInfo.winsCount}\n Matches lost: ${playerInfo.lossCount}\n Win/loss difference: 0 ? 'success' : 'neutral'}\">${playerInfo.difference}\n

` \n }\n return ''\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"viewof coloredGraph = checkbox({label: 'Colored graph?', value: false, className: 'colored-graph-checkbox' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"form","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"playerInfo = {\n const pInfo = await d3.json(`https://api.opendota.com/api/players/${form.playerid}`)\n const name = pInfo.profile ? pInfo.profile.personaname : ''\n \n let winsCount = matchData.reduce((sum, d) => sum + (d.win ? 1 : 0),0)\n let lossCount = matchData.length - winsCount;\n\n let winRate = ( (winsCount / matchData.length) * 100 ).toFixed(2) + '%';\n \n let difference = winsCount - lossCount;\n \n if (difference>0) {\n difference = `+${difference}`\n }\n \n return { name, winRate, totalMatches: matchData.length, winsCount, lossCount, difference }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"matchData = {\n return d3.json(`https://api.opendota.com/api/players/${form.playerid}/Matches?lobby_type=7`).then(data => {\n let prev = 0;\n const onlyRanked = d => d.lobby_type === 7\n\n return data.reverse().filter(onlyRanked).map(d => {\n let playerTeam = d.player_slot <= 127 ? 'radiant' : 'dire'\n let win = (d.radiant_win && playerTeam === 'radiant') || (!d.radiant_win && playerTeam === 'dire')\n\n let currentWinCount = prev + (win ? 1 : -1)\n\n prev = currentWinCount\n\n return ({ ...d, date: new Date(d.start_time * 1000), win, currentWinCount })\n })\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"chartDimensions = { \n let margin = { top: 50, right: 50, left: 100, bottom: 100 }\n margin.x = margin.left + margin.right\n margin.y = margin.top + margin.bottom\n\n const CANVAS_WIDTH = 980\n const CANVAS_HEIGHT = 700\n\n const width = CANVAS_WIDTH - margin.x\n const height = CANVAS_HEIGHT - margin.y\n\n return { margin, width, height, CANVAS_WIDTH,CANVAS_HEIGHT }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"import {form as observableForm } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"function formatDate(date) {\n return date.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"checkbox = ({label = '', value = false, className ='' } = {}) => {\n let wrapper = html``\n let check = html``\n wrapper.append(check)\n wrapper.append(label || '')\n \n check.checked = value\n \n check.addEventListener('change', (e) => {\n wrapper.value = check.checked\n wrapper.dispatchEvent(new CustomEvent('input'))\n })\n \n // we need to have a starting value\n wrapper.value = check.checked\n \n return wrapper\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"playerId = {\n const urlParams = new URLSearchParams(window.location.search);\n let pid = parseInt(urlParams.get('pid'), 10) || 130691159;\n return pid\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"

Your DOTA2 player ID 👇

${playerInfo.name}