Rohith Annadurai ICE-8 Network graph

Last edited Apr 3, 2024

Created on Apr 3, 2024

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Rohith Annadurai ICE-8 Network graph

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.

97% match

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.

93% match

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.

90% match

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.

83% match

Bbhavyapokuri123@gmail.com

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.

Ppmbhupathibalu@gmail.com

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.

Aadithiarikatla@gmail.com

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.

Network

This network visualization displays the adjacency relationships among contiguous US states, with each state represented as a colored node and borders as links. The layout is computed using d3.forceSimulation with forceLink and forceManyBody, while state geometries come from TopoJSON data loaded via d3.json. Node colors are assigned by approximate longitude-based regions, and state names are drawn as SVG text labels. The code uses d3.geoPath to calculate centroids for region classification, and the final SVG rendering updates positions on each simulation tick.

Sson.sultan@yahoo.com