Network Map #2

100%

Network Map #2

✓ Published1🌍 Public

Last edited Nov 3, 2021

Created on Nov 3, 2021

A network map visualizes devices on a local network as red nodes with green outlines, labeled by IP address, connected by black links to their gateway. The layout is computed using `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces. Node and link data derive from a CSV file listing hosts, IPs, and interfaces, parsed with d3.csv. The SVG rendering updates positions on each simulation tick.

AI-generated description

Half way towards a smiley face. part 2... had to reload the page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Network Map #3

This network visualization maps the devices on a local area network using a force-directed graph layout. The D3.js and d3-force libraries power a physics simulation that positions nodes representing IP addresses and hosts (like "Pixel-4" and "LIFX") as red circles connected by black lines, with each node labeled by its identifier. The graph organizes around central gateway IP addresses from the CSV data, illustrating the network's structure and device relationships.

Kkeitheade

87% match

Loading thumbnail…

Network Graph

Three square node types—amber sites, red subsystems, and blue network systems—form a force-directed graph. D3’s `forceSimulation` with `forceManyBody` and `forceLink` positions nodes, using custom distance values for main, child, and leaf connections. Each node renders as an SVG `rect` with rounded corners, labeled by text, and supports dragging via `d3.drag`. Links appear as `line` elements with source-based colors.

Mmiloparra

81% match

Loading thumbnail…

Network

A small force-directed network graph renders six labeled nodes connected by six links in an SVG. Circles show people (Alice, Bob, Carol, Dave, Eve, Frank) with a teal fill, while gray lines represent connections. The layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position elements. Users can drag any node, which pins it temporarily via the drag handler that sets fixed coordinates (`d.fx`, `d.fy`). Node and link positions update on each simulation tick, and text labels offset to the right of each circle.

SSahil Thapa

81% match

Loading thumbnail…

Network Practice

This visualization shows a small network of thirteen nodes connected by seventeen links. Node size is constant, while link thickness encodes a numeric value from the data. Node color represents group membership via a categorical color scale, and the network layout is determined by a physics simulation. Using d3.forceSimulation, d3.forceLink, d3.forceManyBody, and d3.forceCenter, the nodes are arranged and their positions updated on each tick, rendering as an SVG with circles and lines.

Kkschick22

80% match

Loading thumbnail…

Network Graph

This example shows a simple network graph with five labeled nodes (A–E) and four links connecting them. D3’s `forceSimulation` with `forceLink` and `forceManyBody` positions the nodes, while the tick event updates line and circle positions. The SVG rendering uses D3 selections with `join` to bind data to `<line>` and `<g>` elements, with node labels placed via appended `<text>`. The simulation runs continuously, repositioning nodes within a 200x200 center area.

KKhanin Sisaengsuwanchai

80% match

Loading thumbnail…

Network Practice

This example visualizes a force-directed network of 11 sites and 37 links, with line thickness indicating link weight. Circles represent nodes at fixed positions, while links connect them according to the data. The visualization uses D3 v5’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to compute layout, and renders nodes and links as SVG circles and lines. A color scale is defined but not applied, as nodes use default fill. Data comes from a local JSON file.

AAbigaily823

79% match

Loading thumbnail…

Network graph

This example demonstrates a simple network graph consisting of three nodes (Alice, Bob, and Carol) connected by two directed links, forming a chain. It uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute node positions, and logs each simulation tick to the console. The visualization renders as an SVG-less HTML page with no explicit drawing code, relying solely on the simulation’s output for node and link coordinates. The data is hardcoded as JavaScript arrays of node objects and link indices.

SSg2041

79% match

Loading thumbnail…

Network

A network diagram renders character relationships from *Les Misérables*, with nodes colored by group type and link thickness encoding connection weight. D3’s force simulation (`d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`) positions nodes and updates SVG circles and lines on each tick. A color legend, built through a custom `colorLegend` module, maps categorical domains to a color scale. Data comes from a local JSON file.

Aala-wahibi

79% match