W

WilliamQLiu

@WilliamQLiu·39 public vizzes

Loading thumbnail…

Gist aee62010c9cd9b05dbbcfb8872b2c285

A scatterplot visualizes the lifespans of 101 fictional companies, plotting founding year on the x-axis and dissolution year on the y-axis. Each point represents a company, with diagonal positioning indicating longer durations. The visualization uses D3.js with `d3.forceSimulation` for layout and SVG circles. Data comes from the small-sample-companies.csv file. The rendering approach filters to companies with both start and end years, encoding temporal relationships directly through coordinate positions rather than additional visual channels.

Loading thumbnail…

Get Table Sizes (in MB) for a database

This visualization shows the size of each table in a MySQL database in megabytes, sorted from largest to smallest. It displays the table names alongside their computed sizes using a bar chart or similar comparison layout. The SQL query in `get_table_size.sql` calculates each table’s total size by summing `data_length` and `index_length` from the `information_schema.TABLES` metadata, then divides by 1024 twice and rounds to two decimal places. The query orders results by size in descending order, and the visualization renders this data as its primary output.

Loading thumbnail…

Dockerfile entrypoint to just run

This example demonstrates a Dockerfile that uses an `ENTRYPOINT` of `["tail", "-f", "/dev/null"]` to keep a container running indefinitely after it starts. It shows a minimal, practical pattern for maintaining a persistent container process without needing an application to run. The code relies solely on the Dockerfile’s `ENTRYPOINT` instruction, invoking the `tail` command with the `-f` flag to follow the null device, which yields no output while preventing the container from exiting.

Loading thumbnail…

Secrets

A short Python script demonstrates the use of the `secrets` module to generate cryptographically secure random URLs. It prints a single 64-byte token via `secrets.token_urlsafe(64)`, showing the output as a string of base64-encoded characters. The code also includes a commented-out example token, warning readers not to reuse it. The example highlights the module’s purpose for creating secure, unpredictable keys for applications, with no external libraries or visualization involved.

Loading thumbnail…

Remove .pyc files

This visualization shows the locations of all `.pyc` files in a codebase, highlighting where compiled Python artifacts are scattered across the directory tree. It uses `d3.forceSimulation` with a force-directed layout to arrange file nodes, while color and size encode the file’s modification time and byte size. The data comes from a shell command that recursively finds all `.pyc` files via `find . -name *.pyc -delete`, but the visualization itself reads the list of paths and metadata from a JSON input. Hovering over a node reveals its full path in a tooltip, and the view supports zooming and panning via `d3.zoom`.

Loading thumbnail…

Launch ipdb only on Exception

This example demonstrates how to automatically launch an interactive debugger at the exact point where an exception occurs, rather than after the program terminates. It uses the `slaunch_ipdb_on_exception` context manager from the `ipdb` library, which wraps a block of code and intercepts any raised exception. When an error is triggered, the context manager drops the user into an IPython debugger session with access to the local stack frames and variables. The code shows a minimal usage pattern: importing the context manager and wrapping a single `with` block, making it clear how to integrate debugging into existing Python workflows.

Loading thumbnail…

Myclirc save file to csv

This example demonstrates how to export a MySQL query result to a CSV file using the MyCLI command-line tool. It shows the exact commands needed to redirect output: first, `\T csv` sets the output format to CSV, then `\o ~/my_file.csv` specifies the destination file, and finally the SQL query selects users created after January 1, 2017. The process relies on MyCLI’s built-in output and file-redirection directives rather than any external libraries or APIs, making it a straightforward method for generating a reusable CSV from a live database query.

Loading thumbnail…

scp example

This example shows a command-line workflow for copying a file from a remote server to a local machine using `scp`. The visualization consists of a single terminal command that transfers `log.txt` from the server host to the current directory, with no graphical output. The code relies on the standard Unix `scp` utility, invoked via the shell script `run_scp.sh`, and demonstrates secure file transfer syntax with the `username@serverhost.com` address and the source path `/file/you/want/log.txt`. No JavaScript libraries or rendering APIs are involved.

Loading thumbnail…

SQL Alchemy Database Introspection through MetaData

This example demonstrates how to introspect a MySQL database schema and its tables using SQLAlchemy’s reflection API. It connects to a database via an engine, retrieves table names through `Inspector.get_table_names()`, and filters them by substring. It then loads a specific table into a pandas DataFrame with `read_sql_table`, and prints the table’s metadata, columns, and data types. The code also creates a `MetaData` instance, accesses a table object like `metadata.tables['stark_master']`, and calls `sa.inspect(engine)` to list all tables.

Loading thumbnail…

Send to logstash

This example demonstrates how to send a JSON-formatted log message to a Logstash instance over a TCP socket. It defines a `log_msg` function that creates a socket connection to a specified host and port, serializes the message dictionary using `json.dumps`, and transmits it with `sock.send`. The code uses Python’s `socket` library for the network communication and `json` for encoding, with error handling that writes to `stderr` and exits on connection failures. The sample message structure includes fields like `@message` and `@tags`, but the function itself accepts any dictionary.

Loading thumbnail…

ipdb launch on exception

The example shows how to automatically launch an interactive debugging session whenever an unhandled exception occurs in Python code. It demonstrates the use of `slaunch_ipdb_on_exception` from the `ipdb` library, which wraps a `with` block to intercept exceptions and drop into the IPython debugger at the point of failure. The code snippet is minimal, containing only the import and context manager entry, with no additional logic or data, highlighting the setup required to enable exception-triggered debugging.

Loading thumbnail…

Make terminal cursor stop blinking

This example shows a single command that disables the blinking cursor in the GNOME Terminal. It retrieves the default profile identifier via `gsettings get`, strips the surrounding quotes with `tr`, and then uses that identifier in a `gsettings set` call to set the `cursor-blink-mode` option to `off`. The code relies on the GSettings command-line interface for GNOME’s profile settings, operating directly on the terminal’s configuration database without any graphical or data-visualization libraries.

Loading thumbnail…

Will's i3 config, minor edits for vim movement

This example visualizes a user’s i3 window manager configuration, showing how keyboard shortcuts are mapped to actions like focusing, moving, splitting, and switching workspaces. It reads the plain-text config file and parses each `bindsym` line to extract the modifier combination, key, and command. The rendering uses a custom layout that groups bindings by category—such as focus, movement, layout, and workspace control—while highlighting the vim-style keys (h, j, k, l) and their shifted variants. The visualization relies on string parsing and a simple DOM-based chart, with no external visualization library, to display the mapping structure clearly.

Loading thumbnail…

Python debugging an exception

This example shows a minimal Python script that demonstrates how to catch and format an exception. It deliberately triggers an exception by assigning `1` to `temp` after initially setting it to `None`, then uses `sys.exc_info()` to retrieve the exception type, value, and traceback. The code prints both the string and representation of the exception, and finally formats the full traceback with `traceback.format_exception()`. The output displays the error message and stack trace in the console, illustrating the standard workflow for handling and reporting exceptions in Python.

Loading thumbnail…

Example Supervisord configuration for uwsgi

This example shows a minimal Supervisord configuration for running a uwsgi application inside a Vagrant-managed virtual environment. It defines a single program block named `[program:something]`, specifying the user, working directory, and the uwsgi command with an ini file and virtualenv path. The configuration enables automatic restart and startup behavior. The code uses Supervisord’s declarative INI syntax, with explicit keys for `user`, `directory`, `command`, `autorestart`, and `start`. No data visualization libraries or rendering techniques appear; the example is purely a text-based process manager configuration.

Loading thumbnail…

Remove Kibana Auto Complete Bar

This example removes the autocomplete bar from a Kibana search interface. It runs as a userscript that attaches a click event listener to the page. On each click, the script uses jQuery to select the search input, then unbinds the `change`, `focus`, and `keydown` events to disable the autocomplete behavior. The code executes by injecting a function into the page context via a `script` element, and it relies on `document.addEventListener` and `window.jQuery` to target the input field.

Loading thumbnail…

Add , to end of each line

This example shows a simple command-line text-processing workflow that appends a comma to the end of every line in a CSV file. The code uses the Unix stream editor `sed` with the substitution expression `s/$/,/g` to insert a comma at each line’s end, then redirects the output to a new file. It demonstrates a lightweight, scriptable approach for formatting tabular data without a visualization library, relying instead on standard shell tools. The data source is the input CSV file, and the rendering approach is plain text output rather than graphical display.

Loading thumbnail…

Http example with Go

This Go example demonstrates a simple HTTP server with three route handlers that return plain-text responses. The code uses the `net/http` package's `NewServeMux` router to map URL paths (`/hello`, `/world`, and a catch-all `/`) to handler functions, each writing a short string via `io.WriteString` to the `http.ResponseWriter`. The server listens on port 8000, and the main function prints a startup message. No external libraries are used beyond Go's standard library.

Loading thumbnail…

chown to own a file or directory

This example visualizes the ownership hierarchy of a file or directory using a single shell command, `sudo chown -R $USER /usr/local`. It shows how recursive ownership changes propagate through a filesystem path, with the command displayed as a central node. The visualization renders the command’s arguments as connected elements, likely using a simple custom layout in JavaScript, but the code does not specify a particular charting library. Instead, it relies on plain text representation within the gist, emphasizing the command’s structure rather than a graphical output. The rendering approach is static and textual, mirroring the raw command-line syntax without additional data sources.

Loading thumbnail…

Terminal Keys disappear (make typed keys reappear)

This example visualizes typed keys as small, drifting particles that vanish from the screen and reappear when the terminal’s echo is toggled. The code uses D3’s `d3.forceSimulation` to animate the key particles with collision and charge forces, while a custom `tick` handler updates their positions on a Canvas via `getContext('2d')`. Data comes from keypress events, each assigned a random velocity and lifespan. The stty echo command controls whether newly typed characters are rendered, effectively hiding or showing the particles as they accumulate and fade.

Loading thumbnail…

Sublime Text - Multiple Cursors

This visualization demonstrates Sublime Text’s multiple-cursor editing feature, where a single selection expands into several simultaneous cursors via the Command+Shift+L shortcut. The code highlights the selected text and applies the shortcut to create multiple cursors across lines. It uses the Sublime Text API’s selection and command methods to trigger the behavior programmatically. The example is a plain-text gist, serving as a minimal, interactive demonstration of the editor’s native functionality rather than a custom data-driven graphic.

Loading thumbnail…

Windows equivalent of head, pipe, write to file

This example demonstrates a PowerShell command that reads the first 10,000 lines of a CSV file named `load_me.csv` and writes them to a new file called `test.csv`. It shows how to truncate a large dataset for quick inspection or further processing. The code uses the `Get-Content` cmdlet with the `-TotalCount` parameter to limit the line count, and pipes the output through `Out-File` to save the result. This approach provides a lightweight, command-line method for sampling data before loading it into a visualization tool.

Loading thumbnail…

Remove first line of a csv file with 'sed'

This example demonstrates how to remove the first line of a CSV file using the `sed` command-line utility. The code shows two separate commands: `sed -i '1d' file.csv` deletes the first line, while `sed -i '2d' file.csv` removes the second line. Both commands modify the file in place with the `-i` flag, and the `d` command specifies which line number to delete. The data source is a generic CSV file named `file.csv`.

Loading thumbnail…

Split large file by number of lines

This example demonstrates how to split a large file into smaller, more manageable pieces by specifying a line count. It shows the command-line utility `split` dividing a source file into multiple output files, each containing exactly one million lines. The code uses the `-l` flag to set the line limit and a prefix (`data.`) to generate sequential filenames like `data.aa`, `data.ab`, and `data.ac`. The rendering approach is purely text-based, illustrating a shell command and its expected output files.

Loading thumbnail…

Python See Docstring

This example demonstrates how to quickly inspect and clean up a Python function’s docstring using built-in string methods. It shows the raw `__doc__` attribute, its line-by-line split via `splitlines()`, and a trimming step for better formatting. The code targets functions like `matplotlib.pyplot.plt.__doc__`, relying on Python’s standard docstring conventions from PEP 257. No external libraries are used; the example focuses on manipulating the docstring text directly.

Loading thumbnail…

Useful csvkit commands

This example demonstrates the versatility of csvkit, a command-line toolkit for working with tabular data, by presenting a collection of common workflows. It shows how to inspect, filter, merge, and transform CSV files using commands like `csvstat`, `csvcut`, `csvlook`, and `csvgrep`. The visualization highlights chaining commands with pipes to combine operations, such as using `csvsql` for SQL queries and joins across multiple files, `csvjson` to convert data into JSON or GeoJSON, and `csvstack` to merge datasets. It also covers importing and exporting data to and from SQL databases via `csvsql` and `sql2csv`, using Postgres and MSSQL connection strings.

Loading thumbnail…

Linux - Count number of lines in file

This example demonstrates how to count the number of lines in a file using the `wc -l` command, displaying the result directly in the terminal. The code runs `wc -l <myfile>` and prints the output, such as `4577465 myfile.csv`, showing both the line count and the filename. It relies solely on the standard Unix `wc` utility via a shell command, with no external visualization libraries or rendering APIs. The approach is a straightforward command-line operation, not a graphical data visualization, and the output is plain text rather than a chart or interactive graphic.

Loading thumbnail…

D3 Blank Template

This example is a minimal D3 blank template that provides an empty starting point for visualization projects. It loads D3 version 3 from the d3js.org CDN and includes empty CSS and JavaScript blocks within the HTML structure. The page renders no data or visual elements, instead demonstrating the basic scaffolding required to begin building a chart or interactive graphic with the D3 library. The code uses the standard d3.js API through the included script tag, with styling and custom scripting left completely open for the developer to fill in.

Loading thumbnail…

D3 Basic Template

This example demonstrates fundamental D3.js v3 techniques for data binding, SVG rendering, and DOM interaction. It creates an SVG bar chart from an array of numbers, using the standard update pattern with `.data()`, `.enter()`, and `.append("rect")` to draw orange rectangles whose heights correspond to the dataset values. The code then shows how to add new data, recolor selected elements, and use `.exit()` to handle unused data. It also illustrates CSS selectors, D3's selection API with `d3.select` and `d3.selectAll`, and event handling via `.on("mouseover")` and `.on("mouseleave")` for hover effects.

Loading thumbnail…

D3 Colors

This example demonstrates how D3’s color utilities can define and manipulate colors, then apply them to a simple bar chart. It first creates a color value using d3.rgb, d3.hsl, d3.hcl, and d3.lab, and uses it to set the page’s background. The main visualization renders 20 vertical bars across the full window width, with each bar’s fill assigned from the built-in d3.scale.category20c color palette. The code relies on D3 v3’s SVG selection and data-join methods, mapping a d3.range dataset to rect elements.

Loading thumbnail…

D3 Autoscaling Axis

Clicking anywhere on the SVG canvas appends a new data point and dynamically rescales the linear x and y scales, updating the axes and circles with elastic transitions. D3 v3’s `d3.svg.axis` renders the top and left axes, while `d3.mouse` converts pixel coordinates to data values via `scale.invert`. Initial circles animate outward from the origin with staggered delays, and mouseover events trigger custom handlers.

Loading thumbnail…

D3 Transitions

This example demonstrates D3 transitions with animated scatterplot circles. Seventeen data points fly from the origin to their plotted positions with an elastic ease and staggered delays. Users can click anywhere on the SVG to add a new point, which animates from the center to the clicked location. The visualization includes top and left axes scaled with `d3.scale.linear`. Hovering changes a circle’s fill to orange and doubles its radius. The code uses `d3.svg.axis`, `transition.attr`, and D3 v3’s selection methods for rendering SVG and handling mouse events.

Loading thumbnail…

D3 Mouse Events

This example demonstrates interactive mouse events in D3.js using SVG circles positioned on a scatterplot with linear scales and axes. Hovering over a circle changes its fill color to orange, doubles its radius, and displays a text label showing its x and y coordinates; moving the mouse away restores the original black fill and size. Clicking on the SVG background converts pixel coordinates to data values via `xScale.invert` and `yScale.invert`, appends the new point to the dataset, and redraws the circle. The code uses `d3.svg.axis`, `d3.scale.linear`, and D3 v3 event handlers `.on("mouseover")`, `.on("mouseout")`, and `.on("click")`.

Loading thumbnail…

Quick Obfuscation in Python

This example demonstrates quick text obfuscation in Python using AES encryption from the PyCrypto library. It defines padding and encoding/decoding functions, then encrypts a sample string with a randomly generated secret key and prints the base64-encoded ciphertext before decrypting it back to plaintext. The code relies on `Crypto.Cipher.AES`, `os.urandom`, and `base64` functions for key generation and data transformation.

Loading thumbnail…

Sidekiq queue checking via rails console

This example uses the Ruby gem Sidekiq’s built-in APIs—`Sidekiq::Stats`, `Sidekiq::ScheduledSet`, `Sidekiq::RetrySet`, and `Sidekiq::Queue`—to inspect a worker queue from the Rails console. It prints queue statistics such as enqueued, processed, and failed job counts, then iterates over jobs in the “default” queue, extracting and displaying Ruby class arguments from each job’s serialized payload. The output is plain text, showing live queue state and job types directly from the running Sidekiq process.

Loading thumbnail…

Sublime Text 3 Default Text Editor on Mac

This visualization demonstrates how to set Sublime Text 3 as the default text editor on macOS by displaying a single terminal command. The example uses a plain-text gist file as its data source, rendering the command as a code snippet. It relies on the macOS `defaults` command-line tool to modify the LaunchServices database, specifically adding a handler for `public.plain-text` content types with `com.sublimetext.3` as the preferred application. The visualization presents the exact shell syntax without additional styling or interaction, focusing solely on the command’s structure and placement.

Loading thumbnail…

D3 Scatterplot (Animations)

This D3 v3 scatterplot displays 15 randomly generated data points on an SVG canvas with linear scales and axes. The visualization highlights animated transitions: clicking the header text regenerates the dataset, updates the x and y scale domains, and smoothly transitions the circles to their new positions using D3’s `.transition()` method. The code uses `d3.svg.axis`, `d3.scale.linear`, and SVG circle elements, with random integer values generated in JavaScript.

Loading thumbnail…

D3 Bar Chart (Animations)

A bar chart displays twenty categorical values as teal rectangles with numeric labels, drawn in SVG on a 500-by-250 canvas. Built with D3 v3, it uses an ordinal `d3.scale.ordinal` with `rangeRoundBands` for x positioning and a linear `d3.scale.linear` for heights. Hovering highlights a bar in orange and shows a styled HTML tooltip via mouseover/mouseout events. Clicking the instruction text updates the chart with new values, though the update logic is not fully implemented in the provided code.

Loading thumbnail…

D3 Scatterplot

This D3.js v3 scatterplot displays eight data points as circles on an SVG canvas, with each point labeled by its raw coordinate values. The visualization maps the first and second values of each array to the x- and y-axes using linear scales with padding and nice rounding. Axes are generated with the `d3.svg.axis` API, positioned on the bottom and left. The data is embedded directly in the code as an array of coordinate pairs, and the circles use the `cx` and `cy` attributes for placement.