I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
simple_solution = {
// Step size h defined in terms of parition size n
// n is defined by a slider below.
let h = 1 / n;
// Initialize a matrix of zeros
let L = mlm.Matrix.zeros(n - 1, n - 1);
// Reset values on the diagonal and near diagonals
for (let i = 0; i < n - 1; i++) {
L.set(i, i, -2);
if (i < n - 2) {
L.set(i + 1, i, 1);
L.set(i, i + 1, 1);
}
}
// Multiply by 100
L = L.mul((1 / h) ** 2);
// Set up a the right hand side, a vector with value 2 in each entry.
let B = mlm.Matrix.columnVector(d3.range(n - 1).map(() => 2));
// Solve the system
let solution = mlm.solve(L, B).getColumn(0);
solution = [0].concat(solution.concat([0]));
return solution;
}
plot(
solveBVP(
-1,
2,
1,
4,
(x) => -x,
(x) => x ** 2,
(x) => -2 + 16 * x + 2 * x ** 2 - 10 * x ** 3 - x ** 4 + 2 * x ** 5,
15
),
{
actual: "2*x^3-x^2-4*x"
}
)
//Signature:
// solveBVP(a, b, ua, ub, p, q, f, n)
// where we're trying to solve
// u'' + p*u' + q*u = f(x)
// with u(a) = u_a and u(b) = u_b
sample = plot(
solveBVP(
0,
13,
1,
0,
(x) => 0,
(x) => x,
(x) => x,
400
)
)
ed.realEigenvalues.slice(-5)
d3
.range(1, 6)
.map(n => -1 * (n * Math.PI) ** 2)
.reverse()
ed = new mlm.EigenvalueDecomposition(L)
L = term2(0, 1, N)
pts = [0]
.concat(ed.eigenvectorMatrix.getColumn(N - (m + 1)))
.concat([0])
.map((y, i) => [(i + 1) / N, y])
// The main function
function solveBVP(a, b, ua, ub, p, q, f, n) {
let h = (b - a) / n;
let L = term2(a, b, n);
let D = term1(a, b, n, p);
let C = term0(a, b, n, q);
let M = L.addM(D).addM(C);
let A = (ub - ua) / (b - a);
let B = (b * ua - a * ub) / (b - a);
let F;
if (typeof f == 'number') {
F = x => f + (A * x + B);
} else if (typeof f == 'function') {
F = x => f(x) - q(x) * (A * x + B) - p(x) * A;
}
let RHS = mlm.Matrix.columnVector(d3.range(a + h, b - h / 2, h).map(F));
let solution = mlm.solve(M, RHS).getColumn(0);
solution = [0].concat(solution.concat([0]));
solution = solution.map((u, i) => u + (A * (a + i * h) + B));
solution = d3.zip(d3.range(a, b + h / 2, h), solution);
return solution;
}
// The second order term, u''
function term2(a, b, n) {
let h = (b - a) / n;
let L = mlm.Matrix.zeros(n - 1, n - 1);
for (let i = 0; i < n - 1; i++) {
L.set(i, i, -2);
if (i < n - 2) {
L.set(i + 1, i, 1);
L.set(i, i + 1, 1);
}
}
L = L.mul((1 / h) ** 2);
return L;
}
// The first order term, p(x)*u'
function term1(a, b, n, p) {
let h = (b - a) / n;
let n_over_2h = n / (2 * (b - a));
let M = mlm.Matrix.zeros(n - 1, n - 1);
if (typeof p == 'number') {
for (let i = 0; i < n - 2; i++) {
M.set(i + 1, i, -n_over_2h * p);
M.set(i, i + 1, n_over_2h * p);
}
} else if (typeof p == 'function') {
for (let i = 0; i < n - 2; i++) {
M.set(i + 1, i, -n_over_2h * p(a + (i + 2) * h));
M.set(i, i + 1, n_over_2h * p(a + (i + 1) * h));
}
}
return M;
}
// The zeroth order term, q(x)*u
function term0(a, b, n, q) {
let h = (b - a) / n;
let M = mlm.Matrix.zeros(n - 1, n - 1);
if (typeof q == 'number') {
for (let i = 0; i < n - 1; i++) {
M.set(i, i, q);
}
} else if (typeof q == 'function') {
for (let i = 0; i < n - 1; i++) {
M.set(i, i, q(a + (i + 1) * h));
}
}
return M;
}
// A function to plot the solutions that arise from this technique
function plot(solution, opts = {}) {
let { actual = false } = opts;
let height = 0.6 * width;
let container = d3
.create('div')
.style('position', 'relative')
.style('width', `${width}px`)
.style('height', `${height}px`);
let graph = container
.append('div')
.style('position', 'absolute')
.style('width', `${width}px`)
.style('height', `${height}px`)
.style('background-color', 'white');
let target = graph.node();
let functionPlotData = [
{
points: solution,
fnType: 'points',
graphType: 'polyline'
},
{
points: solution,
fnType: 'points',
graphType: 'scatter'
}
];
if (actual) {
functionPlotData.unshift({ fn: actual });
}
console.log(functionPlotData);
let ymin = d3.min(solution.map(pt => pt[1]));
let ymax = d3.max(solution.map(pt => pt[1]));
functionPlot({
target: target,
width: width,
height: height,
xAxis: { domain: [solution[0][0], solution[solution.length - 1][0]] },
yAxis: { domain: [ymin, ymax] },
disableZoom: true,
data: functionPlotData
});
graph.selectAll('.origin').style('opacity', 0);
graph
.selectAll('circle')
.attr('r', 4)
.style('fill', 'black')
.style('stroke', 'black');
graph
.selectAll('.line-0')
.attr('stroke-width', 4)
.attr('stroke', 'red');
graph
.selectAll('.line-1')
.attr('stroke-width', 2)
.attr('stroke', 'green');
container
.append('div')
.style('position', 'absolute')
.style('width', `${width}px`)
.style('height', `${height}px`)
.style('top', '0px')
.style('left', '0px');
return container.node();
}
function matrix_to_TeX(M) {
let ff = d3.format("0.2~f");
function format(x) {
let formatted = ff(x);
if (formatted == "NaN") {
return '\\vdots';
} else {
return formatted;
}
}
function makeRow(R) {
let result = '';
let cut;
if (M.columns < 10) {
cut = -1;
} else {
cut = 9;
}
R.slice(0, cut).forEach(function(x) {
result = result + format(x) + ' & ';
});
if (cut == 9) {
result = result + '\\cdots &';
}
result = result + format(R.slice(-1)[0]) + '\\\\';
return result;
}
let MJSON = M.toJSON();
let tex_string = '\\begin{pmatrix}';
MJSON.slice(0, 9).forEach(function(r) {
tex_string = tex_string + makeRow(r);
});
if (M.columns > 10) {
tex_string = tex_string + makeRow(d3.range(M.columns).map(x => '.'));
}
if (M.columns >= 10) {
tex_string = tex_string + makeRow(MJSON.slice(-1)[0]);
}
tex_string = tex_string + ' \\end{pmatrix}';
return tex_string;
}
sin = Math.sin
cos = Math.cos
exp = Math.exp
pi = Math.PI
e = Math.E
import { Range } from "@observablehq/inputs"
MathJax = require('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js').catch(
() => window['MathJax']
)
functionPlot = require("function-plot@1/dist/function-plot")
mlm = require('ml-matrix')
d3 = require('d3@6')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.