Skip to content

Instantly share code, notes, and snippets.

@vasturiano
vasturiano / README.md
Last active December 9, 2018 01:35
Xmas tesselation

Tesselation template for christmas tree decoration. Dimensions in cm.

@vasturiano
vasturiano / README.md
Last active November 6, 2020 02:16
Currency Horizon Chart

A stacked-series Horizon chart showing the USD exchange rate of currencies over time.

Blue represents a rate that is higher than the latest, and red a lower one.

Using a higher number of horizon division bands (12 in this example) reveals a heatmap-like view, specially with the small vertical space available to each series.

Built using the reusable component horizon-timeseries-chart.

Data sourced from https://www.bis.org/statistics/xrusd.htm.

@vasturiano
vasturiano / README.md
Last active March 27, 2021 22:26
Cluster Collision

Simulation of the interleaving effect resulting of two different groups of particles colliding. The red group follows the mouse cursor, while the blue group is focused on the canvas center.

Uses d3.forceX, d3.forceY, and d3.forceCollide as forces, and d3ForcePod for the simulation scaffolding.

@vasturiano
vasturiano / README.md
Last active January 1, 2020 09:03
Geostationary Satellites

Representation of the motion of Geosynchronous artificial satellites orbiting the Earth.

Geosynchronous satellites follow a circular orbit around the Earth at a distance of approximately 35,786km above the surface. A large amount of these satellites are fully Geostationary, lining up very closely with the Earth's equator. Others diverge from this single perimeter line and wave around the equatorial plane with a period equal to a sidereal day (~23h56m4s).

Each satellite is projected at the location on Earth where it's directly at the zenith. Time is accelerated to 5min/frame to highlight the daily motion.

Data provided by Space Track in TLE format, propagated to space-time coordinates using satellite-js.

Solar termi

@vasturiano
vasturiano / README.md
Last active March 29, 2023 09:52
Map Pan & Zoom D3v4

D3 v4/5 version of mbostock's Map Pan & Zoom.

Demonstrates map panning and zooming using SVG transforms to avoid the overhead of reprojecting at every zoom iteration.

@vasturiano
vasturiano / README.md
Last active June 4, 2022 20:55
Satellites Voronoi

Artificial satellites orbiting the Earth. Data provided by Space Track in TLE format, propagated to space-time coordinates using satellite-js.

Each satellite is projected at the location on Earth where it's directly at the zenith. The area of each circle is inversely proportional to the satellite's altitude from the surface, so closer (and faster orbiting) satellites will exhibit a larger radius.

The Voronoi cells are computed iteratively according to the satellite layers in view, using d3-geo-voronoi. d3-geo-zoom is used to handle the globe zoom/pan interaction.

See also Earth Satellites and Geostationary Satellites.

@vasturiano
vasturiano / README.md
Last active October 13, 2019 00:40
Earth Satellites
@vasturiano
vasturiano / README.md
Last active December 30, 2020 00:36
Blocks Users

Force-directed graph of reference relationships between bl.ocks users found in README files. Data sourced from micahstubb's readme-vis. The text size of each user is proportional to their number of referenced blocks. The link's moving particles indicate the reference direction from source > referrer, and the velocity and density indicate the volume of references.

Hovering on a node traverses the graph downstream and highlights its full chain of references, gradually fading out the highlight color with each degree of separation. Clicking on a node opens the user's bl.ocks profile. Supports canvas zoom/pan and node dragging interactions.

Force directed graph built on HTML5 canvas using force-graph.

@vasturiano
vasturiano / README.md
Last active April 22, 2021 23:29
3D Radial Force

3D version of mbostock's Radial Force.

The two classes of nodes are attracted to a sphere's surface with configured radius of 300px (red) and 600px (blue).

Uses 3d-force-graph for the ThreeJS/WebGL rendering and d3-force-3d for the 3D versions of the radial and collision forces.

@vasturiano
vasturiano / README.md
Last active May 20, 2020 02:41
3D Force-Directed Tree

3D representation of the d3v4 dependency tree. Fixes each level of the tree to its own 2D plane to accent the hierarchy.

Uses 3d-force-graph for the ThreeJS/WebGL rendering and d3-force-3d as the underlying force-directed engine, including node collision detection.