Tell us what works and what could be better. We read every submission.
@alex-milanov·15 public vizzes
An Arduino-based MIDI sequencer displays a 16-step pattern on a 16x2 LiquidCrystal_I2C LCD, using custom bitmap characters to render empty, filled, and arrow-marked boxes for each step. The code reads two potentiometers via `analogRead` to control tempo and BPM, while a button toggles step values. MIDI clock pulses are sent through the `MIDI` library, and the display updates in the main `loop()`, showing the current pattern, BPM, and a moving arrow indicating the active step.
An Arduino sketch converts incoming MIDI note-on messages into phonetic speech commands for a SpeakJet synthesizer. It maps MIDI notes 36–47 to a predefined array of twelve frequencies, sending serial bytes via a SoftwareSerial connection to control pitch, speed, and volume. The setup routine plays a short four-note test sequence, while the main loop continuously reads MIDI data through the MIDI library. The code demonstrates direct hardware-level translation of musical input into audible synthesized output.
This example demonstrates a set of reusable helper functions for drawing and manipulating shapes on an HTML canvas. It shows utility functions for creating lines, triangles, and rectangles, as well as geometric operations like panning, resizing, and checking whether one rectangle contains another. The code relies on the Canvas API's `beginPath`, `moveTo`, `lineTo`, `stroke`, and `rect` methods, along with standard DOM manipulation methods such as `document.querySelector`, `createElement`, and `addEventListener`. The rendering approach is direct canvas drawing, with no external data source or visualization library involved.
This visualization demonstrates the deployment and interaction of an ERC-20 token contract through the Remix IDE. It shows how the Solidity compiler and runtime environment handle real-time contract creation, allowing users to deploy and test token transfers, approvals, and balance queries. The code implements the EIP20Interface standard using Solidity’s pragma directive, with functions like `transfer`, `transferFrom`, and `approve` mapped to the Ethereum blockchain. The example relies on Remix’s web-based interface to compile the contract, highlighting the token’s initial supply, name, decimals, and symbol set in its constructor.
This example demonstrates a complete ERC-20 token contract, EIP20Interface, and its implementation, TheBestToken, in Solidity. It shows the standard token interface including functions for transferring tokens, checking balances, approving spending, and querying allowances, along with the Transfer and Approval events. The contract is compiled and deployed directly through Remix IDE, the browser-based Solidity compiler, using version 0.4.24 with optimization enabled. The code includes a constructor that initializes the total supply, token name, decimals, and symbol, and relies on Solidity’s built-in mapping and require statements for state management and validation.
This example demonstrates a reactive application architecture following an Actions → State → UI flow, where user interactions trigger state changes that are rendered as a virtual DOM. It uses the iBlokz UI boilerplate with hyperscript helpers and snabbdom for efficient patching, while state management relies on RxJS-style observable streams with a `scan` reducer. The code shows a counter interface with increment/decrement buttons, illustrating how action functions return immutable state reducers and how UI components receive state and actions as arguments.
This SVG logo, created in Inkscape, presents a stylized monogram formed from three black curved paths on a transparent background. The design appears to depict the letter "α" (alpha) combined with a geometric, angular "PM" motif, rendered with smooth, flowing strokes. The paths are filled solid black with no outlines, giving the icon a bold, flat vector aesthetic. The 48x48 pixel canvas uses precise coordinate-based path data to define the shapes, with the rendering relying solely on SVG's native path elements and fill styling.
This visualization documents a step-by-step Linux setup process, covering installation, customization, and development environment configuration. It uses a text-based layout with embedded screenshots and command-line code snippets to illustrate each stage. The guide references specific tools and libraries including Xubuntu, Docky, Numix Circle, zsh, oh-my-zsh, NVM, and Node.js, along with shell commands for package installation and theme configuration. The article presents the author’s personal technical stack as a static checklist, with the source data derived from a markdown file and the visual formatting handled by the gallery’s rendering system.
The visualization displays the frequency of each letter in the English alphabet as a force-directed network, where nodes represent letters and are positioned by simulated repulsion and attraction forces. Using D3’s `d3.forceSimulation`, the code loads letter-frequency data from a TSV file and renders circular nodes with labels. Node sizes or colors are not encoded, but the spatial arrangement emerges purely from the simulation’s physics, with no explicit link between letters. The example relies on D3’s selection and force modules to update positions each tick, offering a simple, abstract view of letter distribution without axis or scale.
This example shows how a simple tab-separated value file maps names to numeric values in a D3.js visualization. The data.tsv file contains six name-value pairs, such as Locke with 4 and Kwon with 42. The code uses `d3.tsv` to parse the tab-delimited text, then binds the parsed array to DOM elements. A bar chart or similar shape represents each value, with the name displayed alongside. The rendering relies on standard D3 selections and scales, demonstrating a minimal workflow for loading external TSV data and converting it into visual marks without any additional libraries.
This example demonstrates how to create an RxJS Observable from React Native’s `DeviceEventEmitter`, enabling reactive handling of the `locationUpdated` event from the `react-native-location` library. It shows the full flow: a factory function wraps `DeviceEventEmitter.addListener` via `Observable.fromEventPattern`, then a second observable applies `.throttle` to limit event frequency and maps raw location coordinates into a simple object. Finally, a subscription logs the transformed location data, with explicit unsubscribe support via `subscription.dispose()`.
This example demonstrates a compact JavaScript function for generating a random integer within a specified range. The code defines `getRandomInt(min, max)`, which uses the native `Math.random()` and `Math.floor()` APIs to compute the result. It shows how to scale the random decimal output to the desired inclusive minimum and exclusive maximum bounds. The function is immediately usable in any browser environment without external libraries, making it a practical utility for simulations or data generation.
This example demonstrates converting HTML markup into Jade (now Pug) syntax, using a simple snippet as the input. It shows a `div` element with an ID, multiple classes, an `href` attribute, and a `data-source` attribute, alongside a nested `span`. The code then outputs the equivalent Jade representation, using shorthand for the ID and classes, and listing attributes in parentheses. The conversion relies on manual string transformation, not a specific library, and the rendering approach is plain text output. The source is a gist by alex-milanov.
This example demonstrates a dynamic server-side route that renders Jade template files based on URL parameters. It uses Express’s `app.get` method with a `:fileName` parameter, and Node.js’s `fs.existsSync` to check whether a corresponding `.jade` file exists in the `views` directory. If the file is present, it calls `res.render` to serve the template; otherwise, it passes control to the next middleware via `next()`. The code shows a file-system-driven routing pattern, where the request path directly maps to template filenames.
This example demonstrates a minimal AngularJS two-way data binding interaction: as the user types into a text input, the greeting updates live to reflect the entered name, defaulting to “World” when the field is empty. The page consists of an HTML file that defines an Angular module named `myapp` via `data-ng-app` and uses the `data-ng-model` directive to bind the input’s value to a `yourName` variable, which is then interpolated in the template with `{{ yourName || "World" }}`. The supporting `script.js` file simply declares the Angular module, enabling the binding behavior without any additional logic or data source.