Skip to main content
SimilarExport ZIP
100%

Iconclass statistics

✓ Published0🌍 Public
MMrMattSim
Last edited Apr 25, 2015
Created on Apr 25, 2015

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`.

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

Force-Directed Graph V2

This force-directed graph maps a network of arts organizations and their related projects, with nodes grouped into four color-coded clusters and connected by weighted links. The visualization uses D3’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while a drag interaction lets users move nodes and restart the simulation. Node sizes vary by hierarchy level, and labels appear directly on nodes as SVG text. Data is generated programmatically in `data.js`, with link distances and node styling defined per connection.

Sschneich
72% match
Loading thumbnail…

Gist 05ff2219cb2cc463ad1612e8a501c400

This visualization uses a force-directed simulation to show a network of interconnected nodes, with each node represented as a colored circle and links drawn between related points. The code relies on `d3.forceSimulation` and `d3.forceLink` to compute the layout, while `d3.drag` enables user interaction to move nodes. A canvas element renders the graph, with the simulation updating positions each tick. The data appears to be a small custom-generated dataset of nodes and edges, with node colors mapping to distinct groups, and the visualization does not include any external data source or geographic rendering.

MMistyBlunch
72% match
Loading thumbnail…

force directed test

This example shows a hierarchical dataset rendered as a force-directed network of circular nodes, where each node’s size and text content are scaled based on a numerical data value. The visualization uses `d3.forceSimulation` with a combination of link, charge, center, and collide forces to position nodes, while SVG `<line>` elements draw the connecting edges. Node labels are displayed inside circular `foreignObject` containers with HTML styling, with text clipped to fit. The underlying data is loaded from a CSV file via `d3.csv` and structured into a hierarchy using `d3.stratify`.

RRobinL
72% match
Loading thumbnail…

force directed text fit done

A force-directed layout arranges a hierarchical dataset as a bubble chart, with circle size proportional to each node’s value and text labels fitted inside. Nodes cluster by parent, while lines show parent–child links. The simulation uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide`. Labels are rendered as SVG text with font sizes computed per tick and node radius. Data loads from a CSV via `d3.csv`, and colors come from `d3.scaleOrdinal(d3.schemeCategory10)`.

RRobinL
72% match
Loading thumbnail…

Icicle & Force Layout

The visualization combines an icicle chart with a force-directed node-link diagram, both driven by the same hierarchical dataset of loan categories. The icicle chart, rendered with SVG rectangles via `d3.layout.partition`, allows click-to-zoom into any non-"end" node, updating the visible rectangles and highlighting the selected path in orange. Simultaneously, a separate force simulation using `d3.forceSimulation` and `d3.forceLink` displays the hierarchy as a connected network of colored circles, with nodes colored by group and linked by edges; clicking a rectangle also recolors the corresponding node in the network. The data comes from `icicles.json` and `nodes.json`, and the example uses D3 v3 for the partition layout and D3 v4 for the force layout.

EEoinMGB
72% match
Loading thumbnail…

force directed test

A hierarchical dataset from a CSV file is visualized as a force-directed graph, where nodes are sized proportionally to a square-root-scaled `data` value and rendered as circular foreign objects containing wrapped text. SVG lines connect parent and child nodes based on the data's structure. The visualization uses D3 v4's `d3.stratify`, `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes, which are grouped elements containing a circle and an `foreignObject` with HTML content. The layout dynamically adjusts node positions and text fit during each simulation tick.

RRobinL
72% match
Loading thumbnail…

Gist 3e83522b4fd1d103c56977dac9442a3e

This example visualizes a force-directed network graph, showing nodes and edges arranged in a cluster layout. It uses D3’s `d3.forceSimulation` to compute node positions and `d3.forceLink` for edge constraints, rendering the result as an SVG. The graph data is generated locally in the code via a helper function that builds node and link arrays, with node colors reflecting a categorical scale. The visualization updates positions on each simulation tick, producing an interactive, animated network layout.

MMistyBlunch
71% match