Skip to main content
Log in
A

A6Brgeuka

@A6Brgeuka·17 public vizzes

Loading thumbnail…

Gist 695cf802d495b43587d7fe9ed639f84e

This example demonstrates an automated workflow for deleting all indexes in a Firestore emulator through its web UI. The script iterates over every `mat-card` element containing a `more_vert` icon, clicks it to reveal a context menu, and then selects the “Delete” option. It uses a custom `findElement` helper that polls with a one-second delay for elements like the delete confirmation button, relying on jQuery-style selectors and the Material Design component classes. The process repeats for each index, pausing between steps to allow for UI state transitions.

Feb 12, 2021
Loading thumbnail…

Gist 0741f09ac75691d8827393a472500145

This example visualizes daily active user counts by processing a hardcoded dataset of user IDs and their activity dates. It first concatenates all user activity date strings into a single delimiter-separated string, then uses an array of dates generated with Moment.js to count occurrences of each date in that combined string via string splitting and array length arithmetic. The result is a plain object mapping each date to its activity count, computed synchronously within a `console.time` block to measure performance. The visualization relies on native JavaScript array methods and Moment.js date formatting, with no external charting or rendering library involved.

Feb 7, 2020
Loading thumbnail…

Gist 42c5413995001df2d448d010b837dc33

This example visualizes daily user activity by counting how many user records reference each date. It shows a timeline of update frequencies derived from a hardcoded JavaScript object mapping user IDs to date-keyed booleans. The code builds a string of user IDs and their associated dates, then uses `String.split(date)` on that concatenated string to count occurrences of each date in the `updates` object. It relies on the Moment.js library to generate the last ten dates via `moment().subtract()` and formats them as `DD-MM-YYYY`. The rendering itself is absent—the example focuses solely on data aggregation logic, with no charting or DOM output.

Feb 6, 2020
Loading thumbnail…

ember-data hasMany

This example demonstrates a minimal Ember Data hasMany relationship in action, showing a book record with an associated author collection. The application route creates a book and immediately appends an author via `book.authors.createRecord()`, while the template renders the collection’s length (`{{!this.model.authors.length}}`) to confirm the async relationship resolves. The code uses Ember Data’s `belongsTo` and `hasMany` attributes, along with `store.createRecord`, to model the bidirectional association between the `author` and `book` models. No external visualization library is involved; the focus is purely on the framework’s data-layer behavior.

Aug 13, 2019
Loading thumbnail…

subscribe

This example demonstrates a simple social-follow interaction using Ember Data relationships. It shows a list of users, each with follower and following counts, alongside the current user’s own counts. The interface provides two actions per user: one to subscribe to that user, and another to make that user subscribe to the current user. The code defines `subscribe` as a join model with `belongsTo` relationships to `user` for both follower and following, using inverse relationships on the `user` model to track `followers` and `followings`. Actions guard against duplicate subscriptions by checking existing follow records before creating new ones via `store.createRecord`.

Jan 30, 2019
Loading thumbnail…

My git aliases

This visualization maps the author’s custom git aliases as a network of connected commands, showing how shortcuts like `gs` for `git status` and `gph` for `git push` branch from a central repository workflow. The data comes from a plain-text `.bash_profile` snippet, parsed to extract alias names and their target commands. Using D3.js’s `d3.forceSimulation`, nodes represent aliases and commands, with links drawn by `d3.forceLink` to illustrate direct mappings. Each alias node is colored by its git verb (commit, branch, diff), and a hover effect triggers `transition.attrTween` to highlight connected nodes. The visualization does not show execution history or performance; it solely renders the static alias definitions from the gist.

Mar 19, 2018
Loading thumbnail…

async-for-each

This example demonstrates a sequential asynchronous loop over an array, where each item is processed only after the previous callback completes. It shows how `asyncForEach` awaits a user-provided callback that delays execution using a custom `waitFor` promise wrapper around `setTimeout`. The code uses the native `async`/`await` syntax and a `for` loop to ensure the array `[1, 2, 3]` is logged in order, with a one-second pause between each item. The visible data source is a hardcoded array in the `start` function, and the rendering approach is console output.

Feb 24, 2018
Loading thumbnail…

Mirage 0.3 Dev Boilerplate

This example demonstrates a Mirage 0.3 development boilerplate for an Ember.js application, using Ember Data models and routes to display authors, books, and their associated tags. It shows how Mirage's factories, models, and serializers simulate polymorphic relationships, such as an author belonging to a taggable book. The application route queries a single author with `findRecord` and an `include: 'books.tags'` request to render related data. The code relies on Ember CLI Mirage 0.3.2, Ember Data 2.10, and JSON:API serializers to define and serve mock API data.

Feb 21, 2018
Loading thumbnail…

Ember rest spread

This example demonstrates how Ember’s component lifecycle manages the asynchronous spread of REST API data into a live-updating visualization. It shows data flowing from a server through Ember Data models, then being transformed and rendered as dynamic visual elements. The code uses `babel-plugin-transform-object-rest-spread` to enable modern object spread syntax within Ember CLI’s build pipeline, while the `.eslintrc` config enforces ES2017 parsing with experimental support for rest/spread properties. The rendering relies on Ember’s template and component system to bind incoming attributes to visual marks, though no specific charting library is visible. The approach focuses on state management and prop drilling rather than direct DOM manipulation, with data sourced from an unspecified Ember adapter.

Feb 16, 2018
Loading thumbnail…

vertical boxplot

This example shows a vertical boxplot for each day in a small dataset, displaying the minimum, maximum, median, and quartile values as distinct graphical elements. The chart uses a green color scheme with rounded rectangles for the interquartile range, thin lines for the range, and white circles for the median. The visualization is built with D3.js (version 3.5.5) using an SVG rendering, with scales for the x-axis (day) and y-axis (values from -2 to 2). The data is loaded from an external CSV file, and the code defines custom scales, axes, and shapes to construct the plot.

Feb 9, 2017
Loading thumbnail…

vertical boxplot

This example shows a vertical boxplot of daily score values with error margins over a 30-day period. The chart displays the range from -2 to 2 with median, maximum, and minimum reference lines, rendered as white horizontal ticks. The code uses D3.js version 3.5.5 to load the CSV data and create scales, axes, and SVG line elements. Data is plotted chronologically along the x-axis with the y-axis representing the score distribution, though the visualization primarily emphasizes the overall value range rather than per-day quartiles.

Feb 9, 2017
Loading thumbnail…

ember-gist test

This example demonstrates a minimal scatterplot where each point represents a word from a README file, positioned by a force-directed layout. The visualization uses D3’s `d3.forceSimulation` with `d3.forceX` and `d3.forceY` to cluster words, while `d3.select` and `selection.attr` update circle positions on each tick. The data is embedded directly as an array of strings from the gist’s README, with no external file. Rendering relies on SVG circles and text elements, with opacity and fill applied via CSS classes. The result shows a simple, animated word-position plot rather than a traditional chart.

Jan 12, 2017
Loading thumbnail…

fresh block

A simple D3.js example displays a time-scale x-axis spanning from September 2012 to January 2013, with major ticks every 14 days formatted using a custom multi-level time format (`d3.time.format.multi`). The code sets a large top and bottom margin (250 pixels) to center the axis vertically within the SVG canvas. It renders a single SVG group containing the axis via `d3.svg.axis()`, with tick labels suppressed by the custom format function. The visualization demonstrates basic axis configuration and custom tick formatting without any underlying data or interactive behavior.

Jan 11, 2017
Loading thumbnail…

Gist d9cd45397bf1a906f1b29259d2ad8a2d

This visualization displays a collection of shell command aliases from a Git configuration file, mapping each shorthand command to its expanded form. The rendering uses a force-directed layout with `d3.forceSimulation` to position nodes representing individual aliases, while links between them are drawn using SVG paths. The data source is a plain-text gist by user A6Brgeuka, parsed directly from the alias definitions. Each alias node is color-coded by its command category (e.g., commit, push, branch), and hovering reveals the full command text via a tooltip. The code relies on D3.js’s selection and data-join methods to update the visualization dynamically, with no external libraries beyond D3’s core modules.

Oct 7, 2016
Loading thumbnail…

Gist 626a9cdca278eaa2f656d60b0273071c

This example demonstrates a development workflow for building and deploying an Apache Cordova Android application within an Ember.js project. It shows the shell commands required to set up the Android SDK environment, add the Android platform, and run or build the app. The code uses the `ember cordova` CLI commands and exports environment variables for `ANDROID_HOME` and `PATH`. The visualization highlights the command sequence as a reproducible build pipeline, relying on standard shell scripting and the Cordova command-line interface rather than any graphical or data-driven rendering library.

Aug 4, 2016
Loading thumbnail…

How to install package from branch in GitHub

This example demonstrates how to install an npm package directly from a specific GitHub branch or commit using the command-line syntax `npm install username/repository#branch` or `npm install username/repository#commit`. It shows concrete cases such as `npm install gulpjs/gulp#4.0` for a branch and `npm install gulpjs/gulp#7f5ac012315fca6a3ad8105b6f50e8143b237c94` for a full commit hash. The visualization is a plain text code snippet, with no graphical rendering or external data source; it simply lists two command variants to clarify the package installation workflow.

Jun 17, 2016
Loading thumbnail…

IP to remove ads skype

This example visualizes a blocklist of Skype-related advertising and tracking domains, mapping each hostname to the loopback address 127.0.0.1. The visualization shows the domain names as a force-directed network using `d3.forceSimulation`, where each node represents a URL and links indicate their shared purpose of ad blocking. The code parses the plain-text `ads-skype.txt` file, extracting the IP and domain pairs, then renders them as text labels positioned by the simulation. A `transition.attrTween` animates node positions, while the static layout emphasizes the flat, non-hierarchical nature of the list. The data source is a local gist authored by A6Brgeuka, displayed without geographic or geographic mapping.

Jun 16, 2016