3f:null 40:["$","title",null,{"children":"Chutes and Ladders | Brian Brown | Observable"}] 46:T162a,heatmap = { const gridHeight = 300 const gridWidth = 300 const margin = {top: 5, bottom: 5, left: 10, right: 5} const legendMargin = {top: 5, bottom: 20, left: 10, right: 5} const legendBarHeight = 10 const height = gridHeight + margin.top + margin.bottom + legendMargin.top + legendMargin.bottom + legendBarHeight; const width = gridWidth + margin.left + margin.right + legendMargin.left + legendMargin.right // Create the root SVG dom element. const svg = d3.select(DOM.svg(width, height)) .classed("board-heatmap", true) // Define our color scale. const color = d3.scaleSequential(d3.interpolateWarm) .domain([0, maxPositions]) // Add a 'defs' section to define a linearGradient to visualize our scale. const defs = svg.append('defs'); const linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient"); // Setup the stops on the linear gradient based on the color scale we are using. linearGradient.selectAll("stop") .data(color.ticks().map((t, i, n) => ({ offset: `${100*i/n.length}%`, color: color(t) }))) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); let shadowID; // Define a filter for the drop shadow. defs.append("filter") .attr("id", (shadowID = DOM.uid("shadow")).id) .attr("filterUnits", "userSpaceOnUse") .append("feDropShadow") .attr("dx", 0) .attr("dy", 0) .attr("y", "0") .attr("x", "0") .attr("height", `${gridHeight}`) .attr("width", `${gridWidth}`) .attr("stdDeviation", 3) .attr("flood-color", "black") .attr("flood-opacity", .5) // Define a arrow head marker. defs.append("marker") .attr("id", "red_arrow") .attr("viewBox", "-10 -10 20 20") .attr("markerWidth", 17) .attr("markerHeight", 17) .attr("orient", "auto") .attr("refX", 2) .append("path") .attr("d", "M4,0 L0,-2 L 0,2Z") .attr("fill", "red"); defs.append("marker") .attr("id", "yellow_arrow") .attr("viewBox", "-10 -10 20 20") .attr("markerWidth", 17) .attr("markerHeight", 17) .attr("orient", "auto") .attr("refX", 2) .append("path") .attr("d", "M4,0 L0,-2 L 0,2Z") .attr("fill", "yellow"); const x = d3.scaleBand() .range([0, gridWidth]) .domain(d3.range(1, BOARD_EDGE_SIZE + 1)) .padding(0.01) // const xAxis = d3.axisTop(x) // svg.append('g').call(xAxis) const y = d3.scaleBand() .range([gridHeight, 0]) .domain(d3.range(1, BOARD_EDGE_SIZE + 1)) .padding(0.01) // const yAxis = d3.axisLeft(y) // svg.append('g').call(yAxis) // Transform for the heatmap. const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) // Draw heatmap colored rectangles. g.selectAll('rect') .data(heatmapData) .enter().append('rect') // Attributes for rounded rectangles. //.attr("rx", 4) //.attr("ry", 4) .attr('x', d => x(d.x)) .attr('y', d => y(d.y)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .attr('fill', d => color(d.value)) .append('title') .text((d) => `${d.value}\n x: ${d.x}\n y: ${d.y}\n name: ${d.name}`) // Draw the text square position labels. const fontSize = y.bandwidth() * 0.3; g.selectAll('text') .data(heatmapData) .enter().append('text') .attr("x", d => x(d.x) + x.bandwidth() * 0.1) .attr("y", d => y(d.y) + y.bandwidth() * 0.9) .attr("text-anchor", "start") .style("font-size", `${fontSize}px`) .text((d) => `${d.name}`); // Draw all of the chutes. const chutesGroup = g.append("g").attr('class', 'chutes'); chutesGroup.selectAll('line') .data(boardVizData.chutes) .enter().append('line') .attr('x1', d => x(d.start.x) + x.bandwidth() * 0.7) .attr('y1', d => y(d.start.y) + y.bandwidth() * 0.8) .attr('x2', d => x(d.end.x) + x.bandwidth() * 0.7) .attr('y2', d => y(d.end.y) + y.bandwidth() * 0.2) .attr("style", `filter:${shadowID}`) .attr("marker-end", "url(#red_arrow)") .append('title') .text((d) => `Chute from ${d.start.name} to ${d.end.name}`) // Draw all of the ladders. const laddersGroup = g.append("g").attr('class', 'ladders') laddersGroup.selectAll('line') .data(boardVizData.ladders) .enter().append('line') .attr('x1', d => x(d.start.x) + x.bandwidth() * 0.5) .attr('y1', d => y(d.start.y) + y.bandwidth() * 0.2) .attr('x2', d => x(d.end.x) + x.bandwidth() * 0.7) .attr('y2', d => y(d.end.y) + y.bandwidth() * 0.8) .attr("style", `filter:${shadowID}`) .attr("marker-end", "url(#yellow_arrow)") .append('title') .text((d) => `Ladder from ${d.start.name} to ${d.end.name}`) // Draw the gradient scale at the bottom. const legendGroup = g.append("g") .attr("transform", `translate(${legendMargin.left - margin.left}, ${height - legendMargin.bottom - legendBarHeight })`) legendGroup.append("rect") .attr("width", gridWidth) .attr("height", legendBarHeight) .style("fill", "url(#linear-gradient)") const axisScale = d3.scaleLinear() .domain(color.domain()) .range([0, width]) // Draw the ticks on the gradient scale at the bottoom. legendGroup.classed("axis axis--bottom", true) //.attr("transform", `translate(0, ${height - legendMargin.bottom - legendBarHeight})`) .call(d3.axisBottom(axisScale) .ticks(5) .tickSize(legendBarHeight)) .select(".domain") .remove() return svg.node(); }47:T67a,function buildBoard() { let board = {nodes: [], numNodes: BOARD_EDGE_SIZE * BOARD_EDGE_SIZE, maxMove: 6}; for (var n = 0; n < board.numNodes; ++n) { board.nodes[n] = {name: (n + 1), out: (n + 1), hasConnection: false}; } // Add Ladders board.nodes[0].hasConnection = true; board.nodes[0].out = 37; board.nodes[3].hasConnection = true; board.nodes[3].out = 13; board.nodes[8].hasConnection = true; board.nodes[8].out = 30; board.nodes[20].hasConnection = true; board.nodes[20].out = 41; board.nodes[27].hasConnection = true; board.nodes[27].out = 83; board.nodes[35].hasConnection = true; board.nodes[35].out = 43; board.nodes[50].hasConnection = true; board.nodes[50].out = 66; board.nodes[70].hasConnection = true; board.nodes[70].out = 90; board.nodes[79].hasConnection = true; board.nodes[79].out = 99; // Add Chutes board.nodes[15].hasConnection = true; board.nodes[15].out = 5; board.nodes[46].hasConnection = true; board.nodes[46].out = 25; board.nodes[48].hasConnection = true; board.nodes[48].out = 10; board.nodes[55].hasConnection = true; board.nodes[55].out = 52; board.nodes[61].hasConnection = true; board.nodes[61].out = 18; board.nodes[63].hasConnection = true; board.nodes[63].out = 59; board.nodes[86].hasConnection = true; board.nodes[86].out = 23; board.nodes[92].hasConnection = true; board.nodes[92].out = 72; board.nodes[94].hasConnection = true; board.nodes[94].out = 74; board.nodes[97].hasConnection = true; board.nodes[97].out = 77; return board; }48:[] 44:{"id":"ce043cf532459e04","slug":"chutes-and-ladders","title":"Chutes and Ladders","thumbnail":"b428cb723a2a0369cca880365640de42f3c89ebe334483a7df30d957d1b0baea","access_level":"public","create_time":"$D2020-04-09T02:36:36.333Z","update_time":"$D2020-04-13T02:48:45.228Z","view_time":null,"first_public_time":"$D2020-04-09T04:56:49.651Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"24a435c386a8ec05","login":"briangbrown","name":"Brian Brown","avatar_url":"https://avatars-next.observableusercontent.com/c77ee93fcdc44fdff052be3b5f6c6997f62f5ce8239856746e62a26df556f1f9","tier":"starter_2024","bio":"","following":false},"version":607,"publish_version":607,"role":null,"authored":false,"authors":[{"type":"individual","id":"001891b881f6c0e4","login":"briangbrown","name":"Brian Brown","avatar_url":"https://avatars-next.observableusercontent.com/c77ee93fcdc44fdff052be3b5f6c6997f62f5ce8239856746e62a26df556f1f9","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"001891b881f6c0e4","login":"briangbrown","name":"Brian Brown","avatar_url":"https://avatars-next.observableusercontent.com/c77ee93fcdc44fdff052be3b5f6c6997f62f5ce8239856746e62a26df556f1f9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Chutes and Ladders","cells":[{"id":0,"value":"md`# Chutes and Ladders\n\nThis notebook calculates the distribution of the number of moves to \"win\" the game Chutes and Ladders.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"html` $\"Smiley$ `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"gameSimulation = playGames(numGames);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"viewof numGames = slider({\n min: 10, \n max: 100000, \n step: 10, \n value: 10000, \n title: \"Number of Games\", \n description: \"Number of games used in the simulation.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"histogram","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"viewof binWidth = slider({\n min: 1, \n max: 10,\n step: 1,\n value: 5,\n description: \"Bin width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`TODO: Not sure how to scale the histogram as a % of games.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md`## Likelyhood of landing on each square of the board\n\nThe board is colored based on the likelyhood of landing on that square in the coarse of a game. The chutes and ladders are drawn as arrows for reference.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`## Stats about the simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`\nThe minimum number of moves to win was ${minNumMoves}.
\nThe maximum number of moves to win was ${maxNumMoves}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`

\n\n--- \n\n## Appendix\n\n*A few cells used to implement this notebook lie below.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function playGame(board) {\n let moveNumber = 0;\n let position = -1;\n let positionsUsed = new Array(board.numNodes).fill(0)\n let won = false;\n \n while (won != true && moveNumber < MAX_MOVES) {\n // Move to the next position.\n position = position + nextMove(board.maxMove);\n // Keep track of the position visited.\n if (position < board.numNodes) {\n positionsUsed[position] = positionsUsed[position] + 1;\n }\n if (position >= (board.numNodes - 1)) {\n won = true;\n } else {\n if (board.nodes[position].hasConnection) {\n // If there is a chute or ladder move to the new position.\n position = board.nodes[position].out;\n // Keep track of the position visited.\n positionsUsed[position] = positionsUsed[position] + 1;\n }\n }\n moveNumber = moveNumber + 1;\n }\n \n return {numMovesToWin: moveNumber, positionsUsed: positionsUsed};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"function playGames(numGames) {\n let numMoves = [];\n let board = buildBoard();\n let positionsUsed = new Array(board.numNodes).fill(0)\n for (let n = 0; n < numGames; ++n) {\n let gameState = playGame(board);\n numMoves[n] = gameState.numMovesToWin;\n positionsUsed = gameState.positionsUsed.map((a, i) => a + positionsUsed[i]);\n }\n // Normalize positionsUsed\n positionsUsed = positionsUsed.map(v => v / numGames);\n return {numMoves: numMoves, positionsUsed: positionsUsed, board: board};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// Returns an integer between 1 and max inclusive.\nfunction nextMove(max) {\n return Math.floor(Math.random() * Math.floor(max)) + 1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"function getXYName(n) {\n // 1 based Y index.\n let y = Math.floor((n / BOARD_EDGE_SIZE) % BOARD_EDGE_SIZE) + 1;\n // 1 based X index that counts left to right then right to left on the next row.\n let x = ((n % BOARD_EDGE_SIZE) + 1);\n if ((y % 2) == 0) {\n x = (BOARD_EDGE_SIZE + 1) - x;\n }\n return {x: x, y: y, name: n + 1};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"md `### Visualizable Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"numMovesToWin = gameSimulation.numMoves;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"positionsUsedToWin = gameSimulation.positionsUsed;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"heatmapData = {\n let heatmapData = [];\n \n for (var n = 0; n < positionsUsedToWin.length; n++) {\n let boardCoordinate = getXYName(n);\n heatmapData[n] = {x: boardCoordinate.x,\n y: boardCoordinate.y,\n name: n + 1,\n value: Math.round((positionsUsedToWin[n] + Number.EPSILON) * 1000) / 1000};\n }\n return heatmapData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"boardVizData = {\n const board = gameSimulation.board;\n let viz = {ladders: [], chutes: []};\n for (var i = 0; i < board.numNodes; ++i) {\n let node = board.nodes[i];\n if (node.hasConnection) {\n if (node.out > i) {\n viz.ladders.push({start: getXYName(i), end: getXYName(node.out)});\n } else {\n viz.chutes.push({start: getXYName(i), end: getXYName(node.out)});\n }\n }\n }\n return viz;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"histogramData = Object.assign(numMovesToWin, {x: 'Number of Moves', y: 'Number of games'});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"// Height of the histogram.\nHEIGHT = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"BOARD_EDGE_SIZE = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"MAX_MOVES = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"minNumMoves = Math.min(...numMovesToWin);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"maxNumMoves = Math.max(...numMovesToWin);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"maxPositions = Math.max(...positionsUsedToWin);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"minPositions = Math.min(...positionsUsedToWin);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"md `### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"import {chart as histogram} with {histogramData as data, HEIGHT as height, binWidth} from \"@briangbrown/histogram\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"// import {slider} from '@jheer/dom-utilities'\nimport {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"