Jonathan MacQueen jmacqueen

Click on a grey box to zoom deeper into the tree. Click on the orange box at the top to back out a level.

Adapted from the man himself. I believe in standing on the shoulders of giants.

Adding some collision detection makes the graph cleaner at a wider variety of settings. But notice that the conflict between collision detection, gravity pulling nodes together and links attempting to limit distance can create some unusual behavior at extreme values. The loners need a little space to escape :-)

There's some light refactoring going on here. The random node generation code now uses d3.range to generate an array of numbers and then map on top of that to create the node objects themselves. A similar approach is used for the links, too.

The collision detection code was lifted from here with minor tweaks to account for my node scaling.

If you want to interact with these D3.js gists without downloading them yourself, replace https://gist.github.com with http://bl.ocks.org to use Mike Bostock's excellent website for running D3.js gists.

	function tryWithRefresh(funcs, catchFunc){
	const outerPromises = funcs.map( fn => typeof fn === 'function' ? fn() : fn )
	return Promise.all(outerPromises)
	.catch( (err) => {
	if (err.status !== 401) { console.log(err); return; }
	authService.refreshToken()
	.then( () => {
	console.log('refresh success')
	const innerPromises = funcs.map( fn => typeof fn === 'function' ? fn() : fn )
	Promise.all(innerPromises)

	// app/instance-initializers/application.js
	import appInst from 'appName/utils/application'
	export function initialize( appInstance ) {
	appInst.instance = appInstance
	}

	export default {
	name: 'application',
	initialize
	};

	zookeeper:
	image: wurstmeister/zookeeper:3.4.6
	ports:
	- "2181:2181"
	kafka:
	image: ches/kafka:0.9.0.1
	ports:
	- "9092:9092"
	links:
	- zookeeper

	#!/bin/bash

	case $1 in
	help)
	echo 'usage: dyncount <table> <column> <"="\|"<>"\|"<"\|"<="\|">"\|">="> <type> <value>';
	echo 'example: ./dyncount user firstName "=" S Gary';
	echo '';
	echo 'usage: dyncount <table> <column> <attribute_exists\|attribute_not_exists>';
	echo 'example: ./dyncount user firstName attribute_exists';
	echo '';

	command: '/usr/local/bin/docker ps --format "{{.ID}}\t{{.Image}}\t{{.Command}}\t{{.Ports}}\t{{.Names}}"'

	refreshFrequency: 5000

	render: (output) -> """
	<table>
	<thead>
	<tr>
	<th>Container Id</th>
	<th>Image</th>

	/* jshint esversion: 6 */

	// Two strings enter...one string leaves
	const longerString = (a,b) => {
	if (a.length > b.length) { return a; }
	return b;
	};

	// The longest possible match from the beginnning of the strings is returned
	const stringHeadMatch = function(a,b) {

	alignItems : 'stretch' # default: 'stretch'
	alignContent : 'stretch' # default: 'stretch'
	flexDirection : 'row' # default: 'row'
	flexWrap : 'wrap' # default: 'nowrap'
	justifyContent : 'flex-start' # default: 'flex'-start'

	refreshFrequency: false

	command: "echo"

	// jQuery-free form values
	// Should work in IE9+

	var frm = document.querySelector('form'); // Must return containing form

	var valueHash = Object.keys(frm.elements).slice(frm.elements.length + 1).reduce(function(a,key){
	var elm = frm.elements[key];
	if(elm.type !== "checkbox" \|\| elm.type == "checkbox" && elm.checked !== false) {
	a[key] = elm.value;
	}