Justin Goodwin jgbos

Uses prototypes instead of closures to execute the D3 enter/update/exit pattern. This example shows the axes, grids, and plot elements being updated on each call so that the enter, update, and exit functions are executed. The code is based off of the javascript code for mpld3. You can find the code base for this visualization here.

This is an example of adding simple interface for single axis zoom and pan capability using the mouse. When the mouse is over the x or y axes, the panning and zooming with the mouse will execute on only those axes. When the mouse is over the main plotting canvas, pan and zoom with the mouse works on both axes. Feel free to comment on the gist.

Jason Davies recently demostrated the power of map projections for visualizating the distance a missile from North Korea would have to travel to hit any point on earth. An assumption in his visualization is that the earth is spherical and not rotating during the trajectory. This visualization examines the distances given the following assumptions:

Spherical, non-rotating: Left plot copies Jason's creation , each contour is 1,000 km
Spherical, rotating: Middle plot assumes a rotating earth, but keeps the earth as a sphere
Elliptical, rotating: Right plot models the WGS-84 elliptical earth that rotates

As expected, the rotating earth makes a difference on the actual distance a missile would travel over the earth (keeping the range of the missile constant). Trajectories moving eastward along the direction the earth is rotating travel less distance and opposite for westward trajectories. There isn't much difference between spherical and elliptica

Note: Best viewed with Google Chrome; not tested on any other browser. If you view with another browser or on a smartphone the animation may not be smooth due to the computations of trajectories happening as they are drawn.

This demonstrates the power of numerical integration of nonlinear equations using Javascript in the browser. I would have never considered using Javascript for such a task if I had not seen the benchmark tests for Julia and Numeric.js.

The animation is based on an influential movie from my childhood, Wargames. I must have watched it a hundred times as a kid. Since I've been trying to learn D3, I thought I'd try to recreate a portion of the final scene (you can watch here) using javascript. Some thoughts on the scene:

Clearly the movie uses a Mercator projection

	from abc import abstractmethod
	from collections import defaultdict
	from typing import Any, Dict, List, Mapping, Optional, Sequence, Union
	from hydra.core.utils import JobReturn

	from hydra_zen import make_config

	from .hydra import launch, zen

	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Time of Flight from North Korea</title>
	<style>

	body {
	background: #fcfcfc;
	}

	.background {

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	svg {
	background: #222;
	}


	</style>
	<body>

	(function() {
	// From http://bl.ocks.org/mbostock/3057239
	var φ = 1.618033988749895,
	ρ = 180 / Math.PI;

	var vertices = [
	[1,φ,0], [-1,φ,0], [1,-φ,0], [-1,-φ,0],
	[0,1,φ], [0,-1,φ], [0,1,-φ], [0,-1,-φ],
	[φ,0,1], [-φ,0,1], [φ,0,-1], [-φ,0,-1]
	];

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {