Skip to content

Instantly share code, notes, and snippets.

@patricksurry
patricksurry / README.md
Last active Aug 26, 2021
Omega Speedmaster demo built with G3
@patricksurry
patricksurry / README.md
Last active Mar 1, 2020
Hex cube animation
View README.md

Inspired by Amit Patel's diagram illustrating cube coordinates. That diagram initially confused me because the edges of the grid cubes centered on integer coordinates in the plane x + y + z = 0 don't themselves lie in the plane, so it seemed like the animation "cheated" at the end by dissolving to planar hexagons. But of course the point is just that the silhouettes of those cubes form a perfect hexagonal tiling of the plane. That tiling is highlighted as red hexagons here.

I made this animation to get a better intuition for how those cubes intersect the zero plane. It shows what happens as we slice the cubes at x + y + z = w while reducing w towards 0. Fittingly the slice where the zero plane intersects each cube is in fact itself a hexagon which is inscribed within the hexagonal silhouette of the cube and rotated by 30° to that tiling. In the triangular gaps we see grid cubes centered on the planes x + y + z = ±1 poking through from above

@patricksurry
patricksurry / softclip.ipynb
Last active Nov 18, 2019
softclip-notebook
View softclip.ipynb
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@patricksurry
patricksurry / index.html
Created Mar 22, 2019
Logistic fisheye distortion
View index.html
<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<title>Fisheye Distortion</title>
<style>
@import url(../style.css?aea6f0a);
#chart1 {
@patricksurry
patricksurry / .block
Last active Mar 1, 2020
Gradient path stroke effect
View .block
license: mit
@patricksurry
patricksurry / .block
Last active Mar 1, 2020
Showing depth with a 3D globe
View .block
license: mit
@patricksurry
patricksurry / README.md
Created Feb 5, 2018 — forked from tomgp/LICENSE.txt
Simple D3 clock
View README.md

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
patricksurry / .block
Created Feb 5, 2018 — forked from mbostock/.block
Orthographic
View .block
license: gpl-3.0
@patricksurry
patricksurry / README.md
Last active Apr 24, 2021
D3 + simpleheat.js geographic heatmap
View README.md

Illustrates how to use Vladimir Agafonkin's clever simpleheat JS library to overlay a heatmap of Hopper search destinations on a D3 map.

Just for fun we use a separate svg layer 'under' the canvas to display the map, although it's easy enough to have D3 render direct to the canvas. The default canvas (and svg) 'background' is transparent so we can see through layers, making it easy to build up (say) an animated heatmap over a static map without continually redrawing the latter.

@patricksurry
patricksurry / .block
Created May 31, 2017 — forked from mbostock/.block
Calendar View
View .block
license: gpl-3.0
height: 2910
border: no