Published unlisted
Edited
Jun 18, 2018
Insert cell
Insert cell
HelloModel =
(await import("@redfish/agentscript/docs/models/HelloModel.js")).default
Insert cell
model = {
const model = new HelloModel()
model.setup()
return model
}
Insert cell
svg = {
const svg = DOM.svg(width, height)
d3.select(svg).attr('style', 'border: 1px solid; padding: 10')
return svg
}
Insert cell
g = d3.select(svg).append('g').attr(
'transform',
`
scale(${patchSize}, ${-patchSize})
translate(${-model.world.minXcor}, ${-model.world.maxYcor})
`
)
Insert cell
g
.selectAll('rect')
.data(model.patches)
.enter()
.append('rect')
.attr('x', d => d.x - 0.5) // note the .5 outset, patch coords
.attr('y', d => d.y - 0.5) // are in the patch center! Cool.
.attr('width', 1)
.attr('height', 1)
.attr('vector-effect', 'non-scaling-stroke')
.attr(
'style',
d => `fill: ${randomLightGray()}; stroke: gray; stroke-width: 0.5;`
)
Insert cell
g
.append('circle')
.attr('x', 0)
.attr('y', 0)
.attr('r', 0.25)
.attr('fill', 'red')
Insert cell
d3 = require("d3@5")
Insert cell
function randomLightGray() {
const randomInt2 = (min, max) => min + Math.floor(Math.random() * (max - min))
const g = randomInt2(200, 255)
return `rgb(${g},${g},${g})`
}
Insert cell
patchSize = 12
Insert cell
width = model.world.width * patchSize
Insert cell
height = model.world.height * patchSize
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more