Tesselation template for christmas tree decoration. Dimensions in cm
.
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.
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.
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
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.
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.
Artificial satellites orbiting the Earth. Data provided by Space Track in TLE format, propagated to space-time coordinates using satellite-js.
Satellite distances and Earth's size are true to scale. The different satellite categories can be toggled on/off and are grouped by unique color.
Earth shown as a Blue Marble.
See also Satellites Voronoi and Geostationary Satellites.
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.
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.
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.