Skip to content

Instantly share code, notes, and snippets.

@patricksurry
patricksurry / README.md
Last active February 27, 2023 11:11
Flowsnake visualization of structural protein sequence for covid19

Illustration of how to convert from traditional axial (or cubical) hex coordinates to and from two one-dimensional enumerations based on space-filling fractal curves. The spiral honeycomb mosaic enumeration recursively labels nested "super hexes" in base 7, starting from 0 at the origin. The flowsnake enumeration also call "Gosper7" here, recursively labels the same super hexes but in a continuous sequence with no jumps.
This uses a negative base 7 with an unbalanced signed representation using the digits = (-2), - (-1), 0, 1, 2, 3, and 4. These enumerations could be useful for compact visualization of one-dimensional sequence data as well indexing hexagonal data storage with good locality properties similar to the Hilbert curve.

This example shows a simple visualization of the structural protein sequence for covid-19,

@patricksurry
patricksurry / index.html
Last active April 4, 2022 17:17
Cartoonish map styles with D3 and NaturalEarth
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
<style>
body {
@patricksurry
patricksurry / README.md
Last active March 1, 2022 05:15
Omega Speedmaster demo built with G3
@patricksurry
patricksurry / README.md
Last active June 17, 2023 22:04
Hex cube animation

Hex cube visualization

Sadly the original bl.ocks.org seems to be dead. Hopefully you can still see the visualization at this clone.

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 fac

@patricksurry
patricksurry / softclip.ipynb
Last active August 14, 2023 06:53
softclip-notebook
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 March 22, 2019 18:33
Logistic fisheye distortion
<!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 March 1, 2020 06:19
Gradient path stroke effect
license: mit
@patricksurry
patricksurry / .block
Last active March 1, 2020 06:23
Showing depth with a 3D globe
license: mit
@patricksurry
patricksurry / README.md
Created February 5, 2018 16:28 — forked from tomgp/LICENSE.txt
Simple D3 clock

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 February 5, 2018 15:04 — forked from mbostock/.block
Orthographic
license: gpl-3.0