Skip to content

Instantly share code, notes, and snippets.

Vasco Asturiano vasturiano

View GitHub Profile
@vasturiano
vasturiano / README.md
Last active Dec 9, 2018
Xmas tesselation
View README.md

Tesselation template for christmas tree decoration. Dimensions in cm.

@vasturiano
vasturiano / README.md
Last active Nov 28, 2018
Currency Horizon Chart
View README.md

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 hilbert-timeseries-chart.

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

@vasturiano
vasturiano / README.md
Last active Jul 12, 2018
Cluster Collision
View README.md

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 May 24, 2018
Geostationary Satellites
View README.md

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 Jun 4, 2018
Map Pan & Zoom D3v4
View README.md

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 May 20, 2018
Satellites Voronoi
View README.md

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 Jan 7, 2019
Earth Satellites
View README.md
@vasturiano
vasturiano / README.md
Last active Dec 20, 2018
Blocks Users
View README.md

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 Mar 12, 2018
3D Radial Force
View README.md

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 Oct 10, 2018
3D Force-Directed Tree
View README.md

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.

You can’t perform that action at this time.