Josh Carr joshcarr

Contract Killer

The popular open-source contract for web designers and developers by Stuff & Nonsense

Originally published: 23/12/2008
Revised date: 15/12/2013
Original post

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

10K points in an interactive line chart using the excellent Kay Chang's (AKA Syntagmatic) progressive rendering.

It also uses some nice tricks like throttling the brush move (from underscore) and bisecting the data points to find the hovered dots. The reactive hover and tooltip clearly shows that the UI is not blocked by the rendering. You can even hover the points before they are rendered!

	/*!
	* JavaScript - loadGoogleMaps( version, apiKey, language, sensor )
	*
	* - Load Google Maps API using jQuery Deferred.
	* Useful if you want to only load the Google Maps API on-demand.
	* - Requires jQuery 1.5
	*
	* UPDATES by Gavin Foley
	* - Tidied JS & made it JSLint compliant
	* - Updated script request to Google Maps API to be protocol relative

	$(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)

	GENERATED_FILES = \
	unemployment.tsv

	.PHONY: all clean

	all: $(GENERATED_FILES)

	clean:
	rm -rf -- $(GENERATED_FILES)

	<!DOCTYPE html>
	<title>Render Queue</title>
	<style type="text/css">
	html, body { background: #f7f7f7; height: 100%; margin: 0; padding: 0; color: #b6b6b6; font-family: Ubuntu, Helvetica, sans-serif; font-size: 15px; line-height: 1.35em;}
	a { color: #6be; text-decoration: none; }
	#canvas { position: fixed; }
	#center { position: absolute; top: 0; left: 0; margin: 40px; width: 520px; padding: 20px; background: #444; background: rgba(0,0,0,0.9); border-radius: 8px;}
	h1 { margin-top:0; padding: 3px 0; font-size: 1.4em; }
	h1, h3 { color: #f9f9f9; border-bottom: 1px solid #333; }
	h3 { font-size: 1em; }