Tell us what works and what could be better. We read every submission.
@andramalmen·6 public vizzes
This visualization demonstrates a directory listing, showing the names of files and folders in a specified directory path. It reads the directory contents using the Node.js `fs.promises` API’s `readdir` method, which returns an array of file names. The code then iterates over each file and outputs its name to the console using `console.log`, providing a simple, text-based representation of the directory’s structure. The example accepts an optional directory path as a command-line argument, defaulting to the current directory if none is provided.
This example uses a force-directed graph to visualize the connections between nodes, with each node rendered as a small circle and links as lines. The simulation, powered by `d3.forceSimulation`, computes node positions based on charge and link forces, while `d3.drag` enables interactive node repositioning. The visualization updates in real time as the simulation runs, with link opacity and node radius varying based on underlying data attributes. The code relies on D3’s selection and data-binding methods, and the rendering is performed using SVG elements appended dynamically to the page.
This example demonstrates a Keybase identity verification workflow, showing how a GitHub user proves ownership of their account through a signed cryptographic statement. The gist contains a Keybase proof file with a JSON payload, a signature, and instructions for verifying the identity via the Keybase command-line tool. It relies on the Keybase API and command-line program to validate the signature against the user’s public key, confirming the link between the GitHub and Keybase identities. The rendering is plain text, with no data visualization libraries involved.
This multi-series line chart visualizes daily average temperatures in New York, San Francisco, and Austin over one year, loaded from a TSV file using d3.tsv. The x-axis uses a time scale to encode dates, while the y-axis uses a linear scale for temperature values. Each city’s temperature series is drawn as a distinct colored line using an ordinal color scale (category10). The chart applies conventional margins, computes domains with d3.extent, d3.min, and d3.max, derives series names via d3.keys, and renders axes and lines using SVG.
A multi-line chart displays temperature readings for several cities over time, parsed from a tab-separated data file with `d3.tsv` and `d3.timeParse`. The code uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to map dates, temperatures, and city colors, while `d3.line` with `d3.curveBasis` draws smoothed paths. Axis labels and city names appear via `d3.axisBottom`, `d3.axisLeft`, and SVG text elements. The visualization renders entirely as SVG, with each city’s series and its final value labeled at the line’s endpoint.
This example presents a step-by-step technical guide for configuring OpenConnect, a command-line client for Cisco's AnyConnect SSL VPN, on Mac OS X. It shows how to install the client via Homebrew, install the TUN/TAP driver, and optionally configure password-less sudo for the openconnect command. The guide also explains how to handle self-signed certificates by exporting a .pem file from the Keychain Access app and passing it via the --cafile flag. The final command connects using sudo openconnect with the user, certificate, and VPN hostname.