Skip to main content
100%

esri-icon visualization

✓ Published0🌍 Public
SStephen
Last edited Dec 8, 2015
Created on Dec 8, 2015

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.

AI-generated description

Similar vizzes

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
69% 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
67% match
Loading thumbnail…

SVG Icons

This example displays a small set of vector icons from Heroicons, shown as large, browser-rendered SVG elements. It demonstrates a practical way to embed icons directly in JavaScript without external image files. The code uses `d3.select` to build a flexbox layout, iterates over the icon keys with `selectAll` and `join`, and injects the raw SVG strings via `.html()`. The rendered SVG is then resized by setting the `width` attribute to 250 pixels.

Ffcordon@pin.upv.es
66% match
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
65% 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
64% match
Loading thumbnail…

State Icons

State Icons displays every U.S. state as a compact 48×48 pixel SVG icon, with each state’s name shown above its clipped silhouette. The visualization uses a single TopoJSON file, pre-processed from USGS data, where each state is projected with its own local coordinate system and simplified via topojson. The code applies `d3.geo.path` with a null projection to render the pre-transformed geometries, and loads the combined data through `d3.json`. This approach preserves recognizable state shapes while fitting them uniformly into the small grid.

Mmbostock
63% match
Loading thumbnail…

Rendering CSS Named Colors - Arc

The visualization displays all CSS named colors as a full circular arc chart, with each color occupying a wedge proportional to its position in the dataset. It uses React to manage state and render SVG paths, while D3 v7 handles data loading via `d3.csv` and arc generation through `d3.arc`. The data comes from a GitHub-hosted CSV file of named colors and their RGB hex values, which directly sets each path’s fill. The chart initially shows a loading message until the data arrives.

Ppranav-vis
62% match
Loading thumbnail…

ice-5

This example displays a custom SVG illustration of a stylized landscape, featuring a large decorative arch, circular shapes, and two bucket-like icons connected by a horizontal rail. The page also presents basic metadata about a CSV dataset, including its size in kilobytes, row count, and column count, which is loaded from a GitHub gist. The visualization is built using React and rendered with SVG, while the data summary is generated using D3 v7’s `d3.csv` and `d3.csvFormat` methods. The layout is styled with embedded CSS, using simple color blocks and headers.

Ssowmyanagula@my.unt.edu
62% match