2e:null 2f:["$","title",null,{"children":"Autonomous Vehicles - a solution to traffic? | Kavya Rai | Observable"}] 34:T479,title = md` # Autonomous Vehicles - a solution to traffic? This project was inspired by [CGP Grey's video](https://www.youtube.com/watch?v=iHzzSao6ypE) on the simple solution to traffic. In their video, they point out that a big reason behind city traffic and gridlock is not because of the increase in the number of cars, but the * **lack of coordination** *. *"We are monkey drivers with short attention spans" * In theory, if drivers would modify their road habits and learn to coordinate and accelerate simultaneously, easy driving would be ensured. However, relying on humans to change their behavior may not be the most effective solution. * **Introducing a structurally systematized solution that is less dependant on humans would work more efficiently.** * This is where autonomous vehicles (AV) come into the picture. AVs have the ability to observe and maintain their speed to their environment. They can easily be programmed to accelerate simultaneously to surrounding cars. This project attempts to simulate the difference in the outcome when AV's are introduced into an environment that consists only of manually-driven cars. `35:T826,evolveEnvironment = { let count = 0; while (count < evolveEnvironmentGenerations) { //iterate through the cells to determine if each should live or die for (let i = 0; i < caWorld.length; i++) { //clarifying variable let currentCell = caWorld[i]; let neighborKeys = ['t', 'r', 'l', 'b', 'tl', 'tr', 'bl', 'br']; let allNeighbors = []; for (let j = 0; j < neighborKeys.length; j++) { let currentNB = neighborKeys[j]; allNeighbors.push(caWorld[currentCell[currentNB]]); } //clear out undefined neighbors let validNeighbors = allNeighbors.filter(function(x) { return x !== undefined; }); let neighborSum = validNeighbors .map(item => item.wall) .reduce((prev, next) => prev + next); console.log(neighborSum); // is the cell dead? if (currentCell.wall == 0) { //the cell is dead if (neighborSum == 3) { //if the cell is dead with three live neighbors, become alive currentCell.survive = 1; } else { //otherwise stay dead currentCell.survive = 0; } } else { //the cell is alive... if (neighborSum == 2 || neighborSum == 3) { //the living cell has 2 or 3 live neighbors, so it survives currentCell.survive = 1; } else { //the cell dies currentCell.survive = 0; } } } //replace the alive property with survive for (let i = 0; i < caWorld.length; i++) { let currentCell = caWorld[i]; currentCell.wall = currentCell.survive; } //update the visualization with a data join d3.select('#mainSVG') .selectAll('.automaton') .data(caWorld) .transition() .duration(generationalDelay) .delay((d, i) => i / 10) .attr('fill', function(d) { if (d.wall == 1) { return wallColor; } else { return roadColor; } }); count++; await Promises.delay(generationalDelay); yield caWorld; } }36:T56f,simData = { let avCount = carCount * avRatio; let nonAVCount = carCount * (1 - avRatio); let cars = []; for (let j = 0; j < avCount; j++) { cars.push(makeCar("AV")); } let nonavs = []; for (let k = 0; k < nonAVCount; k++) { cars.push(makeCar("nonAV")); } let cellSize = width / colRow; let svg = d3.select('#mainSVG'); svg.selectAll('.vehicle').remove(); svg .selectAll('.vehicle') .data(cars) .enter() .append("circle") .attr("class", d => "vehicle " + d.type) .attr("cx", d => d.col * cellSize + cellSize * 0.5) .attr("cy", d => d.row * cellSize + cellSize * 0.5) .attr("r", cellSize / 2) .attr("fill", function(d) { if (d.type == 'AV') { return avColor; } else { return nonAVColor; } }) .on('mouseover', function(d) { svg .append('circle') .attr('cx', d.target.column * cellSize + cellSize * .5) .attr('cy', d.target.row * cellSize + cellSize * .5) .attr('r', 0) .attr('stroke', 'orange') .attr('stroke-width', 2) .attr('fill', 'none') .attr('id', 'targetPoint') .transition() .attr('r', cellSize / 2); }) .on('mouseout', function(d) { svg .selectAll('#targetPoint') .transition() .attr('r', 0) .remove(); }); return { cars: cars }; }37:T42f,initializeSVG = { let svg = d3 .create('svg') .attr('width', width) .attr('height', width) //switch to height later .attr('id', 'mainSVG'); let background = svg .append('rect') .attr('width', width) .attr('height', width) //switch to height later .attr('x', 0) .attr('y', 0) .attr('fill', 'black'); let cellSize = width / colRow; //create grid based on synthetic dataset svg .selectAll('.automaton') //look for something that doesn't exist .data(caWorld) //compare it against data .enter() .append('rect') .attr('width', cellSize) .attr('height', cellSize) .attr('x', function(d) { return d.column * cellSize; }) .attr('y', function(d) { return d.row * cellSize; }) .attr('fill', function(d) { if (d.wall == 0) { return roadColor; } else if (d.wall == 1) { return wallColor; } }) .attr('stroke', cellDivisionColor) .attr('stroke-width', cellDivisionThickness) .attr('class', 'automaton'); return svg.node(); }38:Tb57,simulation = { let count = 0; while (true) { let aStarMap = convertCA2Graph(caWorld); let graph = new astar.Graph(aStarMap, { diagonal: false }); for (let i = simData.cars.length - 1; i >= 0; i--) { let car = simData.cars[i]; if (car.collision > 0) { let newCar = makeCar(car.type); simData.cars.splice(i, 1, newCar); simData.cars[i].nextCell = newCar.cell; } let start = graph.grid[car.col][car.row]; let end = graph.grid[car.target.column][car.target.row]; let route = astar.astar.search(graph, start, end); //we are distant from our target, and can still move if (route.length > 0) { if (car.type == "AV") { //AV cars always follow a* directions car.nextCell = caWorld[route[0].y * colRow + route[0].x]; } else if (car.type == "nonAV") { //nonAVs might behave randomly if (Math.random() < reckless) { let nextMove = makeRandomChoice( lookAround(car.cell, { diagonal: false }).availableMoves ); car.nextCell = caWorld[nextMove.row * colRow + nextMove.column]; } else { //follow a* directions car.nextCell = caWorld[route[0].y * colRow + route[0].x]; } } } else { //destroy cars that either can't move, or have reached their destination let newCar = makeCar(car.type); simData.cars.splice(i, 1, newCar); simData.cars[i].nextCell = newCar.cell; } } //collect which cell the cars want to occupy in the next generation let nextMoveArray = simData.cars.map(d => [d.col, d.row]); //loop through the cars simData.cars.forEach(function(car, i) { //count how many cars want to occupy the same space as this car let duplicates = nextMoveArray.filter( nM => JSON.stringify(nM) == JSON.stringify(nextMoveArray[i]) ).length; //if more than one car... if (duplicates > 1) { simData.cars[i].collision++; simData.cars[i].nextCell = simData.cars[i].cell; } //assume car is continuing in the same direction let newHeading = car.heading; //handle turns if necessary if (car.cell.column > car.nextCell.column) { newHeading = 270; } else if (car.cell.column < car.nextCell.column) { newHeading = 90; } if (car.cell.row > car.nextCell.row) { newHeading = 0; } else if (car.cell.row < car.nextCell.row) { newHeading = 180; } //update the cars so that they move in the next generation car.heading = newHeading; car.cell = car.nextCell; car.col = car.nextCell.column; car.row = car.nextCell.row; car.nextCell = ""; }); updateCars(); count++; await Promises.delay(generationalDelay); yield count; } }39:T907,function updateCars() { let cellSize = width / colRow; //longest dimension of SVG artboard let svgMaxDim = 10; d3.select("#mainSVG") .selectAll('.explosion') .remove(); d3.select("#mainSVG") .selectAll('.vehicle') .data(simData.cars, d => d.id) .exit() .transition() .duration(generationalDelay) .attr('opacity', 0) .each(function(d) { if (d.collision > 0) { d3.select("#mainSVG") .append('circle') .attr('class', 'explosion') .attr('cx', d.col * cellSize + cellSize / 2) .attr('cy', d.row * cellSize + cellSize / 2) .attr('r', cellSize / 2) .attr('fill', carExplosionColor) .attr('opacity', 0) .transition() .duration(generationalDelay * .25) .attr('opacity', 1) .transition() .duration(generationalDelay * .25) .delay(generationalDelay * .5) .attr('opacity', 0); } }) .remove(); d3.select("#mainSVG") .selectAll('.vehicle') .data(simData.cars, d => d.id) .transition() .ease(d3.easeLinear) .duration(generationalDelay) .attr('stroke-width', d => d.collision) .attr( 'transform', d => 'translate(' + d.col * cellSize + ',' + d.row * cellSize + ') scale(' + cellSize / svgMaxDim + ') rotate(' + d.heading + " " + svgMaxDim / 2 + " " + svgMaxDim / 2 + ")" ); d3.select("#mainSVG") .selectAll('.vehicle') .data(simData.cars, d => d.id) .enter() .append('image') .attr('href', function(d) { if (d.type == 'AV') { return AVurl; } else { return nonAVurl; } }) .attr('width', svgMaxDim) .attr('height', svgMaxDim) .attr('opacity', 0) .attr("class", d => "vehicle " + d.type) .attr( 'transform', d => 'translate(' + d.col * cellSize + ',' + d.row * cellSize + ') scale(' + cellSize / svgMaxDim + ') rotate(' + d.heading + " " + svgMaxDim / 2 + " " + svgMaxDim / 2 + ")" ) .transition() .duration(generationalDelay) .attr('opacity', 1); }3a:[{"id":"cdac366eed1061ed04f62e8f1646a588bfc0a08c65a41797aee863b40292d7213c8ce509db71ec54f7b451e3f8c21102624ae59b7952710295e1f909a188f5bb","href":"https://static.observableusercontent.com/files/cdac366eed1061ed04f62e8f1646a588bfc0a08c65a41797aee863b40292d7213c8ce509db71ec54f7b451e3f8c21102624ae59b7952710295e1f909a188f5bb","name":"astar.js","type":"application/javascript","lastModified":1608052014499.183,"size":11075},{"id":"3472bb4424c5aac12442c3eb4dd49af97a6faca8accdbd876e15b40bf71292992a4c3f49e141876ed6d6787dbf7359151ed6e39236461007f2e8003468fefd66","href":"https://static.observableusercontent.com/files/3472bb4424c5aac12442c3eb4dd49af97a6faca8accdbd876e15b40bf71292992a4c3f49e141876ed6d6787dbf7359151ed6e39236461007f2e8003468fefd66","name":"AV@2.svg","type":"image/svg+xml","lastModified":1608072450859.355,"size":699},{"id":"9c7e71da92e0a4ed82c8d5fed8b8cc3a27e252c20e9a5ecf7163d7e4efce581fe42a41435a26ca0e2e8010df20f7d338d03eb09a9b6aa890b8f90926220926cb","href":"https://static.observableusercontent.com/files/9c7e71da92e0a4ed82c8d5fed8b8cc3a27e252c20e9a5ecf7163d7e4efce581fe42a41435a26ca0e2e8010df20f7d338d03eb09a9b6aa890b8f90926220926cb","name":"nonAV@1.svg","type":"image/svg+xml","lastModified":1608072459332.068,"size":699}] 32:{"id":"d1474ca34bb25f3c","slug":"autonomous-vehicles-a-solution-to-traffic","title":"Autonomous Vehicles - a solution to traffic?","thumbnail":"c65c0df6f495677971094ec3110b41f647a98dbb90e88e8d5e007a944d1ce2b3","access_level":"public","create_time":"$D2020-12-15T06:41:45.548Z","update_time":"$D2021-01-26T16:42:42.794Z","view_time":null,"first_public_time":"$D2020-12-15T17:23:29.500Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"edb773eea2d3bb8f","login":"kavyarai","name":"Kavya Rai","avatar_url":"https://avatars-next.observableusercontent.com/06efcb6df89510aabd1f591894bbfffd254e5d50f0401f47a3bfbb96bcc96136","tier":"starter_2024"},"version":315,"publish_version":315,"role":null,"authored":false,"authors":[{"type":"individual","id":"1a7d91d68792ba5f","login":"kavyarai","name":"Kavya Rai","avatar_url":"https://avatars-next.observableusercontent.com/06efcb6df89510aabd1f591894bbfffd254e5d50f0401f47a3bfbb96bcc96136","tier":null}],"members":[{"type":"individual","id":"1a7d91d68792ba5f","login":"kavyarai","name":"Kavya Rai","avatar_url":"https://avatars-next.observableusercontent.com/06efcb6df89510aabd1f591894bbfffd254e5d50f0401f47a3bfbb96bcc96136","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Autonomous Vehicles - a solution to traffic?","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`-----\n### Simulation Environment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"viewof avColor = color({\n value: \"#F1AE6D\",\n title: \"Self-driving (AV) car color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"viewof nonAVColor = color({\n value: \"#6CBEC7\",\n title: \"Manually-driven car color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"viewof carExplosionColor = color({\n value: \"#D86373\",\n title: \"Car crash\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"viewof wallColor = color({\n value: \"#454552\",\n title: \"Walls / Obstacles / Buildings\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"viewof roadColor = color({\n value: \"#d8e9ef\",\n title: \"Road / Pathway\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"viewof cellDivisionColor = color({\n value: \"#d8e9ef\",\n title: \"Cell Division Lines\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`-----\n### User Controls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"viewof avRatio = slider({\n min: 0,\n max: 1,\n step: 0.05,\n value: 0.4,\n title: \"Ratio of AVs on the road (0 = no AVs, 1 = only AVs )\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"viewof reckless = slider({\n min: 0,\n max: 1,\n step: 0.05,\n value: 0.4,\n title: \"Driver recklessness (0 = careful, 1 = very reckless)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"viewof carCount = slider({\n min: 5,\n max: 100,\n step: 5,\n value: 30,\n title: \"Total Car Count\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof generationalDelay = slider({\n min: 0,\n max: 5000,\n step: 100,\n value: 500,\n title: \"Car speed\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`-----\n### Environment Controls\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"viewof width = slider({\n min: 500,\n max: 900,\n step: 5,\n value: 800,\n title: \"SVG Width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof colRow = slider({\n min: 0,\n max: 50,\n step: 5,\n value: 30,\n title: \"Columns & Rows\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"viewof wallRatio = slider({\n min: 0,\n max: 1,\n step: 0.05,\n value: 0.2,\n title: \"Wall Ratio (0 = no walls, .5 = half walls, 1 = all walls)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof cellDivisionThickness = slider({\n min: 0,\n max: 5,\n step: .2,\n value: .5,\n title: \"Cell Division Thickness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof evolveEnvironmentGenerations = slider({\n min: 0,\n max: 10,\n step: 1,\n value: 0,\n title: \"Environment Generations\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`-----\n### Generating Environment Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"caWorld = {\n let caData = [];\n\n //loop through rows and columns in two for loops\n for (let i = 0; i < colRow; i++) {\n for (let j = 0; j < colRow; j++) {\n caData.push({\n row: i,\n column: j,\n wall: Math.random() < wallRatio ? 1 : 0,\n survive: 0,\n wait: 2,\n s: i * colRow + j,\n t: i == 0 ? undefined : (i - 1) * colRow + j,\n r: j == colRow - 1 ? undefined : i * colRow + (j + 1),\n l: j == 0 ? undefined : i * colRow + (j - 1),\n b: i == colRow - 1 ? undefined : (i + 1) * colRow + j,\n tl: i == 0 || j == 0 ? undefined : (i - 1) * colRow + (j - 1),\n tr: i == 0 || j == colRow - 1 ? undefined : (i - 1) * colRow + (j + 1),\n bl: i == colRow - 1 || j == 0 ? undefined : (i + 1) * colRow + (j - 1),\n br:\n i == colRow - 1 || j == colRow - 1\n ? undefined\n : (i + 1) * colRow + (j + 1)\n });\n }\n }\n return caData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md`-----\n### Generating Car Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"function makeCar(type) {\n let deployCell = makeRandomChoice(caWorld.filter(d => d.wall != 1));\n let targetCell = makeRandomChoice(caWorld.filter(d => d.wall != 1));\n\n return {\n type: type,\n target: targetCell,\n heading: 0,\n row: deployCell.row,\n col: deployCell.column,\n cell: deployCell,\n collision: 0,\n id: Math.random()\n .toString(36)\n .replace(/[^a-z]+/g, '')\n .substr(2, 10)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`-----\n### CA Simulation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"function lookAround(cell, options) {\n let neighborKeys = {};\n if (options.diagonal == true) {\n neighborKeys.moves = ['t', 'r', 'l', 'b', 'tl', 'tr', 'bl', 'br'];\n } else {\n neighborKeys.moves = ['t', 'r', 'l', 'b'];\n }\n\n let neighbors = {};\n\n for (let i = 0; i < neighborKeys.moves.length; i++) {\n if (cell[neighborKeys.moves[i]] !== undefined) {\n neighbors[neighborKeys.moves[i]] = caWorld[cell[neighborKeys.moves[i]]];\n } else {\n neighbors[neighborKeys.moves[i]] = undefined;\n }\n }\n\n return {\n neighbors: neighbors,\n availableMoves: Object.values(neighbors)\n .filter(d => d !== undefined)\n .filter(d => d.wall != 1)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`-----\n### A* Pathfinding\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"convertCA2Graph(caWorld)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"function convertCA2Graph(world) {\n let ca = [];\n for (let i = 0; i < colRow; i++) {\n ca.push([]);\n }\n\n world.forEach(function(cell) {\n ca[cell.row][cell.column] = +!cell.wall;\n });\n //astar is column first so we need to transpose 2d array\n return ca[0].map((_, colIndex) => ca.map(row => row[colIndex]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"md`-----\n### Vector Files\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"AVurl = await FileAttachment(\"AV@2.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"nonAVurl = await FileAttachment(\"nonAV@1.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`-----\n### Making random choices\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"//random number generator\nmakeRandomFloor = function(min, max) {\n return Math.floor(Math.random() * (max - min) + min);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"//random choice generator\nmakeRandomChoice = function(arr) {\n return arr[Math.floor(Math.random() * arr.length)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`-----\n### Imports and Old Code\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"astar = require(await FileAttachment(\"astar.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"import { slider, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"