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.
jxg_plot = {
return html`<div id="jxg_plot" class="jxgbox" style="width:800px; height:300px;"></div>`;
}
draw_first = draw_pic(params)
params = ({ beta: 0.2, omega: 5, alpha: 2, A: 2, x0: 2, v0: 0, B: 10 })
function draw_pic(params) {
let N = 1000;
let a = 0;
let b = params.B;
let sol = rk4(
F(params.beta, params.omega, params.alpha, params.A),
[params.x0, params.v0],
0,
a,
b,
N
).map(xy => xy[0]);
sol.N = N;
sol.a = a;
sol.b = b;
let brd = JXG.JSXGraph.initBoard('jxg_plot', {
boundingbox: [-b / 20, 4, b, -4],
showCopyright: false,
showNavigation: false,
axis: true,
// Weird way to hide the ticks per
// https://stackoverflow.com/questions/52068445/
defaultAxes: {
y: { ticks: { visible: true, majorHeight: 5 } },
x: { ticks: { visible: true, majorHeight: 5 } }
}
});
let curve = brd.create(
'curve',
[sol.map((x, i) => ((sol.b - sol.a) * i) / sol.N), sol],
{
strokeColor: 'black',
strokeWidth: 2
}
);
curve.highlight = function() {};
}
function F(beta, omega, alpha, A) {
return ([x, y], t) => [
y,
A * Math.cos(alpha * t) - omega * omega * x - 2 * beta * y
];
}
d3 = require('d3-selection@2', 'd3-scale@3', 'd3-drag@2', 'd3-format@2')
import { rk4 } from '@mcmcclur/runge-kutta-for-systems-of-odes'
// I've been experimenting with JSXGraph for simple, mathematical graphics
JXG = require("jsxgraph@1.2")
// Not a whole lot to this style sheet
//html`<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />`
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.
