Matthew Clemens enjoylife

This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.time.format - parse dates
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.scale.category10, a d3.scale.ordinal - color encoding
d3.extent, d3.min and d3.max - compute domains
[d3.k

This example demonstrates the use of post-selection to customize an axis, even across transitions. After the axis is rendered, its elements (such as text labels, here) are reselected and modified to produce the desired appearance. When transitioning the axis, the post-selection modifies entering, updating and exiting elements. Passing null values to transition.tween cancels default tweens scheduled by the axis in favor of the customized styles.

This variation of a line chart demonstrates a sequence of chained transitions. Clicking on the radio buttons changes the displayed metric. First, the line transitions to the new values. Then, the axes rescale to fit the new data.

	1. Generate keys on local machine: `ssh-keygen`

	2. Create `~/.ssh` directory on remote machine

	3. Copy `local:~/.ssh/id_rsa.pub` to `user@remote:~/.ssh/authorized_keys`

	method a) `ssh-copy-id -i ~/.ssh/id_rsa.pub user@host`
	method b) cat .ssh/id_rsa.pub \| ssh user@host 'cat >> .ssh/authorized_keys'

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Force-Directed Graph</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.25.0"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.25.0"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.25.0"></script>
	<style type="text/css">

	// create a 2d array
	function createGrid(rows, columns) {
	var grid = new Array(rows);
	for(var i = 0; i < rows; i++) {
	grid[i] = new Array(columns);
	for(var j = 0; j < columns; j++) {
	grid[i][j] = 0;
	}
	}
	return grid;

	/**
	* Circular Tooltip (SO)
	* http://stackoverflow.com/q/13132864/1397351
	*/
	* { margin: 0; padding: 0; }
	body {
	overflow: hidden;
	background: url(http://theearlcarlson.com/experiments/amTooltip/img/bg.jpg);
	}
	/* generic styles for button & circular menu */

	/*
	* Partial applied functions in C
	* Leandro Pereira <[email protected]>
	*/
	#include <assert.h>
	#include <stdio.h>
	#include <stdlib.h>
	#include <string.h>
	#include <stdint.h>
	#include <stdbool.h>

	(function() {
	var po = org.polymaps;

	po.canvas = function() {
	var canvas = po.layer(load, unload),
	image = po.svg("image"), // dummy image
	url;

	function load(tile) {
	var size = canvas.map().tileSize(),