patricksurry

A simple clock made with D3.

After I'd made it I got a bit caught up in trying to make it look like Dieter Ram's Braun clock face adding a whole bunch fo extra stuff...

It's still not quite there.

patricksurry

license: gpl-3.0

patricksurry

license: gpl-3.0
height: 2910
border: no

patricksurry

The Delaunay triangulation, the dual of Voronoi tesselation, creates a planar, triangular mesh for a given set of points. This example updates the Delaunay triangulation in response to mouse interaction! Colors by Cynthia Brewer; algorithm by Steven Fortune; implementation based on work by Nicolas Garcia Belmonte; interaction inspired by Raymond Hill.

patricksurry

Click and drag to move states around. Move slider to modify distance function

Fork of mbostock's force layout example (http://bl.ocks.org/mbostock/1073373) with a few experimental changes.

Create links between neighbouring states (inferred from topojson mesh) rather than from Voronoi triangles which add some unstable cross-country links like Maine-Washington. Parameterize distance function with a slider (0 = spatial similarity only, 1 = more variation based on type similarity).

patricksurry

Example illustrating zoom and pan with a "rolling" Mercator projection. Drag left-right to rotate projection cylinder, and up-down to translate, clamped by max absolute latitude. Ensures projection always fits properly in viewbox.

patricksurry

This example adapts mbostock's quadtree brushing demo to find the nearest neighbor (shown red) of a new point (shown yellow). Choose a new point to classify by clicking on the diagram. (An alternative approach for nearest neighbors of the mouse position is D3's Voronoi polygons, but the idea here would extend to rapidly classifying many new points against a base collection of points.)

We use a data-dependent order of recursion through the quadtree

patricksurry

Adapted from this, to avoid the second projection and make flying arc height proportional to length.

Because the 'sky' projection is just a scaled up version of the original one, the projection of a sky point in canvas coords can be easily calculated by scaling the ground projection point along the vector from the origin.

Another improvement(?) might be to avoid the swoosh/interpolate function by doing this same trick directly on the stream of points that comes from the normal projection path function.

patricksurry

This example illustrates a simple trackball approach for rotating an orthographic globe ' with D3 3.0.

The idea is to express a click on the sphere in spherical coordinates with one rotation axis horizontal on the page, and one axis vertical. Then when we move the mouse, we just rotate the underlying sphere so that the point of initial click stays underneath the mouse. When the globe is oriented in its original location (i.e. rotation(0,0), with the north pole at the top of the page and the equator aligned with the horizontal canvas axis, it's easy, since D3's longitude rotation equals trackball rotation around the vertical axis, and the subsequently applied latitude rotation