Network Map #3

100%

Network Map #3

✓ Published1🌍 Public

Last edited Nov 6, 2021

Created on Nov 3, 2021

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Network Map #2

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.

Kkeitheade

87% match

Loading thumbnail…

Network Graph

This network graph visualizes relationships among individuals and locations, with nodes labeled by names like "UNT" and connections indicating links between them. The interactive force-directed layout, built with d3.forceSimulation, incorporates link, many-body, collision, and center forces to position the nodes. The SVG renderingshowcases teal circles with direction arrows, while mouseover highlights a node using a CSS class. Data is loaded from a JSON file defining nodes and links, with colors assigned via a simple color scale.

SSravani93-creater

78% 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

77% match

Loading thumbnail…

Network Layer

This visualization demonstrates a force-directed network simulation rendered on an HTML canvas. A set of nodes, initially assigned random positions, is drawn as red circles using the Canvas 2D API. The example uses D3 v5’s force simulation capabilities, though the visible code primarily focuses on the update loop that clears the canvas, iterates through the node array, and redraws each node with an arc path.

Hhhhheeee

77% match

Loading thumbnail…

Network

A force-directed network graph displays nodes and directed links, colored by categorical group and relationship type. Redundant labels and relationships are deduplicated from the input. Users can click a node to view its ID or double-click to filter the graph to that node's subgraph. The visualization uses d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCenter, and d3.drag, rendering data from data.json with SVG.

Aala-wahibi

77% match

Loading thumbnail…

Network map

This network map visualizes a small LinkedIn-style social graph, showing eight people as labeled circles and their connections as orange weighted lines. The graph uses a force-directed layout with D3’s `d3.layout.force()` to position nodes, with gravity, charge, and distance parameters controlling the spacing. The HTML/SVG canvas is built with `d3.select`, and node positions are updated on each tick via the force layout’s `on("tick")` event, while link thickness reflects the `weight` field from the JSON data.

SSaikiran2029

77% match

Loading thumbnail…

Network Graph

A network graph displays seven named nodes connected by weighted links, with node sizes and link thickness reflecting connection strength. The data, loaded from a JSON file, is rendered as an SVG using D3.js v4's force layout, which applies gravity, charge, and distance parameters to position nodes dynamically. Users can click and drag nodes to rearrange the network, while node labels and red-bordered yellow circles remain visible. The visualization uses `d3.layout.force` for simulation and `force.drag` for interactivity, with tick events updating link coordinates and node transforms.

JJerlineJJ

77% match

Loading thumbnail…

Network Chart

This network chart visualizes connections between named individuals using a force-directed layout. Nodes are rendered as pink circles with violet text labels, while orange links between them have stroke widths proportional to the link weight data from the local `graphFile.json`. The visualization uses the older `d3.layout.force` API (from d3 v4) with gravity, charge, and distance parameters to position the graph, and supports interactive dragging of nodes. The SVG is drawn dynamically, with each node’s position updated on every tick event.

PPavaniMangugari

77% match