Alec Barrett anbnyc

d3.timer and trigonometry

This gist uses d3.timer to simulate motion by continuously updating the positions of elements. Two points move along the circumference of two circles each, lines connect the points on the left circle with the points on the right circle, and the bar graph below shows the full-scale length of the lines in real time. Together, the bars follow an almost rhythmic cyclical pattern, all following from the movement of the points along simple sine/cosine curves.

This project was loosely inspired by Baroque.me.

	<!DOCTYPE html>
	<!-- Adapted from D3Noob and Mike Bostock -->
	<!-- http://bost.ocks.org/mike/sankey/ -->
	<!-- http://bl.ocks.org/d3noob/5028304 -->
	<meta charset="utf-8">
	<title>Stock-Flow Diagram</title>
	<style>

	.node rect {
	cursor: move;

	<html ng-app="plan-app">
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.layouts.css">

	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
	<style>

	.axis path,
	.axis line {
	fill: none;
	stroke: black;

	[
	{
	"Country":"Refugee Olympic Team",
	"Region":"Other",
	"Athletes":10,
	"Population":60000000,
	"ppa":6000000
	},
	{
	"Country":"Cook Islands",

	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
	<style>
	rect{
	fill: rgba(0,0,0,.2);
	stroke: black;
	}
	</style>
	</head>
	<body>

	// following Khan Academy's structure
	// https://www.khanacademy.org/computing/computer-science/algorithms/merge-sort/a/overview-of-merge-sort

	function mergeSort(array,p,r){
	if(p < r){
	var q = Math.floor((p + r)/2);
	mergeSort(array, p, q);
	mergeSort(array, q+1, r);
	merge(array, p, q, r);
	}

	/***
	* Tree Data Structure Implementation
	*/

	/**
	* Generates a tree
	* @param {String} data
	* @return {Object} Tree
	*/
	function Tree(data) {

	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
	<style>
	body{
	padding: 12px;
	}

	text{
	font: Garamond;