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

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 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

Based on http://bl.ocks.org/mbostock/899711 which uses D3 to draw elements into a google maps overlay layer, but doesn't use d3.geo machinery to draw map geometry. This gist illustrates how to align a D3 mercator projection with google maps so we can do standard d3 mapping stuff on top of the google API.

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

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

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

Imitate hand-drawn (imperfect) circles using cubic Bézier segments, based on a Bézier approximation to a perfect circle. TLDR: a good approximation to a quarter circle of unit radius is a cubic Bézier curve with control points P₀ = (0,1), P₁ = (c,1), P₂ = (1,c), P₃ = (1,0) where c = 0.551915024494. By varying the points in a sensible way, we can do a good impression of hand-drawn circles.

patricksurry

An example of cirular inset maps using D3, based on the naive approach of redrawing a clipped version of the whole map for every inset.

patricksurry

license: gpl-3.0
height: 2910
border: no