Instantly share code, notes, and snippets.

# patricksurry

Last active February 15, 2017 13:49 — forked from mbostock/.block
D3 3D globe trackball rotation

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

Last active March 28, 2023 23:31 — forked from dwtkns/README.md
Flying arcs with height proportional to length

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.

Last active August 14, 2024 02:55 — forked from mbostock/README.md

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

Last active November 22, 2019 18:46
Illustrate embedding geojson/topojson geometry into a google maps overlay using d3.geo.projection.

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.

Last active October 12, 2017 15:28 — forked from mbostock/.block
Rolling pan and zoom with Mercator projection

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.

Last active December 20, 2017 12:02 — forked from mbostock/.block
Force layout with dynamic distance function

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

Created January 18, 2014 01:43 — forked from mbostock/.block
Last active January 7, 2024 08:05
Imitate hand-drawn (imperfect) circles using cubic Bézier segments

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 P0 = (0,1), P1 = (c,1), P2 = (1,c), P3 = (1,0) where c = 0.551915024494. By varying the points in a sensible way, we can do a good impression of hand-drawn circles.

Last active March 1, 2020 06:16
Circular inset maps for D3

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.

Created May 31, 2017 17:26 — forked from mbostock/.block
Calendar View
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
 license: gpl-3.0 height: 2910 border: no