Eelsie

@Eelsie·11 public vizzes

Gist a8e5298b38b4f19fc2865612c90ddbcb

The visualization is a single SVG badge featuring a 46-by-46-pixel geometric star-shaped emblem with a central number "1" rendered in a bold, centered style. The star is formed by a complex polygon with 23 vertices, creating a spiked outline. The code uses raw SVG elements, including a `polygon` and a `text` element, with a CSS class (`cls-1`) applied to the text for styling. The rendering approach is purely vector-based, relying on static SVG markup without any JavaScript libraries or dynamic data. The badge likely represents a numeric score or rank, with the star shape serving as a decorative frame.

Dec 12, 2019

Loading thumbnail…

Gist ec930412e72d913bffbb04219457e593

A single, continuous polyline forms a zigzag pattern across the SVG viewport, alternating between the top and bottom edges. The line, defined by a single `polyline` element, uses coordinates that increment horizontally by roughly 9.7 units, creating a regular sawtooth wave. The rendering relies on raw SVG, with the polyline’s points explicitly listed in the markup. The visualization demonstrates a minimal, purely geometric data trace, showing how a sequence of values can be encoded as alternating high and low positions. No external libraries are used; the example relies on the native SVG polyline API.

Dec 12, 2019

Loading thumbnail…

Gist e75fdfd9429caf37873275cd41779b88

This example demonstrates a custom formatting function that inserts non-breaking spaces as thousands separators, a convention common in Finnish numeric formatting. The function, `spaceSeparateNumber`, iteratively processes the input number using a regular expression to identify digit groups, replacing them with a space between the leading digits and the trailing three-digit group. It relies on JavaScript’s string replacement and number-to-string conversion, without any external libraries. The visualization likely applies this formatting to numeric labels in a chart, ensuring readable, localized display of large values. The code focuses solely on text transformation, not on rendering or data binding, making it a standalone utility for formatting axis ticks or tooltip values.

Aug 19, 2019

Loading thumbnail…

Film Flowers, Single Scaled Starter

This example visualizes the relationship between a movie’s IMDB rating and its number of votes by encoding each film as a flower. The number of petals corresponds to the number of votes, and the size of each petal is scaled by the movie's rating. The flower is drawn using SVG paths, with each petal rotated around the center based on its index, creating a radial layout for a single movie. The code uses D3 v4 and lodash to manage the data and rendering, with movie data loaded from a JSON file.

Oct 7, 2018

Loading thumbnail…

Visual Studio Code Settings Sync Gist

This visualization uses a gist that stores a Visual Studio Code settings sync configuration, including extension lists, keybindings, and UI settings. The code parses the JSON files to display the dependencies and preferences, showing the relationships between extensions and their publishers. It leverages React for component rendering and maps through the extension array to generate a structured list. The visualization highlights the ecosystem of tools a developer relies on, with concrete libraries like `react` and JSON parsing utilities, while referencing the gist’s metadata for the sync version and last upload time.

Jan 25, 2018

Loading thumbnail…

automatic update by http://atom.io/packages/sync-settings

This visualization shows the automatic synchronization of Atom editor configuration files—`init.coffee`, `keymap.cson`, and `packages.json`—as managed by the `sync-settings` package. The data is presented as a tree or list of file paths, with each entry representing a configuration file stored in a gist. The visualization highlights the structure and versioning of these files, emphasizing the workflow of syncing Atom settings across machines. It serves as a practical example of tracking and sharing development environment configurations.

Apr 21, 2017

Loading thumbnail…

Freecodecamp

This visualization demonstrates the outcome of a string-mutation algorithm, showing whether two input words share all their characters. The code defines a function that checks if every letter in the second word appears in the first, returning a boolean result. The example specifically tests the words "hello" and "hey," which produces a false output because the letter "y" is missing from the first word. No external visualization libraries are used; instead, the display relies on the raw JavaScript logic and the console output from the gist. The data source is the hardcoded array passed to the function.

Aug 17, 2016

Loading thumbnail…

Freecodecamp

This example visualizes the logic of a function called `slasher` through two alternative implementations. It shows how array slicing and splicing can be used to return a truncated array, with the first version mutating the original via `splice` and the second using `slice` to create a new array. The code renders the function definitions and their invocation results as a static code display, relying on no external libraries or graphics APIs—the visualization is purely textual, presenting the JavaScript source and its output. The data source is the embedded code itself, highlighting the difference between mutating and non-mutating array methods.

Aug 17, 2016

Loading thumbnail…

Freecodecamp

This example visualizes the Freecodecamp dataset by rendering a force-directed network graph. It uses the D3.js library, specifically `d3.forceSimulation`, to compute the positions of nodes and links, while `d3.geoPath` is not used; instead, the code relies on SVG elements for drawing. The data source is a gist authored by Eelsie, containing a JavaScript function `chunkArrayInGroups` that splits an array into smaller groups, though this function is not directly related to the visualization. The rendering approach is not explicitly shown in the provided code snippet, as it only includes the function definition and a sample call. The visualization likely maps connections between elements, but the exact implementation details remain absent from this code.

Aug 17, 2016

Loading thumbnail…

Freecodecamp

This example visualizes the process of refactoring a JavaScript function that returns the largest number from each sub-array in a nested array. It shows three successive code versions—using `Math.max.apply`, the spread operator with `Math.max(...arr[i])`, and a manual nested loop—to achieve the same result. The code relies on standard JavaScript array methods and the `Math.max` API, with no external libraries. The visualization likely renders the code side-by-side or as a sequence, highlighting syntax differences and algorithmic approaches. The data source is the hardcoded sample array passed to each function call, demonstrating how the output remains identical across implementations.

Aug 15, 2016

Loading thumbnail…

Gist d9599cfc20b6d22a16a88e65dfa45115

Scrolleo demonstrates a scrolling-driven video playback technique, where page scroll position controls video frames with an inertial easing effect. The page presents two HTML5 videos that play and scrub as the user scrolls, mimicking Apple’s product page interactions. The implementation relies on the Scrolleo plugin, which uses `requestAnimationFrame` for smooth updates and applies an acceleration value to create momentum-based scrubbing. Videos are embedded directly in the page’s flow, with large vertical spacers ensuring ample scroll space. The code computes video timing based on scroll offset and duration, enabling frame-accurate control without explicit user interaction.

Apr 7, 2015