bias = [0, -1, 0, -1]
value = (x, y) => {
let a = mathjs
.chain(W1)
.multiply(mathjs.matrix([x, y]))
.add(b)
.done();
a = mathjs.matrix([a._data.map((v) => softplus(v))]);
return mathjs.chain(a).multiply(W2).done()._data[0];
}
value(2, 2)
W1 = mathjs.matrix([
[1, 0],
[1, 0],
[0, 1],
[0, 1]
])
b = mathjs.matrix([0, -1, 0, -1])
W2 = mathjs.matrix([1, -1, 1, -1])
xinput = mathjs.matrix([2, 2])
eee = value(0, 5)
result = mathjs.add(mathjs.multiply(W1, xinput), b)
chain_result = mathjs.chain(W1).multiply(xinput).add(b).done()
contours
color = d3.scaleSequential(
d3.extent(contours, (d) => d.value),
d3.interpolateBlues
)
contours.map((d) => d.value)
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] = value(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
]);
});
})
};
}
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()
)
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()
)
thresholds = [0, 0.5, 1, 1.5, 2]
contours = d3
.contours()
.size([grid.n, grid.m])
.thresholds(30)(grid)
.map(transform)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
width = 300
height = 300
x(0)
x = d3.scaleLinear([-1, 2.5], [0, width + 28])
y = d3.scaleLinear([-1, 2.5], [height, 0])
d3 = require("d3@6")
import { legend } from "@d3/color-legend"
mathjs = require("mathjs")
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.
