Bill Morris wboykinm

This map of plant hardiness zones shows the average annual extreme minimum temperature (from 1976-2005) across the contiguous United States. Data via Bill Morris’ Open Plant Hardiness Zones project.

THIS IS THE WORK OF MIKE BOSTOCK! IN ITS ENTIRETY! I'M JUST FIDDLING WITH THE STYLES!

This is a simple example of using CSS class names to support cross-linking between tree elements. Each element in the tree has an associated type field in the data, indicating whether the species is wild or domesticated. (This is bogus data, of course, and only for demonstration purposes.) When you mouseover one of the leaf nodes, other nodes of the same type will highlight.

The coordination happens in two places. First, the G elements for the nodes have a computed class attribute:

.attr("class", function(d) { return "node " + d.type; })

Next, register a mouseover and mouseout handler for interaction:

The equirectangular projection is available as d3.geo.equirectangular. See also the rotating version.

A combination of the map zooming and dynamic simplification demonstrations: as the map zooms in and out, the simplification area threshold is adjusted so that it is always appropriate to the current scale. Thus, the map looks good and renders quickly at all points during the animation.

An additional rendering optimization is that points outside the current viewport are much more heavily simplified than points inside the viewport. This is, in effect, a cheap approximation of viewport clipping.

MOSTLY THE WORK OF @DWTKNS! TAKE NOTE! Extent indicator globe using d3.geo.orthographic and radial gradients.

Slippy map code from:
http://bl.ocks.org/3943330 by tmcw
http://bl.ocks.org/4132797 by mbostock

Map tiles from Mapbox

Thanks to Ben Balter For - in this case - showing how the Github CRUD API can be used to tap hosted topojson (or geojson) for cross-domain apps like this D3 implementation.

	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet TopoJSON Example</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

	<?php
	$ch = curl_init($_GET['url']);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	$output = curl_exec($ch);
	curl_close($ch);
	echo $output;
	?>

	WITH RECURSIVE dims AS (SELECT 2sqrt(sum(ST_Area(the_geom))) as d, sqrt(sum(ST_Area(the_geom)))/20 as w, count() as rows FROM territory_all_copy WHERE the_geom IS NOT NULL),
	geoms AS (SELECT the_geom, ST_YMax(the_geom)-ST_YMin(the_geom) as height FROM territory_all_copy WHERE the_geom IS NOT NULL ORDER BY ST_YMax(the_geom)-ST_YMin(the_geom) DESC),
	geomval AS (SELECT the_geom, row_number() OVER (ORDER BY height DESC) as id from geoms),
	positions(the_geom,x_offset,y_offset,new_row,row_offset) AS (
	(SELECT the_geom, 0.0::float, 0.0::float, FALSE, 2 from geomval limit 1)
	UNION ALL
	(
	SELECT
	(SELECT the_geom FROM geomval WHERE id = p.row_offset),
	CASE WHEN

	<!--Example for: http://mapbox.com//blog/vector-tile-sandwich/-->

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<html>
	<head>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />