Skip to main content
SimilarExport ZIP
100%

Fork of Network Graph -1

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

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

Fork of Tree Map

This example shows a hierarchical tree chart of traffic conditions across Bangalore locations, grouped into Heavy, Moderate, and Light Traffic categories. The visualization uses d3.hierarchy and d3.tree to compute node positions, with clickable nodes that collapse or expand their children via animated SVG transitions. The code renders circles and text labels for each location, using `transition().duration(750)` to smoothly animate node movement and link paths as the tree structure changes.

Rreddysushma994@gmail.com
89% match
Loading thumbnail…

Tree graph

A static tree diagram visualizes traffic timings between two Bangalore localities across four dayparts: morning, midday, evening, and midnight. Three levels of nodes represent the root, time periods, and travel routes, with rounded leaf labels indicating individual travel times in minutes. The chart is built with D3.js v7, using `d3.tree` and `d3.hierarchy` to compute the layout and `d3.linkHorizontal` for the curved connecting paths. Nodes are custom-styled `circle` elements with depth-based fills and strokes, while an SVG gradient background and varied link colors distinguish the branches.

Ssatishnarne99@gmail.com
82% 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 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
79% match
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
76% match
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
76% match
Loading thumbnail…

Fork of Tree

This fork of a tree visualization displays weather data in a vertical hierarchical structure, showing cities with their timestamped readings and a final layer for temperature, pressure, wind speed, and humidity values. It fetches CSV data from a GitHub gist, transforms it into a tree using `d3.hierarchy` and `d3.tree`, and renders the result as an SVG. The network of links is drawn with `d3.linkVertical` paths, while nodes and labels are styled via CSS classes for circles, rectangles, polygons, and text.

YYashwanth0311
75% match