Mike Slattery slattery

Time scales

D3's time axis does magic things. I expected to modify the x axis such that I could mostly re-use D3's date formatting tricks, but exercise greater control over the resolution at different time scales.

Create a earthquake time range by clicking and dragging on the timeseries.

This map & chart shows earthquakes (magnitude 3.0 or greater) that occurred in the Canterbury region of New Zealand during the month of September, 2010.

The shade of the map circles show the depth of the earthquake. Lighter shades are shallower and darker shades are deeper.

The map is created using [Leaflet]. The earthquake layer is a custom [Leaflet] layer which uses d3js to generate a svg overlay.

Earthquake data sourced from GeoNet.

Designed by Stephen Few, a bullet chart “provides a rich display of data in a small space.” A variation on a bar chart, bullet charts compare a given quantitative measure (such as profit or revenue) against qualitative ranges (e.g., poor, satisfactory, good) and related markers (e.g., the same measure a year ago). Layout inspired by Stephen Few. Implementation based on work by Clint Ivy, Jamie Love of N-Squared Software and Jason Davies. The "update" button randomizes the values slightly to demonstrate transitions.

A demonstration of D3’s vertically-oriented bullet charts, based on this example.

	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body ng-app>
	<div ng-controller="ParentCtrl">
	<p>{{foo}}</p>

	<!doctype html>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<html>
	<head>
	<title>test</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Chronological Diagram of Asia</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
	<style type="text/css">
	.chart {
	shape-rendering: crispEdges;
	}

	<!--
	The MIT License (MIT)

	Copyright (c) 2013 [email protected]

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is

	<html>

	<head>

	<title>Swimlane using d3.js</title>

	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>

	<script type="text/javascript" src="randomData.js"></script>