Tell us what works and what could be better. We read every submission.
@antonio-rodrigues·7 public vizzes
Three text sections frame a hero video that animates open and expands using GSAP timelines. The page uses a video background that moves upward, then transitions from a narrow vertical strip to full width via `clipPath` animations. Surrounding decorative square columns and corner blocks slide up and outward, creating a layered reveal effect. The animations are triggered on load and are purely visual, with no scroll-based interaction.
This visualization demonstrates a keybase identity proof, linking a GitHub account to a keybase profile through a signed cryptographic statement. The code renders the proof as a plain-text document with embedded JSON and a signature block, using no external visualization libraries. It shows the raw data structure and verification steps, relying on standard text formatting to present the signed object and command-line instructions for identity lookup. The rendering approach is static and document-based, displaying the gist content directly without interactive elements or graphical charts.
This interactive world map built with D3 v4 supports zooming and panning via mouse gestures, letting users explore a choropleth of countries. The map uses SVG paths rendered from TopoJSON data, with country names overlaid as text. Zoom and pan are implemented through the d3.zoom behavior, which applies SVG transforms to the map group. Hovering over a country displays a tooltip with its formatted population value, using the d3-tip library. The map smoothly animates as users drag or scroll to zoom, making it easy to inspect individual regions or the entire globe.
This example renders a static world map onto a canvas element using D3 v4 and TopoJSON. It uses a `d3.geoEquirectangular` projection and `d3.geoPath` to draw country boundaries from the world-atlas 110m dataset. The map is displayed in muted earth tones with a red stroke only on the `.names` class, though no name labels are actually generated. The code appends an SVG layer to the canvas, but final output relies on SVG paths for the geographic features.
This interactive map plots global earthquake data from September 2015, with each event shown as a circle scaled by magnitude and colored by depth. The visualization uses an SVG world map as the base, with earthquake locations marked from the earthquakes.csv dataset. Hovering over a circle reveals details about the earthquake, including its magnitude, depth, and location description. The rendering emphasizes the distribution of seismic activity along tectonic plate boundaries, with the cluster of recent earthquakes off the coast of Chile prominently visible.
This example visualizes the synchronization of Visual Studio Code settings and extensions via a GitHub gist, authored by Antonio Rodrigues and built with Vue. It displays a structured list of extension metadata, including publisher, version, and unique identifiers, alongside user configuration files for keybindings and editor preferences. The visualization relies on JSON data parsing to render the settings, snippets, and extension details, showing how cloud-based sync stores and retrieves developer environment state. The code references the gist ID f9768d162c1a303aba8c87205f305e7b and uses the Vue framework to present the configuration hierarchy.
This example visualizes the contents of a GitHub Gist used by the Atom package sync-settings. The gist stores a user's Atom editor configuration as a collection of JSON files, including init scripts, keybindings, and a list of installed packages with their versions. The visualization presents these configuration files and package data, highlighting the packages and their version numbers, likely to show the user's development environment setup. The source is a gist by antonio-rodrigues, and the visualization is titled "automatic update by http://atom.io/packages/sync-settings."