data analyst • mediapart
display(next(test))
display(next(next(test)))
next(next(test))
steps(test, 101)
.map(step => toRecords(step))
.flat()
.filter(o => o.v == 0)
steps(input, 101)
.map(step => toRecords(step))
.flat()
.filter(o => o.v == 0)
min_steps(test)
min_steps(input)
random = generate(10)
min_steps(random)
generate = (size) => {
return Array.from(Array(size)).map(y => Array.from(Array(size)).map(x => Math.floor(Math.random() * 9 + 1)))
}
sim_max_steps = 1000
simulations = Array.from(Array(1000)).map(simulation => generate(10)).map(min_steps)
d3.mean(simulations.filter(s => s.min_step != sim_max_steps).map(s => s.min_step))
non_convergents = simulations.filter(s => s.min_step == sim_max_steps)
{
const simulations_steps = steps(non_convergents[least_convergent].start, 1000)
const data = simulations_steps.map(step => toRecords(step).filter(o => o.v == 0)).map((a,step) => [step, a.length])
return Plot.plot({
x: { label: "steps" },
y: { label: "flashes" },
marks: [
Plot.dot(data.filter(d => d[1] != 0))
]
})
}
nc_values = {
let data = non_convergents.map(simulation => {
const simulations_steps = steps(simulation.start, sim_max_steps)
const flashes = simulations_steps.map(step => toRecords(step).filter(o => o.v == 0)).slice(750).map((a,step) => [step, a.length])
return [...new Set(flashes.map(d => d[1]))]
})
return data //.sort((a,b) => a.length - b.length)
}
// Plot.barY(nc_values.sort((a,b) => a.length - b.length), {
// x: (d,i) => i,
// y: d => d.length
// }).plot()
Plot.plot({
marks:[
Plot.rectY(nc_values.map(a => ({ values: a.length})), Plot.binX({
y: "count"
}, {
x: "values"
}))
]
})
least_convergent = d3.maxIndex(nc_values.map(a => a.length))
{
let simulation = non_convergents[least_convergent]
//let start = simulation.start
let simulation_steps = steps(simulation.start, 1000)
return html`<div style="display: flex; flex-direction: row; flex-wrap: wrap;">${ simulation_steps.map(step => html`<div>${display(step)}</div>`)}</div>`
}
min_steps = (start)=>{
let min_step = 0
let current = [...start.map(xs => [...xs])]
while (current.flat().filter(o => o != 0).length != 0 && min_step < sim_max_steps) {
current = next(current)
min_step += 1
}
return {min_step, start}
}
steps = (start, n) => {
const steps = Array(n)
steps[0] = [...start.map(xs => [...xs])]
Array.from(Array(steps.length -1)).forEach((v,i) => {
steps[i+1] = next(steps[i])
})
return steps
}
next = (octopuses) => {
let current = [...octopuses.map(xs => [...xs])]
const w = current[0].length
const h = current.length
let flashes = []
let f_ = []
let f2 = []
let flash = (octopus) => {
const x = octopus.x
const y = octopus.y
flashes.push({x,y})
f_ = f_.filter(f => !(f.x == x && f.y == y))
for (let x_ = Math.max(0, x-1); x_ <= Math.min(w-1, x+1); x_++){
for (let y_ = Math.max(0, y-1); y_ <= Math.min(h-1, y+1); y_++){
current[y_][x_] += 1
if (current[y_][x_] > 9 && flashes.filter(f => f.x == x_ && f.y == y_).length == 0) f_.push({x: x_, y: y_})
}
}
}
for (let x = 0; x < w; x++){
for (let y = 0; y < h; y++){
current[y][x] += 1
if (current[y][x] > 9) f_.push({x,y}) // flash({x,y})
}
}
while(f_.length > 0) flash(f_.shift())
flashes.forEach(o => current[o.y][o.x] = 0)
return current
}
toRecords = (matrix) => matrix.map((xs,y) => xs.map((v, x) => ({x, y, v}))).flat()
display = (octopuses) => {
const data = toRecords(octopuses)
return Plot.plot({
width: 100,
height: 100,
color: {
type: "categorical",
domain: ["yellow", "black"],
range: ["#FFE900", "#000000"]
},
x: { axis: false },
y: { axis: false },
marks: [
Plot.cell(data, {
x: d => d.x,
y: d => d.y,
fill: d => (d.v == 0)? "yellow" : "black"
}),
// Plot.text(data.filter(d => d.v > 0), {
// x: d => d.x,
// y: d => d.y,
// text: d => d.v,
// fill: "white"
// })
]
})
}
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.
