Skip to main content
100%

JSON Of All Font Awesome 4.7.0 Icons

✓ Published0🌍 Public
Aackuser
Last edited Apr 28, 2017
Created on Sep 20, 2018

The visualization displays the complete list of Font Awesome 4.7.0 icon names as a structured JSON dataset, revealing the naming conventions and categorical groupings of over 600 icons. It uses a hierarchical layout powered by d3.hierarchy and d3.treemap to partition the icons into clusters based on their prefix patterns, such as `fa-arrow-*`, `fa-chevron-*`, and brand icons. Each leaf node renders the icon name as text, with the treemap cells shaded by the length of the icon name to highlight longer, more descriptive identifiers. The dataset originates from a gist by ackuser, and the code parses the JSON directly with d3.json to build the visualization.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 8d15c489a802400667a9e57997b4135d

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.

LLandoLabrum
72% 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
67% 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
66% match
Loading thumbnail…

AIDS poster ICONCLASS

This visualization is a custom D3.js scatter plot that maps ICONCLASS iconographic codes from a CSV file, appearing as a dense, vertical strip of colored rectangles. It shows the frequency and classification of each iconographic symbol, with each rectangle’s height and color encoding the count and hierarchical category (e.g., Religion, Nature, Humans) via a legend. The code uses `d3.csv` to load the data, `d3.select` and `d3.svg.axis` for rendering, and custom scales to position elements, while also appending hover tooltips with code descriptions. The rendering is an SVG output, with the data sorted by count and displayed as a compact, barcode-like representation.

MMrMattSim
62% match
Loading thumbnail…

Bar chart from external JSON file

This bar chart displays the frequency of each letter of the alphabet, using data loaded from an external JSON file. The visualization uses D3 v3 to create an SVG, with an ordinal x-axis for letters and a linear y-axis for frequency values. The bars are rendered as rectangles with a steelblue fill that turns brown on hover. The chart includes rotated x-axis labels and a y-axis labeled "Frequency," with data explicitly parsed from the JSON structure before scaling and rendering.

JJverma
61% match
Loading thumbnail…

ANY JSON tree (DRAFT) more data

This visualization displays a hierarchical tree representing a JSON response from a FileMaker Data API call, with nodes for objects, arrays, and leaf values. The D3.js v5 code builds the tree layout using `d3.tree()` and renders nodes as SVG text elements and links as horizontal paths. The data includes nested JSON strings within the records, creating deep hierarchies that expose overlapping text at level 4. The visualization uses a rainbow color scale for node values and supports zoom interaction, though the text-heavy rendering struggles with long data values.

RRussell Watson
60% match
Loading thumbnail…

Tree diagram using symbols for nodes in v4

This tree diagram uses D3.js v4 to visualize hierarchical data with nodes represented by geometric symbols instead of traditional circles or text markers. The example loads a static JSON dataset and applies D3’s `d3.tree()` layout, with `d3.hierarchy` structuring the parent-child relationships. Link paths between nodes are styled with strokes based on each node's nested `level` property, while each node’s symbol shape and fill are determined by `d3.symbol()`—using `symbolCross` for values above nine and `symbolDiamond` below—and sized by the node's `value` attribute. The SVG rendering includes internal and leaf nodes with text labels positioned relative to each symbol.

Dd3noob
60% match
Loading thumbnail…

esri-icon visualization

This example displays the complete set of Esri icon glyphs available in the ArcGIS API for JavaScript 3.14 CSS. Each icon is rendered as an HTML span element with a class name from the `esri-icon-*` family, and the page relies on the `esri.css` stylesheet for visualization. The layout arranges the icons in a simple row, showing the distinct visual forms for navigation, editing, charting, and other map-related actions. It serves as a reference for developers to preview available UI symbols without any interactive or data-driven behavior.

SStephen
60% match