3e:null 3f:["$","title",null,{"children":"Metro Stations as Network Diagrams | Ruzgar Imski | Observable"}] 45:T1c88,metroStaions = { const gridSize = 8; const textSize = 10; const customWidth = 800; // Use a multiple of gridSize for best results. const customHeight = 512; // Use a multiple of gridSize for best results. const arrWidth = customWidth / gridSize; const arrHeight = customHeight / gridSize; const gridVector = new Victor(gridSize, gridSize); const paddingGrids = 32; const lineAvoidance = 4; const lineSelfAvoidance = -2; // Make it cheaper for a line to double back on itself. const stationAvoidance = 3; const stationRadius = 2; const octolinearPathing = false; const useOrderedLinks = false; const useStringPulling = true; const stringPullingLookahead = 16; const stringPullingShortcutThreshold = 0; const drawLines = true; const drawStations = true; const drawStationNames = false; // const svg = d3.create('svg').attr('viewBox', [0, 0, customWidth, customHeight]); //tooltip hover const container = d3.select( html`

${tooltipTemplate}

` ); const tooltipDiv = container.select(".tooltip"); const svg = container.append("svg").attr('viewBox', [0, 0, customWidth, customHeight]); // const svg2 = container.append("svg").attr("viewBox", `0 0 ${width} ${height}`); // Create links / nodes from simulationData. const nodes = simulationData.stations.map(d => Object.create(d)); var linkPairs = []; for (let lineIndex = 0; lineIndex < simulationData.lines.length; lineIndex++) { for (let start = 0; start < simulationData.lines[lineIndex].stations.length - 1; start++) { if (useOrderedLinks) { // Only create links between stations in the order they are listed. linkPairs.push({ source: simulationData.lines[lineIndex].stations[start], target: simulationData.lines[lineIndex].stations[start + 1] }); } else { // Create links between every station in every line. for (let end = start; end < simulationData.lines[lineIndex].stations.length; end++) { linkPairs.push({ source: simulationData.lines[lineIndex].stations[start], target: simulationData.lines[lineIndex].stations[end] }); } } } } const links = linkPairs.map(d => Object.create(d)); // Run a simulation until it settles. const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()); simulation.restart(); for (let i = 0; i < 1000; i++) { simulation.tick(); if (simulation.alpha() < 0.005) { break; } } simulation.stop(); // Create a bounding box around the resulting nodes. var top = Number.MAX_VALUE; var bottom = 0; var left = Number.MAX_VALUE; var right = 0; for (var i = 0; i < nodes.length; i++) { var d = nodes[i]; if (d.y > bottom) bottom = Math.round(d.y); if (d.y < top) top = Math.round(d.y); if (d.x > right) right = Math.round(d.x); if (d.x < left) left = Math.round(d.x); } top -= paddingGrids; bottom += paddingGrids; left -= paddingGrids; right += paddingGrids; // Create a cost array. const arr = new Array2D(arrWidth, arrHeight, 1); arr.defaultValue = 1000; // Place each station within the cost array. for (var i = 0; i < nodes.length; i++) { var d = nodes[i]; let index = simulationData.stations.findIndex(function(station) {return station.id == d.id}); let x = Math.round((d.x - left) / (right - left) * arrWidth); let y = Math.round((d.y - top) / (bottom - top) * arrHeight); simulationData.stations[index].position = new Victor(x, y); arr.incrementBox(simulationData.stations[index].position, stationRadius, stationAvoidance, true); } // This is the expensive part. Generate curves to define each line. for (var i = 0; i < simulationData.lines.length; i++) { var line = simulationData.lines[i]; var stationsOnLine = []; for (var j = 0; j < line.stations.length; j++) { var station = simulationData.stations.find(function(station) { return station.id == line.stations[j] }); stationsOnLine.push(station); } var antColony = new AntColonyOptimization(stationsOnLine) var lineSegments = antColony.simulateColony().path; // Pathfind for each of the paths in this line. const curve = d3.line().curve(d3.curveBundle.beta(1)) var allPointsOnLine = []; for (var j = 0; j < lineSegments.length; j++) { let start = simulationData.stations.find(function(station) { return station.id == lineSegments[j].source }); let end = simulationData.stations.find(function(station) { return station.id == lineSegments[j].target }); try { let pointsOnSegment = arr.pathfind(start.position, end.position, octolinearPathing); // Optimize the path a little bit before continuing. var optimizedPoints = pointsOnSegment; if (useStringPulling) { optimizedPoints = arr.stringPull(pointsOnSegment, stringPullingLookahead, stringPullingShortcutThreshold); } arr.incrementList(optimizedPoints, lineSelfAvoidance, true); for (let i = 0; i < optimizedPoints.length; i++) { allPointsOnLine.push(optimizedPoints[i].clone()); optimizedPoints[i] = optimizedPoints[i].multiply(gridVector).toArray(); } // Go ahead and draw the curve while we're looping through the line. if (drawLines) { svg .append('path') .attr('d', curve(optimizedPoints)) .attr('stroke', line.color) .attr('stroke-width', 6) .attr('fill', 'none') .attr('stroke-linecap', 'round'); } } catch(e) { console.warn("Pathing failed between", start.name, "and", end.name); } } arr.incrementList(allPointsOnLine, lineAvoidance, true); } // Draw all of the stations and station names. for (var i = 0; i < simulationData.stations.length; i++) { var station = simulationData.stations[i]; if (drawStations) { svg.append('circle') .attr('fill', '#ffffff') .attr('stroke', '#2c2c2c') .attr('r', 8) .attr('stroke-width', 4) .attr('cx', station.position.x * gridVector.x) .attr('cy', station.position.y * gridVector.y) .data([station]) .call(tooltip, tooltipDiv); // svg2.append("g") // .attr("transform", `translate(${margin.left}, ${margin.top})`) // .selectAll("circle") // .data(simulationData) // .join("circle") // .attr("station", d => d.stations) // .attr("line", d => d.lines) // .attr("r", 5) // .attr("fill", "#333") // .call(tooltip, tooltipDiv); if (drawStationNames) { svg.append('text') .attr('x', station.position.x * gridVector.x) .attr('y', station.position.y * gridVector.y + 16) .attr('dy', '.35em') .attr('text-anchor', 'middle') .attr('font-family', 'helvetica') .attr('font-weight', 'bold') .attr('font-size', textSize) .attr('fill', '#2c2c2c') .text(station.name.toUpperCase()); } } } return container.node(); }46:Tab1,simulationData= JSON.parse('{ "stations": [ { "id": 1, "name": "Shangshuangtang" }, { "id": 2, "name": "Zongxin Square " }, { "id": 3, "name": "Huangtuling" }, { "id": 4, "name": "Houjiatang" }, { "id": 5, "name": "Wuyi Square" }, { "id": 6, "name": "Peiyuan Bridge" }, { "id": 7, "name": "Wenchang Pavilion" }, { "id": 8, "name": "Kaifu District Government" }, { "id": 9, "name": "end of line1" }, { "id": 10, "name": "East of Meixi Lake" }, { "id": 11, "name": "East Lake Park" }, { "id": 12, "name": "Yingbing Road" }, { "id": 13, "name": "Changsha Railway Station" }, { "id": 14, "name": "Wanjiali Square" }, { "id": 15, "name": "Renmin East Road" }, { "id": 16, "name": "Shawan Park" }, { "id": 17, "name": "Guangda" }, { "id": 18, "name": "Start of line3" }, { "id": 19, "name": "Shantang" }, { "id": 20, "name": "Fubu River" }, { "id": 21, "name": "Chaoyang Village" }, { "id": 22, "name": "North Yuehu Park" }, { "id": 23, "name": "Guangsheng" }, { "id": 24, "name": "Start of line4" }, { "id": 25, "name": "Guanziling" }, { "id": 26, "name": "Third Xiangya Hospital" }, { "id": 27, "name": "Guitang" }, { "id": 28, "name": "Changsha South Railway Station" }, { "id": 29, "name": "Dujiaping" }, { "id": 30, "name": "end of line4" }, { "id": 31, "name": "start of line5" }, { "id": 32, "name": "Maozhutang" }, { "id": 33, "name": "Furong District Government" }, { "id": 34, "name": "Shuidu River" }, { "id": 35, "name": "end of line5" }, { "id": 36, "name": "Xiejia Bridge" }, { "id": 37, "name": "Zhongtang" }, { "id": 39, "name": "Huanghua Airport" } ], "lines": [ { "color": "#f38051", "name": "Line1", "stations": [1,2,3,4,5,6,7,8,9] }, { "color": "#6fcda9", "name": "Line2", "stations": [10,11,5,12,13,14,15,16,17] }, { "color": "#d6d6d6", "name": "Line3-1", "stations": [18,19] }, { "color": "#90ba49", "name": "Line3", "stations": [19,20,4,21,13,22,23] }, { "color": "#d6d6d6", "name": "Line4-1", "stations": [24,25] }, { "color": "#bbd5f6", "name": "Line4-2", "stations": [25,26,11,20,3,27,16,28,17,29] }, { "color": "#d6d6d6", "name": "Line4-3", "stations": [29,30] }, { "color": "#d6d6d6", "name": "Line5-1", "stations": [31,2] }, { "color": "#d6d6d6", "name": "Line5-2", "stations": [2,32] }, { "color": "#ffeb99", "name": "Line5-3", "stations": [32,27,33,14,22,34] }, { "color": "#d6d6d6", "name": "Line5-4", "stations": [34,35] }, { "color": "#466bd1", "name": "Line6", "stations": [36,37,26,6,12,21,33,15,39] } ] }');47:T1ab3,class Array2D { constructor(width, height, defaultValue) { this.arr = []; this.width = width; this.height = height; this.defaultValue = defaultValue; for (let x = 0; x < width; x++) { this.arr[x] = []; for (let y = 0; y < height; y++) { this.arr[x][y] = defaultValue; } } } // start and end are both Victors, since we'll need some vector math. pathfind(start, end, octolinear) { var frontier = new PriorityQueue(true); frontier.push(start.clone(), 0); var cameFrom = {}; var costSoFar = {}; cameFrom[start] = null; costSoFar[start] = 0; var bestHeuristicSoFar = Number.MAX_VALUE; var bestPositionSoFar = start; var currentPosition; const MAX_ROUNDS = 4096; var rounds = 0; while (frontier.size() > 0 && rounds < MAX_ROUNDS) { rounds += 1; currentPosition = frontier.pop(); if (currentPosition.toString() == end.toString()) break; var directions = [ currentPosition.clone().add(Victor(-1, 0)), currentPosition.clone().add(Victor(1, 0)), currentPosition.clone().add(Victor(0, -1)), currentPosition.clone().add(Victor(0, 1)), ]; if (octolinear) { directions = directions.concat([ currentPosition.clone().add(Victor(-1, -1)), currentPosition.clone().add(Victor(1, 1)), currentPosition.clone().add(Victor(1, -1)), currentPosition.clone().add(Victor(-1, 1)) ]); } for (let i = 0; i < directions.length; i++) { var direction = directions[i]; var directionCost = Math.max(this.getv(direction, true), 1); if (directionCost < 1000) { // Stations and walls have a value of 1000. var newCost = costSoFar[currentPosition] + (directionCost); if (!costSoFar.hasOwnProperty(direction) || newCost < costSoFar[direction]) { costSoFar[direction] = newCost; var heuristic = this._getPathfindingHeuristic(direction, end); if (heuristic < bestHeuristicSoFar) { bestHeuristicSoFar = heuristic bestPositionSoFar = direction } var priority = newCost + heuristic // lowest is better. frontier.push(direction.clone(), priority); cameFrom[direction] = currentPosition; } } } } return this._backtracePath(cameFrom, bestPositionSoFar); } _getPathfindingHeuristic(position, end) { return Math.abs(position.x - end.x) + Math.abs(position.y - end.y); } _backtracePath(cameFrom, end) { var currentPosition = end; var path = [end]; const MAX_ROUNDS = 1024; var rounds = 0; while (cameFrom[currentPosition] != null && rounds < MAX_ROUNDS) { rounds++ var nextPosition = cameFrom[currentPosition]; path.unshift(nextPosition); currentPosition = nextPosition; } return path; } stringPull(path, lookahead, threshold) { var pulledPath = [...path]; for (var i = 0; i < pulledPath.length - 1; i++) { var maxLookaheadIndex = Math.min(path.length - 1, i + lookahead); for (var j = maxLookaheadIndex; j > i + 1; j--) { if (this._isCardinalTo(pulledPath[i], pulledPath[j])) { var currentPathSegment = pulledPath.slice(i, j+1); var straightPathSegment = this._getStraightPath(pulledPath[i], pulledPath[j]); if (this._getPathCost(straightPathSegment) < this._getPathCost(currentPathSegment) + threshold) { // Replace currentPathSegment with straightPathSegment. Array.prototype.splice.apply(pulledPath, [i, currentPathSegment.length].concat(straightPathSegment)); break; } } } } return pulledPath; } _isCardinalTo(positionA, positionB) { if (typeof positionA === 'undefined' || typeof positionB === 'undefined') return false; if (positionA.x == positionB.x || positionA.y == positionB.y) { return true; } if (Math.abs(positionA.x - positionB.x) == Math.abs(positionA.y - positionB.y)) { return true; } return false; } _getStraightPath(start, end) { var newPath = []; var currentPosition = start.clone(); var round = 0; const MAX_ROUNDS = 20; while (currentPosition.toString() != end.toString() && round < MAX_ROUNDS) { round++; // Step directly toward end from start. newPath.push(currentPosition.clone()); var xDiff = Math.max(Math.min(end.x - currentPosition.x, 1), -1); var yDiff = Math.max(Math.min(end.y - currentPosition.y, 1), -1); var diff = new Victor(xDiff, yDiff); currentPosition.add(diff); } newPath.push(currentPosition.clone()); return newPath; } _getPathCost(path) { var cost = 0; for (var i = 0; i < path.length; i++) { cost += this.getv(path[i], true); } return cost; } getv(vector, safe) { if (!safe || this.isValidPosition(vector)) { return this.arr[Math.round(vector.x)][Math.round(vector.y)]; } else return this.defaultValue; } setv(vector, value, safe) { if (!safe || this.isValidPosition(vector)) { this.arr[Math.round(vector.x)][Math.round(vector.y)] = value; } } incrementRadius(vector, radius, value) { for (var x = vector.x - radius; x < vector.x + radius; x++) { for (var y = vector.y - radius; y < vector.y + radius; y++) { let position = new Victor(x, y); let distance = Math.max(vector.clone().subtract(position).length(), 1); if (this.isValidPosition(vector) && distance < radius) { this.incrementv(position, Math.floor(value/distance), true); } } } } incrementBox(vector, radius, value) { for (var x = vector.x - radius; x < vector.x + radius; x++) { for (var y = vector.y - radius; y < vector.y + radius; y++) { let position = new Victor(x, y); if (this.isValidPosition(vector)) { this.incrementv(position, value, true); } } } } setList(vectors, value, safe) { for (let i = 0; i < vectors.length; i++) { this.setv(vectors[i], value, safe); } } incrementv(vector, value, safe) { this.setv(vector, this.getv(vector, safe) + value, safe); } incrementList(vectors, value, safe) { for (let i = 0; i < vectors.length; i++) { this.setv(vectors[i], this.getv(vectors[i], safe) + value, safe); } } isValidPosition(vector) { return vector.x > 0 && vector.x < this.width && vector.y > 0 && vector.y < this.height; } print() { var value = ""; for (let y = 0; y < this.height; y++) { for (let x = 0; x < this.width; x++) { value += String(this.arr[x][y]); } value += "\n"; } return value; } }48:Ta20,class AntColonyOptimization { constructor(stations) { this.stations = new Object(); for (var i = 0; i < stations.length; i++) { this.stations[stations[i].id] = stations[i]; } this.pheromoneMatrix = new Matrix2D(Object.keys(this.stations), 1); this.costMatrix = new Matrix2D(Object.keys(this.stations), 0); for (var i = 0; i < stations.length; i++) { for (var j = 0; j < stations.length; j++) { let movementCost = stations[i].position.clone().subtract(stations[j].position).length(); this.costMatrix.set(stations[i].id, stations[j].id, movementCost); } } } getRecommendedColonySize() { const MAX_ANTS = 120; const MIN_ANTS = 4; return Math.floor(Math.max(Math.min(Object.keys(this.stations).length * 8, MAX_ANTS), MIN_ANTS)); } simulateColony(ants) { if (typeof ants === 'undefined') ants = this.getRecommendedColonySize(); var bestAttempt = { cost: Number.MAX_VALUE, path: [] }; for (let i = 0; i < ants; i++) { let attempt = this.simulateAnt(); this.applyPheromone(attempt.path); if (attempt.cost < bestAttempt.cost) { bestAttempt = attempt; } } return bestAttempt; } simulateAnt() { var unvisitedStations = [...Object.keys(this.stations)]; var startIndex = Math.floor(seededRandom() * unvisitedStations.length); var currentLocation = unvisitedStations.splice(startIndex, 1)[0]; // A station ID. var cost = 0; var pathSoFar = []; for (var i = 0; i < Object.keys(this.stations).length -1; i++) { let newId = this.pickStation(unvisitedStations, currentLocation); cost += this.costMatrix.get(currentLocation, newId); pathSoFar.push({ source: currentLocation, target: newId }); currentLocation = unvisitedStations.splice(unvisitedStations.findIndex((s) => {return s == newId}), 1)[0]; } return { path: pathSoFar, cost: cost }; } pickStation(pickFrom, currentLocation) { var bag = new WeightedBag(); for (var i = 0; i < pickFrom.length; i++) { let cost = this.costMatrix.get(currentLocation, pickFrom[i]); let pheromone = this.pheromoneMatrix.get(currentLocation, pickFrom[i]); let weight = pheromone / cost; bag.addEntry(pickFrom[i], weight); } var target = bag.getRandom(); return target; } applyPheromone(path) { for (var i = 0; i < path.length; i++) { let step = path[i]; this.pheromoneMatrix.increment(step.source, step.target, 1); this.pheromoneMatrix.increment(step.target, step.source, 1); } } }49:T67e,tooltip = (selectionGroup, tooltipDiv) => { selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // show/reveal the tooltip, set its contents, // style the element being hovered on showTooltip(); setContents(d3.select(this).datum(), tooltipDiv); setStyle(d3.select(this)); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); // add the left & top margin values to account for the SVG g element transform setPosition(mouseX + margin.left, mouseY + margin.top); } function handleMouseleave() { // do things like hide the tooltip // reset the style of the element being hovered on hideTooltip(); resetStyle(d3.select(this)); } function showTooltip() { tooltipDiv.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < height / 2 ? `${mouseY - MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > width / 2 ? `${width - mouseX - MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > height / 2 ? `${height - mouseY - MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < width / 2 ? `${mouseX - MOUSE_POS_OFFSET}px` : "initial" ); } }4a:[] 43:{"id":"68493ec99dd38b07","slug":null,"title":"Metro Stations as Network Diagrams","thumbnail":"0bce2e44e12f5935a656310b5dbd0d382e76f85616730c3624a76b1a3072f9cb","access_level":"public","create_time":"$D2024-01-16T07:11:06.684Z","update_time":"$D2024-01-16T07:11:06.684Z","view_time":null,"first_public_time":"$D2024-01-16T07:11:06.684Z","has_unpublished_edits":null,"fork":{"id":"4007c5f2a3b97d09","slug":null,"title":"Metro Stations as Network Diagrams","owner":{"id":"0a8b950203491c0f","login":"ixd-sheridan","name":"IXD Sheridan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"62eaf79b101c4021","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":"starter_2024","bio":"","following":false},"version":1261,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Metro Stations as Network Diagrams","cells":[{"id":0,"value":"\nmd`\n# Metro Stations as Network Diagrams\n## A naive and computationally expensive approach\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"Victor = require('https://bundle.run/victor@1.1.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"// Returns the lowest priority item first.\nclass PriorityQueue {\n constructor() {\n this.elements = [];\n }\n \n pop() {\n var nextElement = this.elements.shift();\n return nextElement.v;\n }\n\n // Sort by priority on element insertion.\n push(value, priority) {\n var newElement = { v: value, p: priority };\n for (let i = 0; i < this.elements.length; i++) {\n if (newElement.p < this.elements[i].p) {\n this.elements.splice(i, 0, newElement);\n return\n }\n }\n this.elements.push(newElement);\n }\n \n size() {\n return this.elements.length; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"class WeightedBag {\n constructor() {\n this.elements = [];\n this.totalWeight = 0;\n }\n \n getRandom() {\n var selection = seededRandom() * this.totalWeight;\n for (let i = 0; i < this.elements.length; i++) {\n if (selection < this.elements[i].w) {\n return this.elements[i].v;\n } else {\n selection -= this.elements[i].w;\n }\n }\n return undefined;\n }\n\n addEntry(value, weight) {\n if (weight > 100) weight = 100;\n var newElement = { v: value, w: weight };\n this.totalWeight += weight;\n this.elements.push(newElement);\n }\n \n size() {\n return this.elements.length; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"class Matrix2D {\n constructor(options, defaultValue) {\n this.defaultValue = defaultValue;\n this.dict = new Object();\n for (var x = 0; x < options.length; x++) {\n this.dict[options[x]] = new Object();\n for (var y = 0; y < options.length; y++) {\n this.dict[options[x]][options[y]] = this.defaultValue;\n }\n }\n }\n \n set(optionA, optionB, value) {\n this.dict[optionA][optionB] = value;\n }\n \n get(optionA, optionB) {\n return this.dict[optionA][optionB];\n }\n \n increment(optionA, optionB, value) {\n this.dict[optionA][optionB] += value;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"SeedRandom = require('seedrandom@3.0.5/seedrandom.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"seededRandom = new SeedRandom('SeedGoesHere');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1178,"value":"tooltipId = DOM.uid().id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"tooltipTemplate = html`

\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1187,"value":"function setContents(datum, tooltipDiv) {\n // customize this function to set the tooltip's contents however you see fit\n tooltipDiv\n .selectAll(\"p\")\n .data(Object.entries(datum))\n .join(\"p\")\n .filter(([key, value]) => value !== null && value !== undefined)\n .html(\n ([key, value]) =>\n `${key}: ${\n typeof value === \"object\" ? value.toLocaleString(\"en-US\") : value\n }`\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"function resetStyle(selection) {\n selection.attr(\"fill\", \"#ffffff\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":"function setStyle(selection) {\n selection.attr(\"fill\", \"#5783ec\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"tooltipStyles = htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"// padding between the tooltip and mouse cursor\nMOUSE_POS_OFFSET = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"height = 512","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"