Fork of ICE-8 Network graph

100%

Fork of ICE-8 Network graph

✓ Published0🌍 Public

KKusumaKumariDama@my.unt.edu

Last edited Apr 3, 2024

Created on Apr 3, 2024

A static network graph shows ten U.S. city nodes as solid tomato-colored hexagons interconnected by olive-drab straight links. The Canvas 2D API draws each node as a six-sided polygon and labels it with the city name, while the links connect predefined source-target pairs. The canvas size adjusts dynamically to fit all node positions, and the graph is rendered once on load without any interaction or animation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE8 network graph

This example shows a force-directed network graph of seven named U.S. cities, with links of varying thickness representing weighted connections. The visualization uses d3.layout.force to simulate node positions, with nodes rendered as SVG circles and text labels. Links are drawn as lines with stroke widths scaled by the square root of each link’s weight attribute. The code loads graph data from a local JSON file and enables dragging of nodes to explore the network structure.

Nnikhitha693

80% match

Loading thumbnail…

Fork of ICE8 network graph

This fork of the ICE8 network graph visualizes a social network of 16 individuals, showing connections between them as a force-directed layout. Nodes are drawn as orange circles with black borders, labeled with names, and links are rendered as black lines whose thickness reflects the connection weight. The graph uses D3 v4’s force layout API (via `d3.layout.force`) to position nodes, with interactive dragging enabled through the `force.drag` method. Data comes from a local JSON file (`graphFile.json`), and the entire visualization is rendered as SVG within a 1000×500 canvas, with node and link styles defined in embedded CSS.

KKusumaKumariDama@my.unt.edu

78% match

Loading thumbnail…

Fork of ICE8 network graph

This network graph visualizes connections between US cities, with nodes representing locations like Philadelphia, Dallas, Austin, and Newark, and orange links showing relationships between them. The graph uses a force-directed layout powered by the older `d3.layout.force` API, which simulates physical forces to position nodes, with node charge and gravity parameters affecting the spatial arrangement. Nodes appear as pink circles with yellow borders and black labels, rendered as SVG elements, and users can interactively drag nodes around the canvas. The data comes from a linked `graphFile.json` file, and the implementation leverages the D3.js v4 library alongside an older v2 script for the force simulation.

RRamyapriyaPutta

78% match

Loading thumbnail…

Fork of Fork of Network graph

A network graph displays a hierarchy of U.S. places as a tree, with orange circular nodes labeled by name and connected by royal blue curved links. The example uses a bare HTML5 Canvas API, drawing nodes with `ctx.arc` and links with `ctx.moveTo`/`ctx.lineTo` in a custom script. Fixed coordinates in the data define the layout, and the canvas resizes to fit all nodes, rendering links before nodes for clarity.

KKusumaKumariDama@my.unt.edu

78% match

Loading thumbnail…

Fork of Fork of ICE8 network graph

This network graph visualizes relationships between countries, with nodes representing nations and links showing connections. The node positions are determined by a force-directed layout, and users can click and drag nodes to rearrange them. The graph uses D3 v4’s force simulation API, along with SVG rendering, to display circles for nodes and lines for links, with link thickness reflecting the weight data from the JSON file.

Yyoav95

77% match

Loading thumbnail…

ICE 8

This interactive network visualization displays six nodes (jack, yoru, mari, jon, sam, edam) connected by weighted links, rendered as an SVG force-directed graph. Drawn with circles, green links, and black text labels, the graph uses d3.layout.force with gravity, distance, and charge parameters to position nodes dynamically on a 750×740 canvas. Users can click and drag any node to reposition it, with link thickness reflecting edge weight. Data loads from a local graphFile.json containing node groups and link weights.

Ppreethamkesa

76% match

Loading thumbnail…

Fork of Network graph

This example shows a fixed-layout network graph of Bangalore neighborhoods, with tomato-colored hexagonal nodes and olive-drab connecting edges on a Canvas. It uses the HTML5 Canvas API directly, with `getContext('2d')`, manual shape drawing via `beginPath()`, `moveTo()`, and `lineTo()`, and hardcoded node coordinates and link data in JavaScript arrays. The graph’s title and structure are defined in the `index.html` page, and the `adjustCanvasSize()` function dynamically resizes the canvas based on the maximum node positions.

Rreddysushma994@gmail.com

76% match

Loading thumbnail…

Fork of ICE8 network graph

This example visualizes a small directed network graph with seven nodes and six weighted links, using labeled circles to represent entities and lines to show connections. The graph is rendered as SVG and positioned through a force-directed layout, with link stroke widths reflecting each connection’s weight. It relies on the older `d3.layout.force` API from d3.v2 (loaded alongside d3.v4) to simulate physics, while node dragging is enabled via `force.drag`. The data comes from an embedded `graphFile.json` file, and styling uses CSS.

Ssaijahnaviappineni

76% match