Skip to main content
SimilarExport ZIP
100%

Rohith Annadurai ICE-8 Network graph

✓ Published1🌍 Public
Rrohithannadurai@my.unt.edu
Last edited Apr 3, 2024
Created on Apr 3, 2024

This network graph visualizes the hierarchical relationships between US states, regions, and counties using a force-directed layout. The D3.js v7 code builds nodes and links from a nested data structure, employing `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position elements. Nodes are rendered as SVG circles with drag functionality, while links appear as black lines. The visualization distinguishes entity types through CSS classes, with a light yellow background and clear text labels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Rohith Annadurai ICE-8 Network graph

This network graph maps the hierarchical relationship between US states and their counties, visualizing an Eastern and Western regional structure. The visualization uses D3.js force-directed algorithms, specifically `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, to position nodes based on link and charge forces. Each node is rendered as a colored circle (white-filled with dark strokes) and links are black lines, with all elements drawn onto an SVG canvas. The data is hand-coded hierarchical JSON, with callback functions processing parent-child dependencies to generate the network’s node and link arrays.

Rrohithannadurai@my.unt.edu
97% match
Loading thumbnail…

ice 8 Rohith Annadurai NETWORK GRAPH

This network graph visualizes the hierarchical relationships between U.S. states, regions, cities, and counties, with nodes color-coded by geographic type and connected by links. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while SVG circles and lines render the network. The graph dynamically sizes itself to the viewport, and the data is hardcoded in the script, showing the geographic structure from the national level down to individual counties.

Rrohithannadurai@my.unt.edu
94% match
Loading thumbnail…

Rohith Annadurai ICE-8 Tree graph

This interactive tree visualization displays the hierarchical structure of US states and their counties, organized under eastern and western regions. Using D3.js v7 with the `d3.tree` layout, nodes are rendered as circles with colored links distinguishing between regions, states, counties, and cities. The SVG rendering applies distinct stroke colors for each hierarchical level—red for regional links, blue for state links, and green for county links. The static dataset defines six states across two regions, with counties and one city as leaf nodes, presented on a light blue background with labeled node text.

Rrohithannadurai@my.unt.edu
90% match
Loading thumbnail…

ice 8 Rohith Annadurai Tree structure

This example displays a hierarchical tree of US regions and states, with a root "United States" node branching into Eastern and Western regions and their constituent states. The visualization uses D3.js v7's `d3.tree()` layout function with `d3.hierarchy()` to structure the data, and renders the tree as an SVG using `d3.linkHorizontal()` for curved link paths. Node circles and text labels are positioned through the tree layout's coordinate system, while the canvas size adapts to the viewport dimensions.

Rrohithannadurai@my.unt.edu
84% match
Loading thumbnail…

ICE 8 networks

This interactive network visualization shows hierarchical relationships between the world, continents, and countries. Nodes are categorized by shape and color: blue rectangles for World, purple circles for Continents, and green ovals for Countries. Using D3 v7, the example employs `d3.forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while manually appended SVG shapes (rect, circle, ellipse) and text labels render each node. The tick event updates link coordinates and node transforms dynamically, creating a force-directed graph of six nodes and five links from simple, inline data.

Aadithiarikatla@gmail.com
80% match
Loading thumbnail…

IC8 - Bhavya - Social Network Graph

This interactive social network graph visualizes the hierarchical relationships between Indian states and their districts. The visualization uses a force-directed layout with `d3.forceSimulation`, applying `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces to position nodes. States appear as larger steelblue circles with white labels, while districts are smaller lightgreen circles with black text. The graph draws dashed gray reference lines from the center to each district, and data is fetched from a Gist CSV file and parsed using `d3.csvParse`. The layout updates dynamically through the simulation's tick event.

Bbhavyapokuri123@gmail.com
80% match
Loading thumbnail…

ICE8 network graph

This network graph visualizes the relationships between seven named nodes (A through G) grouped into four categories, with links weighted by values like 2 and 3. The graph is rendered as an SVG using D3.js v4, where each node is a draggable orange circle with a text label. The force-directed layout is driven by D3’s `d3.layout.force` API, which applies gravity, charge, and distance parameters to position nodes. Link thickness is derived from the square root of each link’s weight, and the graph data is loaded from a local JSON file.

Ggayathri
79% match
Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This example shows a social network graph of Andhra Pradesh districts, with the state as a central red node and each district as a smaller blue node, connected by gray links. The visualization uses D3.js v7’s `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` to position nodes and links, while `d3.drag` enables interactive dragging. Data is fetched from a remote CSV and parsed with `d3.csvParse`. Node labels and hover tooltips are rendered in SVG, with the entire graph replacing the initial SVG element.

Ppmbhupathibalu@gmail.com
79% match