Gist 8d15c489a802400667a9e57997b4135d

100%

Gist 8d15c489a802400667a9e57997b4135d

✓ Published0🌍 Public

Last edited May 30, 2023

Created on May 30, 2023

This example visualizes the structure of a JavaScript object containing icon path data from Font Awesome and other sources. The code defines an object with icon names as keys and stores their SVG path strings, widths, and heights. It uses D3.js to build an interactive force-directed graph, rendering nodes and links with SVG elements. The visualization displays how these icon definitions are connected, with the data derived directly from the gist's file content.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist bf027117c9b0bdfb633414ab5bd84877

This example visualizes a network of file and folder connections from a Gist repository, using a force-directed graph layout to reveal clustering and link patterns. The code employs D3.js’s `d3.forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while SVG paths and circles render the edges and vertices. A drop-down menu lets users filter the displayed links by type, and the visualization includes a legend and hover tooltips. The underlying data is hardcoded as a JavaScript array of node and link objects, reflecting the structure of a GitHub Gist.

MMistyBlunch

73% match

Loading thumbnail…

Gist db32a113f546aa03b43c0e1f84f80d28

The visualization shows a force-directed network graph of GitHub gist data, with nodes representing individual gists and links showing relationships between them. It uses d3.forceSimulation to compute the layout, with node size encoding gist size and color indicating file type or language. The rendering relies on SVG elements updated per tick via the simulation’s tick event. The code loads a static JSON file containing preprocessed gist metadata, and does not use canvas or WebGL. The visualization highlights clustering patterns among related gists, revealing emergent communities in the dataset.

335degrees

71% match

Loading thumbnail…

Icon Chart using SVG Path Command

This example shows a 10-by-10 grid of circles that form an icon chart, with the first five circles in the top row highlighted in a lighter blue to mark a distinct subset. The visualization is built entirely with SVG and JavaScript, creating each circle dynamically using `document.createElementNS` and setting `cx`, `cy`, `r`, and `fill` attributes directly. The data is hard-coded in nested loops, and the SVG is appended to the page body, demonstrating a minimal, manual approach to icon-based charting without external libraries.

PPeter Cordone

71% match

Loading thumbnail…

Iconclass statistics

This visualization maps a dataset of Iconclass notation codes—a hierarchical system for describing subjects in visual art—to a force-directed network layout using D3’s `d3.forceSimulation` and `d3.forceLink`. Each node represents a specific iconographic concept (e.g., “lamb bearing cross,” “hourglass”), with labels pulled from the `ic_text` column and edges inferred from shared prefix hierarchies in `ic_stem`. Node size reflects `ic_count` or `weight_avg`, while color encodes top-level divisions (`ic_d1`). The layout spreads nodes via `d3.forceManyBody` and `d3.forceCenter`, producing a clustered scatter of related themes, with a data source read from an external CSV via `d3.csv`.

MMrMattSim

71% match

Loading thumbnail…

SVG Icons in JS

This example demonstrates how to embed SVG icons directly in JavaScript code as template strings, avoiding the need for separate image files. It displays three icons from heroicons.com—an arrow path, an external link, and a gear—centered in a flexbox layout. Using D3.js, the code maps over the icon keys and injects the SVG markup into div elements via the `.html()` method, then resizes each icon to 250 pixels wide. The approach highlights a clean, dependency-light way to manage icons in web visualizations.

CCurran Kelleher

70% match

Loading thumbnail…

Gist 70625

This example visualizes a force-directed graph built with the D3.js library, using `d3.forceSimulation` to compute the layout. The graph’s nodes are rendered as text labels on an HTML5 Canvas, where each label displays a single character from the Gist’s source code. The visualization shows the spatial clustering of these characters, and the code calculates how many times a given character appears in a node’s adjacency list using a custom `f(ra,n)` method. The rendering approach relies on Canvas’s `fillText` for drawing labels, with the simulation updating positions each tick.

DDylanFM

70% match

Loading thumbnail…

D3 & Font-Awesome

This example shows a row of social media icons rendered with Font Awesome and D3, where each icon responds to mouse interactions by changing background color. The code binds an array of icon names to D3 selections, appending `<i>` elements with Font Awesome classes and applying styles dynamically. It uses D3’s `.on()` method to handle mouseover, mouseout, mousedown, and mouseup events, toggling between default, hovered, and clicked styles. The data source is a hardcoded list of icon identifiers, and the rendering relies on Font Awesome’s CSS classes for glyph display.

CCurran Kelleher

70% match

Loading thumbnail…

D3 & Font-Awesome

This example demonstrates how to combine D3 with Font Awesome to create an interactive row of clickable social media icons. It shows a static, horizontally arranged set of six square brand icons—including Twitter, Facebook, LinkedIn, YouTube, GitHub, and Google Plus—that respond to user mouse events. The visualization uses D3’s data join to bind an array of icon names to newly appended `<i>` elements, while Font Awesome supplies the glyphs via CSS classes. Hovering changes the background color to light gray, clicking turns it gray and logs the icon name to the console, and releasing restores the hover state. The code relies on D3’s selection and style methods, plus Font Awesome’s CSS framework, with no external data source.

FFrissAnalytics

70% match