{
// this cell control each epoch's elapsed.
chart.tick(epoch)
}
color = d3.scaleSequential(d3.extent(contours, (d) => d.value), d3.interpolatePuBuGn)
grid = {
const q = 4; // The level of detail, e.g., sample every 4 pixels in x and y.
const x0 = -q / 2, x1 = width + 28 + q;
const y0 = -q / 2, y1 = height + q;
const n = Math.ceil((x1 - x0) / q);
const m = Math.ceil((y1 - y0) / q);
const grid = new Array(n * m);
for (let j = 0; j < m; ++j) {
for (let i = 0; i < n; ++i) {
grid[j * n + i] = func.forward([x.invert(i * q + x0), y.invert(j * q + y0)]);
}
}
grid.x = -q;
grid.y = -q;
grid.k = q;
grid.n = n;
grid.m = m;
return grid;
}
// Converts from grid coordinates (indexes) to screen coordinates (pixels).
transform = ({type, value, coordinates}) => {
return {type, value, coordinates: coordinates.map(rings => {
return rings.map(points => {
return points.map(([x, y]) => ([
grid.x + grid.k * x,
grid.y + grid.k * y
]));
});
})};
}
contours = d3.contours()
.size([grid.n, grid.m])
.thresholds(100)(grid)
.map(transform)
x = d3.scaleLinear(func.boundary.x, [0, width + 28])
opacityScale = d3.scaleLinear([0, epochs*0.8], [0.1, 1])
y = d3.scaleLinear(func.boundary.y, [height, 0])
xAxis = g => g
.attr("transform", `translate(0,${height})`)
.call(d3.axisTop(x).ticks(width / height * 10))
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick").filter(d => x.domain().includes(d)).remove())
legendColors = d3.schemeCategory10
yAxis = g => g
.attr("transform", "translate(-1,0)")
.call(d3.axisRight(y))
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick").filter(d => y.domain().includes(d)).remove())
height = 400
width = 400
d3 = require("d3@6")
import {Scrubber} from "@mbostock/scrubber"
import {legend} from "@d3/color-legend"
mathjs = require('https://unpkg.com/mathjs@6.6.0/dist/math.min.js')
import {slider,checkbox} from "@jashkenas/inputs"
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.
