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.
A Julia set on the Riemann sphereThe Z-CurveBarnsley's fernA stochastic digraph IFS algorithmSelf-affine tilesThe TwindragonThe Eisenstein fractionsA self-affine tile with holesSelf-affine tiles via polygon mergeGolden rectangle fractalsBifurcation diagram with critical curvesThe tame twindragonIllustrations for the proof of Green's theoremNon-orientability of a Mobius stripExamples of parametric surfacesPenrose tilingThe extended unit circlePenrose three coloringNewtons's method on the Riemann sphereConic sectionsDivisor graphsThe dance of Earth and VenusIterating multiples of the sine functionBorderline fractalsSelf-similar intersectionsBox-counting dimension examplesMandelbrot by dimensionInverse iteration for quadratic Julia setsInteger Apollonian PackingsIllustrations of two-dimensonal heat flowThe logistic bifurcation locusThe eleven unfoldings of the cubeA unimodal function with fractal level curvesGreen's theorem and polygonal areaThe geometry and numerics of first order ODEsThe xxx^xxx-spindleAnimated beatsRauzy FractalsHilbert's coordinate functionsPluckNot PiDrum strikeThe Koch snowflakeFractalized squareA Taylor series about π/4\pi/4π/4PlotX3D HyperboloidA PlotX3D animationModular arithmetic in 5th grade artSimple S-I-R ModelThe Poisson KernelPoly-gasketsClassification of 2D linear systems via trace and determinantJulia sets and the Mandelbrot setWater wavesFourier SeriesDisks for a solid of revolutionOrbit detection for the Mandelbrot setTracing a path on a spherePlot for mathematiciansFunctions of two variablesPartial derivativesDijkstra's algorithm on an RGGGradient ascentUnfolding polyhedraTangent plane to a level surfaceA strange discontinuityExamples of level surfacesMcMullen carpetsHills and valleysThe definition of ⇒Double and iterated integralsMST in an RGGTrees are bipartiteFractal typesettingK23 is PlanarPolar CoordinatesParametric region generatorParametric Plot 2DContour plotsGreedy graph coloringGraph6A few hundred interesting graphsThe Kings ProblemFirst order, autonomous systems of ODEsRunge-Kutta for systems of ODEs
d3.hierarchy and d3.tree
// Here's the drawing. It's pretty standard d3.selection.join type stuff built on
// top of all the tools below.
pic = {
let svg = d3.create("svg").attr("width", size.w).attr("height", size.h);
let g = svg
.append("g")
.attr("transform", `translate(${size.margin}, ${size.margin})`);
let links = root.links();
g.append("g")
.attr("id", "links")
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", diagonal)
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5);
let nodes = root.descendants();
g.append("g")
.selectAll("circle")
.data(root.descendants())
.join("circle")
.attr("cx", (d) => (size.w > size.size_break ? d.y : d.x))
.attr("cy", (d) => (size.w > size.size_break ? d.x : d.y))
.attr("r", 4 * (size.w / 1000) ** 0.5)
.attr("fill", "black");
return svg.node();
}
// There's a family of d3.link* functions that work well with d3.hierarchy and d3.tree.
// They all accept output from root.links (which returns pairs of linked nodes) and
// draws some type of path from one node to the other.
diagonal = {
if (size.w > size.size_break) {
return d3
.linkHorizontal()
.x((d) => d.y)
.y((d) => d.x);
} else {
return d3
.linkVertical()
.x((d) => d.x)
.y((d) => d.y);
}
}
// Here's another look at root, which was defined two cells down from here.
// This one waits until layout resolves, though, so you can see its effect.
// In particular, note that the nodes of this nested structure have x and y
// properties that we can use for placement.
{
layout;
return root;
}
// d3.tree()(hierarchy) supplements the input hierarchy further
// with layout information. See the next cell above to see what
// I mean.
layout = {
if (size.w > size.size_break) {
return d3.tree().size([size.h - 2 * size.margin, size.w - 2 * size.margin])(
root
);
} else {
return d3.tree().size([size.w - 2 * size.margin, size.h - 2 * size.margin])(
root
);
}
}
// d3.hierarchy accepts a nested structure like we already have and supplements it
// with additional tools. For example,
// any_node.descendants() will list all nodes descended from any_node.
// root.descendants() therefore lists all nodes.
// any_node.links() will, similarly, list all pairs of nodes that are connected.
root = d3.hierarchy(tree)
// This is the initial data set up via a standard random tree construction.
// The root node is an object with two properties:
// depth: which tells you how many steps from the root node you are and
// children: which is an array initialized to be just []
// We put the root on a stack and then, while the stack is non-empty,
// we pop a node off, randomly generate up to three children, put
// those the stack, and continue. Note that the probability of generating
// children decreases exponentially with depth.
tree = {
new_tree;
let p = 0.7;
let root = { depth: 0, children: [] };
let stack = [root];
while (stack.length > 0) {
let node = stack.pop();
for (let i = 0; i < 3; i++) {
if (d3.randomUniform(0, 1.2)() < p ** node.depth) {
let child = { depth: node.depth + 1, children: [] };
node.children.push(child);
stack.push(child);
}
}
}
return root;
}
// Just a little global variable that affects both layout and pic.
size = {
let w = d3.min([width, 1000]);
let h = 0.625 * w;
let margin = 10;
let size_break = 0;
return { w, h, margin, size_break };
}
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.