Home
Abracadata
Cancel

Hand drawn circles

handdrawn-circles.png thumbnail

I wanted to draw a month-at-a-glance calendar page with several days circled, but drawing perfect circles looked odd, so I looked for a way to imitate hand-drawn (imperfect) circles. TL;DR Cubic Bézier segments do the trick, based on this approximation ...

Rolling pan and zoom with D3 Mercator projection

rollpan.jpg thumbnail

An example illustrating zoom and pan with a “rolling” Mercator projection in D3. Drag left-right to rotate projection cylinder, and up-down to translate, clamped by max absolute latitude. Ensures projection always fits properly in viewbox. This wa...

Flying arcs on a globe

flyingarcs.jpg thumbnail

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 calculated by simply...

Rotating a 3D globe with D3

globe3d.png thumbnail

This example illustrates a simple trackball approach for rotating an orthographic globe with D3 3.0. Click and drag on the globe animation below. The idea is to express the click location in spherical coordinates with two orthogonal rotations: one with...