Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Network graph

✓ Published0🌍 Public
Rreddysushma994@gmail.com
Last edited Apr 3, 2024
Created on Apr 3, 2024

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.

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
100% 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
90% match
Loading thumbnail…

Fork of Social Network graph

This example presents a social network graph of Bengaluru locations, where colored nodes represent places like Silk Board Junction and Majestic, and blue links show connections between them with stroke width proportional to link weight. It uses the D3.js v2 force layout (`d3.layout.force`) to simulate node positioning, with drag interaction enabled via `force.drag`. The SVG rendering reads node and link data from an external `data.json` file, displaying each location’s name as text alongside a circular marker. The visualization updates positions on each tick of the force simulation.

Rreddysushma994@gmail.com
79% match
Loading thumbnail…

Fork of Graph

This example shows a hand-coded social network graph with ten named nodes and sixteen links, rendered directly to an HTML canvas element. The visualization displays relationships between people like Alice, Bob, and Charlie, using fixed node coordinates and static connections defined in JavaScript arrays. The code uses the native Canvas 2D API, specifically calling `ctx.arc()` for nodes, `ctx.lineTo()` for links, and `ctx.fillText()` for labels, with a light blue background and gray edges. Node positions are hardcoded rather than computed by a layout algorithm, and the canvas dimensions are adjusted dynamically based on the maximum node coordinates before drawing.

Rreddysushma994@gmail.com
79% match
Loading thumbnail…

Fork of Network Graph -1

This visualization shows a static tree graph of traffic conditions at major Bangalore locations, branching from a central root into heavy, moderate, and light traffic categories, each with two specific junction or area children. Rendered as SVG using D3 v7, it employs the `d3.tree` layout algorithm and `d3.hierarchy` to structure the hierarchical data. Nodes appear as light blue circles with labels, connected by gray horizontal links drawn using the `d3.linkHorizontal` path generator. The graph also includes a `d3.zoom` interaction that allows panning and scaling of the entire SVG view.

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

Fork of Circles with D3

A D3.js force-directed network graph visualizes connections between named locations in Bangalore, with each node representing a place and each link labeled by travel time. The graph uses `d3.forceSimulation()` with `d3.forceLink()` and `d3.forceManyBody()` to calculate node positions, while the `d3.v7` library renders the interactive layout. Node and link CSS styling distinguishes elements, and the data is hardcoded in the script, showing a static snapshot of a transportation or routing network.

Ssatishnarne99@gmail.com
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
76% match