Gist 71712428fc3cd50085079d14e385bc42

100%

Gist 71712428fc3cd50085079d14e385bc42

✓ Published0🌍 Public

Last edited Jul 24, 2018

Created on Jul 20, 2018

This example shows a Duolingo skill tree where icons for learned skills with less than full strength are visually faded, using opacity scaled to the skill’s remaining strength. A userscript first retrieves the username and language data from the page, then queries the Duolingo API for skill strength values. Using jQuery selectors, it iterates over the skill-tree links, matches each skill’s short name, and applies a CSS opacity of `0.5 * strength` to the icon’s parent element. The visualization relies on the `customjsReady` utility and `$.get` to fetch live user data, fading only skills that are learned but not yet at full strength.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist e0350d5c472d4ca8006746e6446886ac

This WebGL-powered visualization demonstrates how reusable "skills" can be packaged as discrete, context-aware units for agentic coding with Claude Code. The rendering shows a network graph of skill components—including SKILL.md files, reference scripts, and constraint sets—using custom shaders to animate the relationships between repository metadata and skill load behavior. Built with Vue and Three.js, the scene maps the flow from persistent context files like CLAUDE.md to on-demand skill invocation, with color-coded nodes representing different skill anatomy parts. The visualization directly encodes the comparison table from the workshop, translating markdown structure into an interactive 3D topological map where edge thickness represents context-window footprint and script interpolation points appear as pulsing geometry.

IIoTeacher

62% match

Loading thumbnail…

Rough skills plot

This example visualizes two small datasets as hand-drawn-style skill ratings, with each row showing five circular marks that fill or remain hollow based on a numeric value. It first presents the comparison of two series, where the first dataset uses green cross-hatched circles and the second uses orange, while text labels identify each item. The code builds SVG scenes using D3 v4 to append groups and text, and Rough.js 3.1.0 via `rough.svg` to generate the sketch-like circles with custom fill styles. Rendering is entirely SVG-based, with data hardcoded as an array of arrays, and no external data source is loaded.

PPatrick Wojda

60% match

Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

A hierarchical dendrogram combines with a grouped horizontal bar chart to display nested skill categories and proficiency levels. Each leaf node is paired with an animated, color-coded bar whose length encodes a numeric skill value (0–5), while internal nodes show category labels. The visualization uses D3 v4 with SVG and a custom tree layout, positioning bars adjacent to leaf nodes and applying distinct colors per skill. Subtle hover-free transitions animate bar widths on load, and dashed grid lines plus a custom top axis with qualitative labels ("Basic 1.0" through "Guru 5.0") enhance readability. The design adapts Mike Bostock's dendrogram concept by integrating grouped horizontal bars directly at the leaf tips, preserving hierarchical clarity while adding quantitative detail.

663anp3ca

59% match

Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

This visualization combines a dendrogram with grouped horizontal bar charts, mapping skill categories and subcategories to hierarchical tree branches while bar lengths indicate proficiency levels. The chart is rendered in SVG with a custom clustering layout and stratify function, using animated transitions to grow the bars when the page loads. Leaf nodes display colored rectangles with labels, while internal nodes show category names. The x-axis uses tick formatting to convert numeric values into experience labels like "Basic" through "Guru." The data comes from a CSV file containing skill names, numerical values, and color assignments, with the visualization based on Mike Bostock’s original dendrogram example.

663anp3ca

58% match

Loading thumbnail…

D3 testing2

A D3.js bar chart visualizes a single student’s self-assessed skills across five categories: programming, computers, art, communication, and collaboration. Each category is rendered as a fixed-width rectangle, with bar heights scaled by multiplying the numerical skill value by ten. The chart uses SVG rectangles appended directly to a hardcoded, static data object, with no axes or scales defined. Interactive tooltips appear on hover, implemented via D3 mouseover, mousemove, and mouseleave event handlers that dynamically update an HTML div’s opacity and position.

PPere Ginebra Solanellas

58% match

Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

This visualization combines a dendrogram with grouped horizontal bar charts to display hierarchical skill data, based on Mike Bostock's dendrogram concept. The layout positions a cluster dendrogram on the left, with each leaf node connected to a horizontal bar extending to the right, colored according to per-skill values from the accompanying CSV data. Node labels are placed inside or beside the bars, while internal nodes show category names. The chart includes a custom separation function for the tree layout, an x-axis with descriptive skill-level labels (e.g., “Basic 1.0” to “Guru 5.0”), dashed gridlines, and drop shadows. Bars animate their width on load using D3 transitions. The visualization is rendered using D3 v4 with SVG, and combines hierarchical relationships with quantitative comparison in a single view. Source code is available in the gist and was adapted from earlier blocks by willzjc, bumbeishvili, and Mike Bostock.

663anp3ca

57% match

Loading thumbnail…

Gist 1057445

This example demonstrates a CSS sprite-based icon system where two distinct states—overview and demographics—are rendered as background images with active-state variations, using offset positioning to switch between icons. The code relies on Compass’s sprite helpers and a Sass `@each` loop to generate the `.icons-overview` and `.icons-demographics` classes, while manually specifying `background-position` values (e.g., `20px -70px` and `20px 12px`) to align the correct sprite icons. The active states toggle background positions via pseudo-classes like `:active` and custom classes such as `.overview_active`. The implementation uses the `icons-sprite` mixin from Compass, with the sprite file referenced from an external asset path. No data or interactive behavior is present; it purely showcases static UI icon styling.

CCaged

56% match

Loading thumbnail…

Gist 61766

This visualization transforms the nested validation logic of a JavaScript function into a radial tree diagram. It shows the hierarchical decision tree of password confirmation checks and user-input validations, with each branch representing a conditional alert. The code uses D3.js’s `d3.forceSimulation` to arrange nodes, likely with `d3.hierarchy` and `d3.tree` or similar layout methods, while rendering circles and links to map the flow. Data is derived directly from the gist’s source code, converting the repetitive if-else structure into a visual metaphor for form validation complexity.

CCaged

56% match