TPN

100%

✓ Published0🌍 Public

Last edited Dec 2, 2018

Created on Dec 1, 2018

This example visualizes a Petri net parsed from a TPN specification, showing places as circles and transitions as rectangles. The code reads the TPN file, extracts nodes and links, and uses d3.forceSimulation with forceCenter, forceManyBody, forceCollide, and forceLink to layout the graph. Marked places are highlighted with a teal fill and display their token counts as text labels. The rendering uses SVG elements (circle, rect, line, text) and a marker for arrowheads, with labels positioned near each node during the simulation’s tick events. The data source is the provided TPN file, and the visualization updates positions dynamically as the simulation runs.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

8

This example presents a force-directed network graph where circular nodes, colored teal and labeled with text, are connected by light-gray links. The layout is computed using `d3.forceSimulation`, with `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to keep the graph centered. Node positions update on each simulation tick, adjusting the circle and label coordinates via `attr`. The data is loaded as JSON from a GitHub gist, and the visualization is rendered as an SVG inside a React-prepared HTML page using D3 v4.

Hharoldle

71% match

Loading thumbnail…

TP6 (V2)

This example visualizes a network of French parliament members, showing connections between them with node color indicating political group affiliation and link thickness representing tie strength. It uses a force-directed graph layout via `d3.forceSimulation` with link, charge, and center forces, rendering nodes and links as SVG elements. Node colors map to party groups using a custom `d3.scaleOrdinal`, and a legend generated from CSV data labels each color. The graph loads data from JSON and CSV files, and supports dragging nodes to reposition the simulation.

JJeremyBesson

71% match

Loading thumbnail…

TP6 (V2)

JJeremyBesson

71% match

Loading thumbnail…

Gist 97384

This example visualizes a force-directed network graph where nodes and links are rendered as animated dots and lines. It uses d3.forceSimulation to compute node positions and d3.line to draw the connections, with the entire scene updated on each simulation tick. The code pulls node coordinates from the simulation and redraws SVG elements, showing how real-time physics-based layout can be paired with D3’s data-binding for interactive node-link diagrams.

CCaged

70% match

Loading thumbnail…

D3 Example

This example demonstrates a basic force-directed network graph with three nodes and two links, rendered as SVG circles. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces to position the nodes, while a tick event updates each circle’s `cx` attribute based on the simulated x-coordinates. The code defines nodes and links as static arrays, with positions calculated entirely by the physics simulation. The example relies on D3 v6 and selects an SVG container by ID, but the script tag references a missing `bundle.js` file, so the simulation may not execute in practice.

Ttgu007

70% match

Loading thumbnail…

Gist cb09210b412a2bce44aad4f310499d47

This example presents a network visualization built with D3.js, using the `d3.forceSimulation` API to position nodes and links. It displays interconnected data points rendered as circles and lines, with the simulation handling collision detection and link forces. The code also incorporates CSS styling rules that affect text wrapping and overflow within a `.generic-content` paragraph container, though this appears to be a styling detail rather than the core graph structure. The visualization shows a dynamic, force-directed layout where node positions update over time based on physical simulation parameters.

KKopylovVitalik

70% match

Loading thumbnail…

Force-Directed Graph

This is a force-directed graph visualization rendered as an SVG, showing three nodes and three links in a small network. The node and link positions are determined by a physical simulation where nodes repel each other and links pull connected nodes together. The code uses `d3.forceSimulation` to combine `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces, updating SVG circle and line elements on each simulation tick. The data comes from a local JSON file with node IDs and link source/target references.

Ttkcj0912

70% match

Loading thumbnail…

TnT Tree

This interactive phylogenetic tree visualization renders a Newick-format dataset using the TnT tree API and D3 v3. It displays a collapsible tree where nodes toggle between circular and triangular markers via a click handler, and hover events highlight the path from a selected leaf back to the root by adding a `marked` class to corresponding `path.tnt_tree_link` elements. A button switches the layout between vertical and radial modes using the `tnt.tree.layout` API.

11Cr18Ni9

70% match