Skip to main content
SimilarExport ZIP
100%

Fork of Network graph

✓ Published6🌍 Public
Rreddysushma994@gmail.com
Last edited Apr 3, 2024
Created on Apr 3, 2024
Forked from Hello HTML

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Network graph

This network graph visualizes connections between ten locations in Bangalore, India. Nodes are rendered as tomato-colored hexagons with black text labels, while edges appear as dashed black lines. The HTML5 Canvas API handles all drawing, using standard JavaScript methods like `beginPath`, `moveTo`, and `stroke`. Node positions are hardcoded in the script rather than computed through a force-directed layout, with a manual `adjustCanvasSize` function determining the canvas dimensions from the maximum node coordinates.

Rreddysushma994@gmail.com
90% 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
80% match
Loading thumbnail…

Fork of ICE-8 Network graph

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.

KKusumaKumariDama@my.unt.edu
76% match
Loading thumbnail…

Fork of Network Graph -1

This visualization shows a hierarchical tree graph of traffic congestion levels in Bangalore, with root, intermediate, and leaf nodes representing heavy, moderate, and light traffic locations. It uses D3.js v7 with the `d3.tree()` layout and `d3.hierarchy()` to structure the data, rendering nodes as circled text labels and connecting them with horizontal curved links via `d3.linkHorizontal()`. The SVG canvas includes zooming functionality through `d3.zoom()`. The chart encodes traffic categories with a light blue node style and gray links on a light gray background.

Rreddysushma994@gmail.com
74% match
Loading thumbnail…

Fork of Network Graph

This example shows a small network of six named nodes connected by weighted links, displayed as an SVG force-directed graph. The visualization uses D3 v4 with the legacy `d3.layout.force` API to simulate physical forces that position nodes and draw straight lines between them. Node labels and circles are rendered via SVG groups, with link stroke widths scaled by the square root of the link weight, and the data is loaded from a local `data.json` file.

Bbhargavarathod
72% match
Loading thumbnail…

Fork of Network graph

This example shows a small network graph of eight friends, with nodes labeled by name and grouped by color, connected by ten weighted links. The graph is laid out using `d3.layout.force`, with link thickness proportional to the data’s `weight` attribute. Nodes are rendered as brown circles and red text, and the simulation updates positions on each tick. Data is loaded from a local `data.json` file, and the visualization is drawn to an SVG canvas using D3 v4 and v2 libraries.

Bbhanuteja1807@gmail.com
71% match
Loading thumbnail…

Network Layer

This example shows a simple network of nodes and edges drawn on an HTML5 Canvas element. The visualization initially places nodes at random coordinates and renders them as circles, while the code defines edges between named nodes. It uses D3.js to select the canvas element and its 2D context for drawing, with manual JavaScript handling the node and edge drawing routines. The project includes a JSON data structure with system vertices and connections, which appears intended for a force-directed layout.

Hhhhheeee
71% match
Loading thumbnail…

Fork of Tree Map

This example presents a fork of a D3 tree map visualizing Bangalore traffic congestion levels across city locations. The visualization shows a hierarchical structure with parent nodes for traffic intensity (heavy, moderate, light) and child nodes for specific junctions, using different shapes and colors to distinguish node types. Built with D3 v7 and rendered as SVG, the code employs `d3.tree()` and `d3.hierarchy()` to compute the layout, while custom styling applies olive-green dashed links and color-coded nodes based on the traffic data. Additionally, supplementary paths connect select leaf nodes, representing cross-junction relationships within the traffic network.

Rreddysushma994@gmail.com
70% match