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.
Published
Edited
Apr 10, 2021
22 stars
function make_preview(nbd) {
let cuttoff = 555;
let img_scale = 0.5;
let img_width = img_scale * 640;
let img_height = img_scale * 400;
let div = d3
.create('div')
.attr('class', 'preview_container')
.style('margin', '15px 0px')
.style('padding', '20px 25px 0px 25px')
.style('position', 'relative')
.style('width', `${preview_width}px`)
.style('min-height', `${img_height + 45}px`)
.style('border', 'solid 1.5px #bbb')
.style('border-radius', '10px')
.on('mouseenter', function(evt) {
d3.select(this)
.style('box-shadow', '0 0 0 rgba(0,0,0,0)')
.transition()
.duration(100)
.style('box-shadow', '0 0 10px rgba(0,0,0,0.6)');
})
.on('mouseleave', function(evt) {
d3.select(this)
.style('box-shadow', '0 0 10px rgba(0,0,0,0.6)')
.transition()
.duration(100)
.style('box-shadow', '0 0 0 rgba(0,0,0,0)');
});
let title = div.append('h3').text(nbd.title);
let content = div.append('div');
let img_container = content
.append('div')
.style('position', preview_width < cuttoff ? 'static' : 'absolute')
.style('width', `${img_width}px`)
.style('height', `${img_height}px`)
.style('top', preview_width < cuttoff ? 'static' : '45px')
.style('right', preview_width < cuttoff ? 'static' : '20px')
.style('pointer-events', 'none');
img_container
.append('img')
.attr('src', nbd.thumb)
.attr('width', `${img_width}px`)
.attr('height', `${img_height}px`);
content
.append('div')
.style(
'width',
preview_width < cuttoff
? `${preview_width - 20}px`
: `${preview_width - img_width - 20}px`
)
.append(() => nbd.description);
content.append('h4').text(nbd.embed_link ? 'Links' : 'Link');
let list = content.append('ul');
list
.append('li')
.append('a')
.attr('href', nbd.url)
.attr('target', '_blank')
.text('Notebook');
if (nbd.embed_link) {
list
.append('li')
.append('a')
.attr('href', nbd.embed_link)
.attr('target', '_blank')
.text('Embedded version');
}
return div.node();
}
nb_data = [
{
title: 'Koch vibration',
thumb:
'https://static.observableusercontent.com/thumbnail/83ce9d1d03614c275a248341d297bd1725ef5799d2be6f5ba823b6ef0297a47d.jpg',
url: 'https://observablehq.com/@mcmcclur/koch-vibration',
description: md`This notebook illustrates the fundamental vibrational modes of the Koch snowflake.`,
dimension: 2,
dimension_order: 1,
implementation: 'precomputed'
},
{
title: 'Drum strike',
thumb:
'https://static.observableusercontent.com/thumbnail/a944d491ef0fef9697868ce983b6d77e3b291021dfedd369088ed3d6f64d809d.jpg',
url: 'https://observablehq.com/@mcmcclur/drum-strike',
description: md`Illustrates the damped vibration of several oddly shaped drums if you strike them near the center.`,
dimension: 2,
dimension_order: 2,
implementation: 'precomputed'
},
{
title: 'Pluck',
thumb:
'https://static.observableusercontent.com/thumbnail/eec3435af7b55bafdcedb0fcb50317444184b00d0ca826387b2cad74515f8ad8.jpg',
url: 'https://observablehq.com/@mcmcclur/pluck',
embed_link: 'https://marksmath.org/classes/Spring2021PDE/demos/Pluck.html',
description: md`Allows you to pluck a string which then vibrates according to where you plucked it. The vibration slows down under the influence of damping until it comes to a rest.`,
dimension: 1,
dimension_order: 1,
implementation: 'client'
},
{
title: 'Illustrations of two dimensonal heat flow',
thumb:
'https://static.observableusercontent.com/thumbnail/4bb47def1903f7578cf27e9b74aa97ffcb290740d7037350878e5eb68dfbb92b.jpg',
url:
'https://observablehq.com/@mcmcclur/illustrations-of-two-dimensonal-heat-flow',
embed_link:
'https://marksmath.org/classes/Spring2021PDE/demos/HeatExamples2D.html',
description: md`Presents several pre-built animations of heat flow through two dimensional regions.`,
dimension: 2,
dimension_order: 3,
implementation: 'precomputed'
},
{
title: 'Two dimensional vibrational modes',
thumb:
'https://static.observableusercontent.com/thumbnail/05cb3b6634dbe56c63a3cdc478db5e090ac997c4ded197d223618c4a54f370be.jpg',
url: 'https://observablehq.com/@mcmcclur/two-dimensional-vibrational-modes',
description: md`Illustrates the fundamental vibrational modes of several two dimensional regions. It also allows the user to specify a region using Constructive Solid Geometry (as described shortly).`,
embed_link:
'https://marksmath.org/classes/Spring2021PDE/demos/Eigenmodes2D.html',
dimension: 2,
dimension_order: 4,
implementation: 'server'
},
{
title: 'Fourier series',
thumb:
'https://static.observableusercontent.com/thumbnail/c62d0937074bb58d209e518257c6f036c8ecd7744ac6d329625200471fa5e865.jpg',
url: 'https://observablehq.com/@mcmcclur/fourier-series',
embed_link:
'https://marksmath.org/classes/Spring2021PDE/demos/FourierSeries.html',
description: md`Allows the user to specify a function, interval, a series type; the graph of the function and resulting Fourier series are then drawn together. In addition to the graph (which is computed numerically), a symbolic represetation of the series is generally displayed for most elementary functions.`,
dimension: 1,
dimension_order: 2,
implementation: 'server'
},
{
title: 'One dimensional heat flow',
thumb:
'https://static.observableusercontent.com/thumbnail/6b685054d2e89289c5973c0fc3dce52e177921e5a527feb2a352514902144756.jpg',
url: 'https://observablehq.com/@mcmcclur/one-dimensional-heat-flow',
embed_link:
'https://marksmath.org/classes/Spring2021PDE/demos/HeatExplorer1D.html',
description: md`Allows the user to specify a heat conduction problem and then visualize the resulting change in temperature distribution.`,
dimension: 1,
dimension_order: 3,
implementation: 'client'
},
{
title: 'One dimensional waves',
thumb:
'https://static.observableusercontent.com/thumbnail/9ead643320edb3433b9f3320e3e26c25cdaef0f04a239e66b82fdab20e442e5a.jpg',
url: 'https://observablehq.com/@mcmcclur/one-dimensional-waves',
embed_link:
'https://marksmath.org/classes/Spring2021PDE/demos/WaveExplorer1D.html',
description: md`Allows the user to specify a wave propagation problem and then visualize the resulting vibration.`,
dimension: 1,
dimension_order: 4,
implementation: 'client'
},
{
title: 'Constructive solid geometry',
thumb:
'https://static.observableusercontent.com/thumbnail/71a4a86e3f18be8bd3bc306a449c9a1c6b907c49ef0f8634454f27f0023cc38c.jpg',
url: 'https://observablehq.com/@mcmcclur/constructive-solid-geometry',
embed_link: 'https://marksmath.org/classes/Spring2021PDE/demos/CSG.html',
description: md`When you move up to two dimensions, you need some general syntax to describe two dimensional domains. Such a language is described by *Constructive Solid Geometry*, or CSG.`,
dimension: 2,
dimension_order: 5,
implementation: 'server'
},
{
title: 'Steady state heat explorer in 2D',
thumb:
'https://static.observableusercontent.com/thumbnail/17d452e5592f041971dac5f89bd7b8b728880c2cff85754c7e6386928923e7c5.jpg',
url: 'https://observablehq.com/@mcmcclur/steady-state-heat-explorer-in-2d',
embed_link:
'https://marksmath.org/classes/Spring2021PDE/demos/SteadyStateHeatExplorer2D.html?locale=class_page',
description: md`Allows the user to describe a two dimensional region together with boundary conditions and a source function. The steady state temperature distribution is then displayed in as a density map in two dimensions or as a graph in three dimensions`,
dimension: 2,
dimension_order: 6,
implementation: 'server'
},
{
title: 'Diffusion in 2D',
thumb:
'https://static.observableusercontent.com/thumbnail/9b556cec1793e699621014a1cab2005f3b1e4f52a8be21c29718fd1263ba63a2.jpg',
url: 'https://observablehq.com/@mcmcclur/diffusion-in-2d',
embed_link:
'https://marksmath.org/classes/Spring2021PDE/demos/HeatExplorer2D.html?locale=class_page',
description: md`This is similar to the 2D steady state heat explorer, but includes a temporal variable and illustrates the result as an animation.`,
dimension: 2,
dimension_order: 7,
implementation: 'server'
},
{
title: 'Radial vibration',
thumb:
'https://static.observableusercontent.com/thumbnail/0d956b8b6c98c39900c92da2d3b136010183c9b92e7977e83c93afcabcde2493.jpg',
url:
'https://observablehq.com/@mcmcclur/rotationally-invariant-vibrational-modes-of-a-disk',
description: md`Illustrates the natural modes of vibration of a disk that are rotationally invariant. The implementation, involving Bessel functions, is entirely client side.`,
dimension: 2,
// dimension_order: 4,
implementation: 'client'
},
{
title: 'Radial heat flow',
thumb:
'https://static.observableusercontent.com/thumbnail/fc7a9e786369dea05a603d511643fd4b1ec32e04a3d47bc685ebc5f7ecdee385.jpg',
url: 'https://observablehq.com/@mcmcclur/radial-heat-flow',
description: md`Illustrates the flow of heat through a disk assuming a rotationally invariant initial temperature distribution and no source. The implementation, involving Bessel functions, is entirely client side.`,
dimension: 2,
// dimension_order: 4,
implementation: 'client'
},
{
title: 'Numerical solution of 1D, linear BVPs',
thumb:
'https://static.observableusercontent.com/thumbnail/6a31a0f8fec2ef5ec273ade279be6b39e4a2aff465f6ec08ff6ea50ea2ea24c3.jpg',
url:
'https://observablehq.com/@mcmcclur/numerical-solution-of-1d-linear-bvps',
description: md`Presents a numerical technique to find approximate solutions to steady state, second order boundary value problems in one dimension.`,
dimension: 1,
dimension_order: 5,
implementation: 'client'
},
{
title: 'The method of lines',
thumb:
'https://static.observableusercontent.com/thumbnail/bd172865af84acf7a6b8ed1d2fc8bc28cc8c1ab79dcd6b91251e79aaf28f9277.jpg',
url: 'https://observablehq.com/@mcmcclur/the-method-of-lines',
description: md`Presents a numerical technique to find approximate solutions to parabolic PDEs in one dimension.`,
dimension: 1,
dimension_order: 6,
implementation: 'client'
}
]
preview_width = 0.9 * width
import { Radio } from "@observablehq/inputs"
d3 = require('d3-selection', 'd3-transition')
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.
