Josh Carr joshcarr

Fast prototyping of apps using Sketch and d3.js, please refer to the the explanatory post.

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

	$(function(){

	var formUrl = '/* ex: https://docs.google.com/a/developmentseed.org/spreadsheet/formResponse?formkey=... */';

	// Set up map
	var m = mapbox.map('map').addLayer(mapbox.layer().id(' /* mapbox-account.id */ '));

	// Set up map ui features with point selector
	var ui = mapbox.ui().map(m).auto().pointselector(function(d) {
	// Remove all points except the most recent

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>One Graph</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
	<script type="text/javascript" src="simple-graph.js"></script>
	<style type="text/css">
	body { font: 13px sans-serif; }
	rect { fill: #fff; }

	These character sets are not exhaustive, but merely a quick reference for common characters.

	Quotation
	‘ ‘ \2018 Open single quotation mark
	’ ’ \2019 Closed single quotation mark / Apostrophe
	“ “ \201C Open double quotation mark
	” ” \201D Closed double quotation mark
	' ' \0027 Typewriter single quotation mark
	" " \0022 Typewriter double quotation mark
	′ ′ \2032 Prime (Feet / Minutes)

	// Creating sound waves with JavaScript
	// from http://js.do/blog/sound-waves-with-javascript/

	var samples = []

	//
	//
	//
	// Achord

	javascript:(function(){

	// avoid the bookmarklet activating more than once
	if (window.MyNamespace) {
	return;
	}
	window.MyNamespace = { };

	var version = 1,
	script = document.createElement('script');

	GENERATED_FILES = \
	unemployment.tsv

	.PHONY: all clean

	all: $(GENERATED_FILES)

	clean:
	rm -rf -- $(GENERATED_FILES)

	// Ask DN : Whats your favourite CSS hack / quick fix?
	// https://news.layervault.com/stories/24631-ask-dn--whats-your-favourite-css-hack--quick-fix

	/* Helps you do skeletal prototyping without worrying about colour or content */
	*{outline:1px solid rgba(255,0,85,0.2)}

	/* CLEARFIX!!! based on http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */
	.cf:before,
	.cf:after {
	content: ".";

	// from this answer: http://stackoverflow.com/a/18843630

	function clone(obj) {
	// Handle the 3 simple types, and null or undefined
	if (null == obj \|\| "object" != typeof obj) return obj;

	// Handle Date
	if (obj instanceof Date) {
	var copy = new Date();
	copy.setTime(obj.getTime());