Tell us what works and what could be better. We read every submission.
@andreas-groos·6 public vizzes
This example demonstrates a mobile navigation system for a data-dashboard page, where users can click nav links to scroll to dashboard sections while the active link is automatically highlighted based on scroll position. The code uses plain JavaScript DOM APIs such as `querySelectorAll`, `addEventListener`, and `scrollTo` to manage link styling and smooth scrolling. It also includes a scroll-triggered highlight logic that tracks the viewport position and updates the active pill, while horizontally centering the active link within its container using `offsetLeft` and `clientWidth` calculations. The data source is the page’s own document structure, with no external libraries.
This example demonstrates a Warp terminal theme inspired by Atom One Dark, displaying a palette of eight normal and eight bright terminal colors on a dark background. The theme defines the full ANSI color set, including the accent blue `#61AFEF` and cursor light gray `#ABB2BF`, with all colors sourced from the One Dark UI scheme. The code provides the complete YAML configuration for Warp’s theme format, specifying the background, foreground, and details as darker tones. It shows how the theme assigns specific hex values to each terminal color category, making it directly usable for styling a Warp terminal session.
This visualization displays the contents of a staging environment configuration file, exposing API keys and database credentials as plain-text data points. It uses d3.forceSimulation to position each key-value pair as a node, with the sensitive values rendered in red to highlight potential security risks. The data comes directly from a markdown file containing environment variables, and the layout updates through the simulation’s tick events. No actual connection to the listed services is made; the visualization solely maps the file’s textual structure.
This example visualizes the live streaming status of several community radio stations as a force-directed network. It shows each station as a labeled node, with connections drawn between them based on shared broadcast attributes. The visualization uses `d3.forceSimulation` to position the nodes and SVG for rendering. Station URLs are parsed from the CSV data, and the code reads the stream metadata to determine online/offline state, which is reflected in node color. The underlying data comes from a simple `radio-stations.csv` file, and the layout responds to user drag interactions.
This example shows a configuration file for the Surfingkeys browser extension, which customizes keyboard shortcuts and the visual theme of its omnibar interface. The code uses the `api.map` and `api.unmap` functions to remap the `T` key to `gt` and remove the `<ctrl-i>` shortcut. It also defines a custom CSS theme through the `settings.theme` property, styling elements like the omnibar search results, URL colors, and focused row highlights using selectors such as `.sk_theme` and `#sk_omnibar`. The theme applies a dark background with specific accent colors for different UI states.
This example presents a Markdown cheatsheet that organizes zsh shell shortcuts and git aliases into structured tables. The visualization shows command mappings, including directory navigation aliases, suffix aliases for opening files, and tab-completion examples, alongside a comprehensive list of git aliases with their corresponding full commands. The data comes from a gist authored by andreas-groos, formatted as plain Markdown tables with code blocks illustrating alias usage. The layout relies on standard Markdown table syntax rather than any JavaScript or visualization libraries, making it a static reference document.