Skip to main content
SimilarExport ZIP
100%

GitHub Badges test via Shields

✓ Published0🌍 Public
RRestuta
Last edited Sep 25, 2020
Created on Sep 25, 2020

This visualization uses GitHub badges to display a chain of pull requests, showing their review status and stacking order. Each badge is rendered as a hyperlink-bearing image via Shields.io, with text color-coded by state: green for approved, yellow for needs review, and purple for merged. The readme describes a base PR and two stacked PRs, with each badge embedding the PR number and title in its label. The example highlights how static SVG badges can encode relational metadata, relying solely on shields.io’s image API and Markdown image syntax without custom JavaScript.

AI-generated description

Base PRs

#20

Stacked on top of this PR

#23

#24

Similar vizzes

Loading thumbnail…

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.

EEelsie
62% match
Loading thumbnail…

Gist 95588bd77669e425eaccc173d60db0ea

This example visualizes the concept of turning off GitHub issues, using a force-directed graph rendered with d3.forceSimulation. Nodes represent maintainers, contributors, and pull requests, with links showing the flow of feedback through pull requests instead of issues. The layout is computed dynamically as the simulation runs, with node positions and link paths updated each tick. The data comes from a static JSON array embedded in the code, and the visualization highlights the argument that pull requests, not issues, should be the primary interaction channel.

FFrozenfire92
61% match
Loading thumbnail…

Github API Visualisation

This bar chart visualizes mutual following counts among GitHub users, ranking each contributor by the number of mutual connections they share. The data is loaded from a CSV file, with counts parsed as numbers and rendered as horizontal bars. Using D3 v5, the visualization employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` and `axisLeft` for tick marks. The SVG output styles bars in steelblue, with axes and labels generated programmatically from the data.

Ddabreadman (YI XIANG TAN)
59% match
Loading thumbnail…

Github Punchcard

A GitHub punchcard visualizes commit activity across the days of the week and hours of the day. Random intensity values drive the size of circles plotted for each hour, with day names and tick marks providing structure. The code uses D3.js version 3.5.5 to build an SVG with scales for positioning, transitions to animate circle radii from zero, and data binding to generate all elements dynamically.

PPatrick Wojda
59% match
Loading thumbnail…

Gist 1a9660527e35cdeba43b

This example visualizes a Git branching and merging workflow as a sequence of command blocks, showing each step from checkout through commit and merge. The code uses d3’s selection and transition methods to animate the blocks appearing in sequence, with text labels for branch names and commit messages. It renders as a simple timeline of styled HTML divs, where the data—the list of shell commands—is embedded directly in the markup and driven by d3’s data join. The visualization emphasizes the order and syntax of typical Git operations without simulating actual repository behavior.

LLayne Smith
58% match
Loading thumbnail…

Gist dbe8122ef6678bc81c0628ce7b6020f9

This example tracks a job-search progress checklist in a GitHub gist, visualizing task completion across categories like personal projects and applications. The code renders each checklist item as a node in a force-directed graph, using d3.forceSimulation to position items by category and status (checked or unchecked). A custom SVG rendering layer draws links between related tasks and colors nodes by completion state, while the layout derives directly from the gist’s markdown structure. The visualization shows how a simple to-do list can be reimagined as an interactive network, with hover tooltips revealing task titles and URLs from the source data.

FFrankieFabuloso
58% match
Loading thumbnail…

Fork of Fork of Cool graphics

This multi-view dashboard visualizes GitHub contributor activity and missing-children statistics in India. A circular network chart shows author collaborations, with nodes sized by commit totals and colored links connecting authors who worked on the same repositories. Bar charts using `d3.rollups` and `d3.scaleBand` display commit counts by author and repository, while additional charts present state-level data on total missing children, gender distribution, and per-capita rates. The visualizations use `d3.svg`, `d3.zoom`, and `d3.stack` for interactive exploration of the datasets.

NNita
58% match
Loading thumbnail…

Fork of Code Tree Viz from Livestream

This visualization displays the file structure of a code repository as a bubble chart, where each file is a circle sized by its byte size and colored by file extension type. The data is loaded from a GitHub gist containing a JSON representation of the source tree, and a legend maps extensions to their corresponding colors. The chart uses D3's force simulation to arrange the circles, preventing overlap while labels show file names. The visualization is built using Svelte and leverages D3's `hierarchy` and `forceSimulation` APIs.

CCurran Kelleher
58% match