Instantly share code, notes, and snippets.


Canvas-based rendering test.

This is a work in progress.

Uses vizflow.js - an application-agnostic interactive visualization engine written using EcmaScript.6 (ES6) with no other external dependencies. The compiled/minified size is under 10 kilobytes, providing a lighter-weight library for adding transition effects to HTML5 documents compared to D3js.


simple svg path scroll demo

Scrolling will interpolate between two paths


vizflow demo - three circles

vizflow.js is an application-agnostic interactive visualization engine written using EcmaScript.6 (ES6) with no other external dependencies.

It provides a lightweight interactive visualization engine with smaller footprints than other visualization libraries like D3js.

This vizflow demo contained in index.html shows an interactive stochastic dynamics simulation with 3 frictionless, non-interacting particles in a rectangular domain with inelastic boundaries.

Also viewable as block for remote demoing.


Inner-product Visualization (2D)

This is a visualization of the inner (dot) product of two vectors in two-dimensional Euclidean space.

See this page on LinkedIn for a longer description.

It shows the geometric definition of the inner product of two vectors

(a, b) = |a| |b| cos θ


Visual Optimization

This is an example of interactive or "visual" optimization.

Sliding the slider above the heatmap adjusts the color-map scale for the heatmap display, relative to the current best computed value.

The sliders on the right control which pair of coordinates is plotted using the heatmap.

Click on the heatmap to update the current position along the 2 coordinates shown in the heat map.



Gradient flow example using bilinear interpolation of matrix map of Earth altitudes.

For this example, I computed the gravitational force field from a gradient of a 2-D potential energy function, in this case a bilinearly interpolated matrix map of average altitudes of the Earth at every degree (a 180-by-360 dataset).

This global elevation dataset is included with Matlab and is available by running "Load topo". Their doc page references National Geophysical Data Center, NOAA US Department of Commerce under data announcement 88-MGG-02:


This is a visualization of the Newton-Raphson algorithm in 2-D. Specifically, this visualization shows how Newton's method generates optimization steps from the 2-D quadratic functions used to approximate the objective function at every iteration.

The contour plots show the heights of quadratic surfaces over the plane. Red indicates positive height, blue indicates negative height, and gray represents zero (arbitrary units). Since constant terms don't change solutions to optimization problems, they can be set to zero without loss of generality.

Moving the mouse cursor over the plot creates green and gray arrows. The green arrows show the Newton step vector for the cursor's position, and the gray arrows show the gradient vector. Newton's method always finds critical points of quadratic functions in one step, which is why the green arrow always points to the origin.

The sliders control the eigenvalues of the real symmetric Hessian matrix defining the quadratic objective function. When either one or both


Newton's method solves quadratic optimization problems in one step because the derivative of a parabola is a straight line, so every linear fit provides an exact approximation. To make things a little more interesting, this visualization combines a trigonometric cosine function in such a way that the global minimizer occurs at x = 0 regardless of the weight of the cosine term. The extra cosine term provides a convenient expression that creates nonlinear structure in the derivative, to better reveal some of the interesting properties of the algorithm.

The upper plot shows the objective function as a blue line with arbitrary units on the y-axis. Background colors indicate the percentage of failures to converge within 10 steps in the neighborhood of a given initial position. Green indicates low failure percentage, while dark red indicates high failure percentage. The lower plot shows the objective function's derivative, a straight line combined with a trigonometric sine function.

Clicking either plot selects t

View index.html
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src=""></script>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
circle {
stroke: #000;