iso graphical symbols

100%

iso graphical symbols

✓ Published0🌍 Public

Last edited Jun 3, 2015

Created on Jun 3, 2015

This visualization presents a searchable grid of ISO graphical symbols, sourced from a JSON file containing metadata like reference numbers, titles, categories, and standards. It displays each symbol’s image alongside its title and reference number for quick scanning. The interface uses D3.js to render the grid and filter symbols by category or standard, with a scrollable layout managed through standard DOM events. Clicking a symbol reveals its full details, and the visualization relies on D3’s data-binding and selection methods to update the view dynamically.

AI-generated description

Similar vizzes

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

63% match

Loading thumbnail…

D3 all symbols

This example displays a grid of horizontal and vertical stripes overlaid with all D3 symbols. The code generates two sets of 100 rectangles each, using D3’s `range` and `selectAll` with `join` to create the stripes, and applies two SVG masks to reveal the symbols through the grid. Each mask is built by iterating over D3’s `symbols` array and rendering each symbol using the `symbol()` API, with the second mask inverted to create a contrasting overlay effect.

Jjony6290

62% match

Loading thumbnail…

Seven Symbols

Seven small SVG canvases each display a distinct geometric symbol—circle, cross, diamond, square, star, triangle, and wye—from the d3-shape library. A red reference circle outlines the same area (2500 square pixels) for each symbol, positioned around its shared centroid. The visualization uses `d3.symbol()` with a configured size and animates each path’s rotation via a `d3.timer` callback, while `d3.selectAll` binds the appropriate symbol type from the data-type attribute. The paths are rendered as SVG with dynamic `d` and `transform` attributes.

Mmbostock

62% match

Loading thumbnail…

ICE-7 Reusable scatter plot with different symbol

This example uses D3.js to create a reusable scatter plot that visualizes the classic Iris dataset, encoding sepal length and petal width on the axes while different iris species are distinguished by both symbol type and color. The plot is rendered as an SVG canvas sized to the browser window, with axes labeled using D3's linear scale and axis functions. It leverages D3's ordinal scales to map species to a set of predefined symbols and a custom color palette, while the chart's dimensions, margins, and data mappings are configured through a configurable scatter plot component.

Mmanishcheruku

61% match

Loading thumbnail…

Symbol Fork of SVG Fundamentals - D3 (group)

This example shows a grid of horizontal and vertical bars overlaid on an SVG canvas, with a circular symbol-shaped mask revealing a cross-hatched pattern at the center. The visualization uses D3 v7 to generate 100 rectangles in each direction, positioning them by index and sizing them to cover the full viewport width and height. Two masks, created with `d3.symbol` and a star symbol type, are applied to the rectangles to alternate black and white fills, producing the contrasting central motif.

SSidney Oluoch

61% match

Loading thumbnail…

Dynamic D3 Scatterplot with Symbols

This interactive scatterplot animates through the Iris dataset, cycling the x-axis across four measured attributes every two seconds. It uses D3 scales and SVG symbols to encode species with both color and distinct shapes. The visualization leverages a reusable scatterplot function that re-renders on each interval, with axes updating dynamically. The data is loaded via D3’s CSV parser, and the plot uses ordinal scales for categorical color and symbol assignment.

Mmegan-grannan

61% match

Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This example shows a reusable D3 scatter plot displaying the Iris dataset, with each species represented by a distinct symbol (circle, diamond, and triangle). The chart maps petal length on the x-axis and sepal length on the y-axis, using axes generated with `d3.axisLeft` and `d3.axisBottom`. The implementation uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` and `d3.symbol` to assign symbols to species, and a modular JavaScript structure with getter-setter functions to configure width, height, margins, and accessor functions. Data is loaded via `d3.csv` from a GitHub gist URL.

TTheo-0201

61% match

Loading thumbnail…

d3 simbols

A grid of horizontal and vertical stripes alternates through two SVG masks to reveal a large star-shaped symbol at the center. The example demonstrates D3’s `symbol` and `symbols` API to generate the star path, combined with `mask` elements to create intersecting stripe patterns. Fifty rectangles are drawn in each direction using `d3.range` and `join`, with the horizontal set masked by an inverted white-on-black layer and the vertical set by its opposite. The result shows how layered masks can produce dynamic visual interferences.

Sserebryanaya.n@gmail.com

61% match