Bret Kim chitacan

A re-implementation of Jason Davies’ Phylogenetic Tree of Life, with faded gray lines to connect the leaf nodes of the tree to their corresponding labels inspired by a figure from Nature.

This implementation modifies the depth of interior nodes in a cluster layout to show branch lengths. Toggle the checkbox in the top-left corner to show or hide branch lengths, and mouseover a label to highlight its path to the root.

Still a secret for now, but it's not hard to guess what it will be used for...

This example uses a custom tween that interpolates the window’s vertical scroll offset.

A mashup of Map Projection Distortions and transitions using the D3.js extended geographic projections plugin.

A comparison of map projections by four different types of distortion:

Acc. 40° 150% – The Acceptance index is a numerical measure that summarizes overall projection distortion, in this case with a maximum angular distortion of 40° and areal distortion of up to 150%.
Scale – The weighted mean error for overall scale distortion.
Areal – The weighted mean error for areal distortion.
Angular – The mean angular deformation index.

Lower is better. Data transcribed from the Natural Earth Projection by @mbostock.

Mouseover to see flights originating at the specified airport. The cool thing about this technique is that the interaction requires zero JavaScript — it’s all done in CSS using the :hover state to toggle visibility of an airport’s associated outgoing flight routes.

The tree layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.'s linear-time variant of the Reingold-Tilford algorithm. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Compare to this Cartesian layout.

_.chain()
  .filter()
  .map()
  .flatten()
  .value()

for > 800 items

	console.clear()

	# Recipes from "RXJS Lessons"
	# (https://www.youtube.com/playlist?list=PLX7ZnQs0Gb1pc1vNduNaIgFiyQ3THgymv)
	# (https://jsbin.com/garaci/31/edit)

	# ----------------------------------------------
	# 1. creating an observable
	src_1 = Rx.Observable.create (observer) ->
	id = setTimeout () ->

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

	.node {
	font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
	fill: #bbb;
	}

	.node:hover {

	d3 = function() {
	var d3 = {
	version: "3.1.10-xsystem"
	};
	if (!Date.now) Date.now = function() {
	return +new Date();
	};
	var d3_document = document, d3_window = window;
	try {
	d3_document.createElement("div").style.setProperty("opacity", 0, "");