33:T4c0,{ restart; const context = DOM.context2d(width, height); context.setTransform(2 * scale, 0, 0, 2 * scale, 0, 0); simulation.on("tick", ticked); const linkForce = simulation.force('links'); function ticked() { context.clearRect(0, 0, sWidth + 1, sHeight + 1); clock.advance(0.1); for (const { source, target } of linkStore.links) { context.strokeStyle = "#ddd"; context.lineWidth = 2; context.beginPath(); context.moveTo(source.x, source.y); context.lineTo(target.x, target.y); context.stroke(); } cellStore.cells.forEach(cell => { const { x, y, radius, color, filled } = cell; context.fillStyle = color; context.beginPath(); context.arc(x, y, radius, 0, 2 * Math.PI); context.fill(); }); if (cellStore.dirty) { simulation.nodes(cellStore.cells); cellStore.clean(); const { births, deaths } = cellStore.stats; db('births', births); db('deaths', deaths); } if (linkStore.dirty) { linkForce.links(linkStore.links); linkStore.clean(); } } try { yield context.canvas; yield invalidation; } finally { simulation.stop(); } }34:T7d1,class Cell { constructor(x = 0, y = 0, properties) { this.linkMap = {}; this.id = idFactory.id; this.x = x; this.y = y; this.vx = 0; this.vy = 0; this._energy = 1; this._name = 'Stem Cell'; //this.bodyId = idFactory.id; this.properties = properties || {}; this.startTime = clock.time; this._opacity = 0.75; this._color = d3.hsl('black'); this._color.opacity = this._opacity; } get color() { this._color.s = saturation(cellStore.getCellAge(this)); return this._color; } get name() { return this._name; } get velocityMagnitude() { return this.vx * this.vx + this.vy * this.vy; } get links() { return Object.values(this.linkMap); } link(other) { this.linkMap[other.id] = other; } unlink(other) { delete this.linkMap[other.id]; } willLinkTo(other) { return false; } willEat(other) { return false; } divide(types) { const dAlpha = Math.PI * 2 / types.length; return types.map((type, i) => { const position = { x: this.x + Math.cos(dAlpha * i) * 30, y: this.y + Math.sin(dAlpha * i) * 30, }; const child = cellStore.createCell(position, type, this.properties); linkStore.link(this, child); return child; }); } get radius() { return radius(this._energy); } get degree() { return Object.keys(this.linkMap).length; } get energy() { return this._energy; } set energy(energy) { this._energy = Math.min(Math.max(energy, 0), 1); } linkedInteraction(other) { this.closeGap('_energy', other, 0.1); } closeGap(field, other, fraction) { const v1 = this[field]; const v2 = other[field]; const dv = (v1 - v2) * fraction ; this[field] -= dv; other[field] += dv; } step() { const distance = Math.sqrt(this.vx * this.vx + this.vy * this.vy); this._energy = Math.max(0, this._energy - (costOfMotion * distance + costOfLiving)); } }35:T48e,class LinkStore { constructor() { this._dirty = true; this.linkMap = {}; } static linkId(cell1, cell2) { return cell1.id < cell2.id ? cell1.id + '-' + cell2.id : cell2.id + '-' + cell1.id; } areLinked(linkId) { return this.linkMap[linkId]; } get links() { return Object.values(this.linkMap); } get dirty() { return this._dirty; } clean() { this._dirty = false; } link(source, target, id = LinkStore.linkId(source, target)) { if (source.bodyId !== target.bodyId) { this.setConnectedBodyId( ...(source.bodyId > target.bodyId ? [target, source.bodyId] : [source, target.bodyId]) ); } source.link(target); target.link(source); this.linkMap[id] = { id, source, target }; this._dirty = true; } setConnectedBodyId(cell, bodyId) { cell.bodyId = bodyId; cell.links.filter(d => d.bodyId !== bodyId).forEach(d => this.setConnectedBodyId(d, bodyId)); } unlink(cell1, cell2) { const id = LinkStore.linkId(cell1, cell2); delete this.linkMap[id]; cell1.unlink(cell2); cell2.unlink(cell1); this._dirty = true; } }36:T46a,class CellStore { constructor() { this._cellMap = {}; this._dirty = true; this._age = d3.scaleLinear() .domain([Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER]); this._stats = { births: 0, deaths: 0, }; } getCellAge(cell) { return this._age(cell.startTime); } get dirty() { return this._dirty; } get cells() { return Object.values(this._cellMap); } get stats() { return this._stats; } clean() { this._dirty = false; } createCell(position, type, properties) { const cell = new type(position.x, position.y, properties); this._cellMap[cell.id] = cell; this.updateAge(); this._stats.births++; this._dirty = true; return cell; } updateAge() { this._age.domain(d3.extent(this.cells, d => d.startTime)); db('age domain', this._age.domain()); } destroyCell(cell) { cell.links.forEach(other => linkStore.unlink(cell, other)); delete this._cellMap[cell.id]; if (this.cells.length > 0) { this.updateAge(); } this._stats.deaths++; this._dirty = true; } }37:T10a8,class Population { constructor() { this.cellClassScale = d3.scaleQuantize().range([ConnectCell, EatCell, MoveCell]); this.cellTypeNames = ['MoveCell', 'ConnectCell', 'EatCell']; this._actionQueue = []; clock.setPeriodicCall(0.5, () => this.tick()); clock.setPeriodicCall(injectionCycleDelay, () => this.queueAction(() => this.createCells())); clock.setPeriodicCall(1, () => db('clock', Math.round(clock.time))); } createCells() { d3.range(injectionCellCount).map(() => this.createCell()); } createCell() { let cellType = null; let rules = null; let moveExpand = null; do { cellType = this.cellClassScale(Math.random()); rules = this.randomRulesGenerator(); moveExpand = _.uniq(rules['MoveCell']); } while (cellType === MoveCell && (moveExpand.length === 0 || (moveExpand.length === 1 && moveExpand[0] == MoveCell))); return cellStore.createCell( { x: x(Math.random()), y: y(Math.random()), }, cellType, { alpha1: d3.randomUniform(-0.5, 0.5)(), alpha2: d3.randomUniform(-0.5, 0.5)(), timeOffset: d3.randomUniform(0, Math.PI * 2)(), velocity: d3.randomUniform(0, 5)(), maxDegree: Math.round(d3.randomUniform(...maxDegreeExtent)()), rules, }, ); } randomRulesGenerator() { const countScale = d3.scaleQuantize().range(d3.range(4)); return this.cellTypeNames.reduce((rules, type) => { return { [type]: d3.range(countScale(Math.random())).map(d => this.cellClassScale(Math.random())), ...rules, }; }, {}); } queueAction(action) { this._actionQueue.push(action); } drainActionQueue() { while(this._actionQueue.length > 0) { this._actionQueue.shift()(); } } tick() { this.drainActionQueue(); // destory any dying/dead cells cellStore.cells .filter(d => d.dead || d.energy < 0.002) .forEach(d => cellStore.destroyCell(d)); // update any link ineractions between cells linkStore.links .forEach(({ source, target }) => source.linkedInteraction(target)); // divide any cells that have the juice cellStore.cells .filter(d => !d.dead && d.energy > divideThreshold) .forEach(d => this.divide(d, d.properties.rules[d.constructor.name])); } divide(cell, types) { const dAlpha = Math.PI * 2 / types.length; const alphaOffset = d3.randomUniform(2 * Math.PI)(); const energy = cell.energy / (types.length + 1); cell.energy = energy; return types.map((type, i) => { const position = { x: cell.x + Math.cos(alphaOffset + dAlpha * i) * 30, y: cell.y + Math.sin(alphaOffset + dAlpha * i) * 30, }; const child = cellStore.createCell(position, type, cell.properties); child.energy = energy; linkStore.link(cell, child); return child; }); } handleCollide(source, target) { // if the cells are linked, then the collide does nothing const id = LinkStore.linkId(source, target); if (linkStore.areLinked(id)) return; // if both cells want to link up, link up const sLink = source.willLinkTo(target); const tLink = target.willLinkTo(source); if (sLink && tLink) { this.queueAction(() => linkStore.link(source, target, id)); return; } // see if cells want to eat eachother const sEat = source.willEat(target); const tEat = target.willEat(source); // if neither want to eat eachother, do nothing if (!sEat && !tEat) return; // if both want to eat eachother, the faster one wins if (sEat && tEat) { if (source.velocityMagnitude > target.velocityMagnitude) { this.queueAction(() => this.eat(source, target)); } else { this.queueAction(() => this.eat(target, source)); } return; } // if only one cell wants to eat the other, do that if (sEat && !tEat) { this.queueAction(() => this.eat(source, target)); } else { this.queueAction(() => this.eat(target, source)); } } eat(eater, food) { eater.energy += food.energy; food.energy = 0; food.dead = true; } }38:T77a,function renderPopulation(width = 150, height = 70) { const radius = 2; const fontSize = 12; const margin = fontSize * 1.4; const svg = DOM.svg(width, height); const age = d3.scaleLinear().range([radius, width - 2 * radius]); const energy = d3.scaleLinear().range([height - 2 * radius, radius]); const root = d3.select(svg) .style('padding', margin); const legend = root .append('g') .attr('fill', '#666') .attr('font-size', `${fontSize}px`); legend.append('rect') .attr('width', width) .attr('height', height) .attr('rx', radius) .attr('ry', radius) .attr('fill', '#f0f0f0'); legend.append('text') .attr('transform', `rotate(-90) translate(${[-energy(0.5), -5]})`) .style('text-anchor', 'middle') .text('Old'); legend.append('text') .attr('transform', `rotate(-90) translate(${[-energy(0.5), age(1) + 18]})`) .style('text-anchor', 'middle') .text('Young'); legend.append('text') .attr('transform', `translate(${[age(0.5), -5]})`) .style('text-anchor', 'middle') .text('High Energy'); legend.append('text') .attr('transform', `translate(${[age(0.5), energy(0) + 18]})`) .style('text-anchor', 'middle') .text('Low Energy'); const update = (cells) => { db('cells', cells.length); const points = root .selectAll('.point') .data(cells, d => d.id); const enters = points.enter() .append('circle') .classed('point', true) .attr('r', radius) .attr('fill', 'rgba(128, 0, 128, 0.3)') .attr('cx', d => age(cellStore.getCellAge(d))) .attr('cy', d => energy(d.energy)); points .transition() .attr('cx', d => age(cellStore.getCellAge(d))) .attr('cy', d => energy(d.energy)); points.exit() .remove(); } svg.intervalId = setInterval(() => update(cellStore.cells), 200); return svg; }39:T673,function renderLegand() { clock; const cells = [MoveCell, ConnectCell, EatCell]; const size = 35; const computeColor = c => { const clr = c.color; clr.s = c.age; return clr; }; const renderCell = (c, mutation) => html`

${name}

${cells.map(c => {const d = new c(); d.energy = 0.5; d.age = 1; return d;}).map(c => renderCell(mutation(c)))}

`; const time = clock.time || 1000; const mutations = [ {name: 'Mover', mutation: d => d, cells: [MoveCell]}, {name: 'Connecter', mutation: d => d, cells: [ConnectCell]}, {name: 'Eater', mutation: d => d, cells: [EatCell]}, {name: 'Young', mutation: d => {d.age = 1.0; return d;}, cells}, {name: '', mutation: d => {d.age = (1 + oldSaturation) / 2; return d;}, cells}, {name: 'Old', mutation: d => {d.age = oldSaturation; return d}, cells}, {name: 'Energetic', mutation: d => {d.energy = 1.0; return d;}, cells}, {name: '', mutation: d => {d.energy = 0.5; return d;}, cells}, {name: 'Depleted', mutation: d => {d.energy = 0.0; return d;}, cells}, ]; return html`

${ mutations.map(renderRow) }

`; }3a:Tb7e,forceCollide = { const constant = (x) => { return function() { return x; }; }; const jiggle = () => { return (Math.random() - 0.5) * 1e-6; } function x(d) { return d.x + d.vx; } function y(d) { return d.y + d.vy; } const collide = (radius) => { var nodes, radii, strength = 1, iterations = 1; let onCollide = null; if (typeof radius !== "function") radius = constant(radius == null ? 1 : +radius); function force() { var i, n = nodes.length, tree, node, xi, yi, ri, ri2; for (var k = 0; k < iterations; ++k) { tree = d3.quadtree(nodes, x, y).visitAfter(prepare); for (i = 0; i < n; ++i) { node = nodes[i]; ri = radii[node.index], ri2 = ri * ri; xi = node.x + node.vx; yi = node.y + node.vy; tree.visit(apply); } } function apply(quad, x0, y0, x1, y1) { var data = quad.data, rj = quad.r, r = ri + rj; if (data) { if (data.index > node.index) { var x = xi - data.x - data.vx, y = yi - data.y - data.vy, l = x * x + y * y; if (l < r * r) { if (onCollide) { onCollide(data, node); } if (x === 0) x = jiggle(), l += x * x; if (y === 0) y = jiggle(), l += y * y; l = (r - (l = Math.sqrt(l))) / l * strength; node.vx += (x *= l) * (r = (rj *= rj) / (ri2 + rj)); node.vy += (y *= l) * r; data.vx -= x * (r = 1 - r); data.vy -= y * r; } } return; } return x0 > xi + r || x1 < xi - r || y0 > yi + r || y1 < yi - r; } } function prepare(quad) { if (quad.data) return quad.r = radii[quad.data.index]; for (var i = quad.r = 0; i < 4; ++i) { if (quad[i] && quad[i].r > quad.r) { quad.r = quad[i].r; } } } function initialize() { if (!nodes) return; var i, n = nodes.length, node; radii = new Array(n); for (i = 0; i < n; ++i) node = nodes[i], radii[node.index] = +radius(node, i, nodes); } force.initialize = function(_) { nodes = _; //.filter(d => d.constructor.name !== 'MoveCell'); initialize(); }; force.iterations = function(_) { return arguments.length ? (iterations = +_, force) : iterations; }; force.strength = function(_) { return arguments.length ? (strength = +_, force) : strength; }; force.radius = function(_) { return arguments.length ? (radius = typeof _ === "function" ? _ : constant(+_), initialize(), force) : radius; }; force.onCollide = function(_) { onCollide = _; return force; }; return force; } return collide; }3b:[] 32:{"title":"PIM Playground III","cells":[{"id":0,"value":"md`# PIM Playground III\n\nSee the [PIM Playgroud](https://docs.google.com/document/d/1tHO5UyLjRHjzuM9bFn_dfs0yoKGGHOoKkFID1MbEh3U/edit?usp=sharing) document for a detailed description of what's going on here, and the larger project.\n\nHere ${injectionCellCount} cell is added every ${injectionCycleDelay} clock ticks.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2759,"value":"{\n restart;\n const populationChart = renderPopulation(200, 60);\n const chart = html`

Legend

${renderLegand()}

Population

${populationChart}

`;\n \n try {\n yield chart;\n yield invalidation;\n } finally {\n clearInterval(populationChart.intervalId);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"{\n const buttons = [\n callButton('reset', () => mutable restart += 1),\n callButton('add', () => population.createCells()),\n callButton(isRunning ? 'pause' : 'start', () => {\n isRunning ? simulation.stop() : simulation.restart();\n mutable isRunning = !isRunning;\n }), \n ];\n\n return html`

${\n buttons.map(d => html`

${d}

`)\n }

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof db = Debug()","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"md`# Application State`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"mutable restart = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"mutable isRunning = {\n restart;\n if (!startRunningByDefault) {\n simulation.stop();\n }\n return startRunningByDefault;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3162,"value":"startRunningByDefault = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"simulation = {\n restart;\n const collideForce = forceCollide();\n const handleCollide = (cell1, cell2) => {\n population.handleCollide(cell1, cell2);\n collideForce.radius(({ radius }) => radius);\n };\n \n collideForce\n .onCollide(handleCollide)\n .radius(({ radius }) => radius);\n \n const linkForce = d3.forceLink().distance(20).strength(0.5);\n \n const simulation = d3.forceSimulation(cellStore.cells)\n .force('motion', forceCellMotion())\n .force('links', linkForce)\n .force('collide', collideForce)\n .force('bounds', forceScreenBounds(sWidth, sHeight))\n .alphaDecay(0);\n \n return simulation;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"population = {\n restart;\n return new Population();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"clock = {\n restart;\n return new Clock();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1515,"value":"idFactory = new IdFactory()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"cellStore = {\n restart;\n return new CellStore();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"linkStore = {\n restart;\n return new LinkStore();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1540,"value":"md`# Cell Types`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1409,"value":"class MoveCell extends Cell {\n constructor(x, y, properties) {\n super(x, y, properties);\n this._name = 'Mover';\n this._color = d3.hsl(chromatic.schemeSet1[4]);\n this._color.opacity = this._opacity;\n }\n\n step(time) {\n const { alpha1, alpha2, velocity, timeOffset } = this.properties;\n const a1 = timeOffset + time * alpha1;\n const a2 = timeOffset + time * alpha2;\n this.vx += (Math.cos(a1) + Math.cos(a2)) * velocity;\n this.vy += (Math.sin(a1) + Math.sin(a2)) * velocity;\n super.step(time);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1386,"value":"class ConnectCell extends Cell {\n constructor(x, y, properties) {\n super(x, y, properties);\n this._name = 'Connector';\n this._color = d3.hsl(chromatic.schemeSet1[1]);\n this._color.opacity = this._opacity;\n }\n\n willLinkTo(other) {\n return this.degree < this.properties.maxDegree;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1382,"value":"class EatCell extends Cell {\n constructor(x, y, properties) {\n super(x, y, properties);\n this._name = 'Eater';\n this._color = d3.hsl(chromatic.schemeSet1[0]);\n this._color.opacity = this._opacity;\n }\n\n willEat(other) {\n return this.bodyId != other.bodyId;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"md`# Classes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1221,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1187,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"class Clock {\n \n constructor() {\n this._time = 0;\n this._periodicCalls = {};\n }\n \n get time() {\n return this._time;\n }\n \n setPeriodicCall(period, call) {\n const id = idFactory.id;\n this._periodicCalls[id] = {\n call,\n period,\n nextCallTime: 0,\n };\n return id;\n }\n \n advance(delta) {\n this._time += delta;\n \n // check to see if any periodic functions need calling\n Object.values(this._periodicCalls).forEach(periodicCall => {\n if (periodicCall.nextCallTime <= this.time) {\n periodicCall.nextCallTime += periodicCall.period;\n periodicCall.call();\n }\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1513,"value":"class IdFactory {\n constructor() {\n this._nextId = 0;\n }\n \n get id() {\n return this._nextId++;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2907,"value":"md`# Renderers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2592,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2280,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`# Forces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"forceCellMotion = () => {\n let cells = null;\n let time = 0;\n \n const motion = () => {\n cells.forEach(cell => cell.step(clock.time));\n }\n \n motion.initialize = _ => {\n cells = _;\n };\n \n return motion;\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"forceScreenBounds = (width, height) => {\n let cells = null;\n\n const bounds = () => {\n cells.forEach(cell => {\n const fx = cell.x + cell.vx;\n const radius = cell.radius;\n if (fx < radius || fx > (width - radius)) {\n cell.vx = 0;\n if (cell.x < 0) cell.x = 0;\n if (cell.x > width) cell.x = width - 1;\n }\n\n const fy = cell.y + cell.vy;\n if (fy < radius || fy > (height - radius)) {\n cell.vy = 0;\n if (cell.y < 0) cell.y = 0;\n if (cell.y > height) cell.y = height - 1;\n }\n });\n }\n \n bounds.initialize = _ => cells = _;\n \n return bounds;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`# Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2583,"value":"oldSaturation = 0.15","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"scale = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"sWidth = width * (1 / scale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"sHeight = height * (1 / scale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"injectionCellCount = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"injectionCycleDelay = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"costOfMotion = 0.000002","pinned":false,"hidden":false,"mode":"ojs"},{"id":1587,"value":"costOfLiving = 0.000001","pinned":false,"hidden":false,"mode":"ojs"},{"id":2276,"value":"divideThreshold = 0.25","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"maxDegreeExtent = [2, 10]","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"radiusExtent = [2, 15]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"md` # Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"radius = d3.scalePow().exponent(0.5).range(radiusExtent)","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"x = d3.scaleLinear().range([radiusExtent[1], sWidth - radiusExtent[1]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"y = d3.scaleLinear().range([radiusExtent[1], sHeight - radiusExtent[1]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3180,"value":"saturation = d3.scaleLinear().range([oldSaturation, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"function callButton(label, callback) {\n const button = md``;\n button.onclick = callback;\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"chromatic = require('d3-scale-chromatic')","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"import { Debug } from '@trebor/debug-tool'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}