Skip to main content
SimilarExport ZIP
100%

ICE-8:Network graph

✓ Published0🌍 Public
Yyvarshachowdary@gmail.com
Last edited Apr 2, 2024
Created on Apr 2, 2024

This network graph visualizes the relationships between Amazon Prime titles and their primary genres. Red genre nodes connect to blue title nodes through a force-directed layout, with node positions determined by a physics simulation. The visualization uses D3 v5 with the `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` APIs to manage attraction and repulsion forces. Data is loaded via `d3.csv` from a GitHub gist, and nodes are rendered as SVG circles with text labels, supporting interactive dragging through D3's drag handlers.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 Network Graph

This visualization displays a network graph of Amazon Prime movies, organized into three genres—Comedy, Documentary, and Drama—with each genre connected to up to three movie titles. A central "Movies" node links to the genre nodes, and all connections are rendered as directed links with arrow markers. The graph uses d3.forceSimulation with forceLink and forceManyBody to position nodes, styled via SVG circles and text labels colored by node type. Data is loaded from a CSV file, filtered to movies, and grouped by genre.

Mmanthenasirisha06@gmail.com
89% match
Loading thumbnail…

ICE8-Tree graph

This visualization displays Amazon Prime titles organized hierarchically by type and primary genre, with individual titles appearing as leaf nodes. The tree layout uses rectangular nodes for internal categories and circles for leaf titles, with colors indicating depth. Built with D3.js v5, the code loads CSV data from a GitHub gist and applies `d3.tree()`, `d3.hierarchy()`, and `d3.linkHorizontal()` to position nodes and render SVG paths. Text labels are positioned differently for internal versus leaf nodes to improve readability.

Yyvarshachowdary@gmail.com
86% match
Loading thumbnail…

ICE-8 TREE GRAPH

This D3.js v7 visualization displays a hierarchical tree graph of Amazon Prime titles, categorizing movies and TV shows into genres like Comedy, Documentary, Drama, Kids, and Anime. The tree layout uses `d3.tree()` with `d3.hierarchy()` to structure the data, while `d3.linkHorizontal()` draws the connecting links between nodes. Each node renders as circles for categories and rectangles for titles, with text labels, all within an SVG canvas. The dataset comes from a CSV file containing Amazon Prime titles, loaded via `d3.csv()`.

Mmanthenasirisha06@gmail.com
83% match
Loading thumbnail…

Fork of Network Graph ICE-8

This network graph visualizes relationships between e-commerce categories and sub-categories, such as "Amazon" linking to "Electronics," using nodes and directed edges. Built with D3 v6, it employs `d3.forceSimulation` with link, charge, collision, and center forces to arrange nodes dynamically. The SVG rendering uses `d3.json` to load the data, and interactive dragging is enabled via a custom drag handler. Nodes are styled as yellow circles with labels, and edges are drawn as lines with arrow markers, all within a fixed 1100x370 viewport.

Mmukundakrishna.r@gmail.com
78% match
Loading thumbnail…

ICE-8_Network_Chart

This network chart visualizes relationships among seven characters, with weighted links drawn as purple lines of varying thickness. Nodes are rendered as green circles with black labels, and users can drag them to rearrange the layout. The visualization uses d3.layout.force to simulate physical forces like gravity, distance, and charge, positioning the nodes dynamically. Data comes from graphFile.json, which defines nodes and links with optional weight values. The SVG rendering is handled through D3 v4, with styles defined in CSS for the links, node circles, and text.

MMeghanaArepalli
78% 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
77% match
Loading thumbnail…

ICE8 - Network Graph

This network graph visualizes relationships between eight people, with nodes representing individuals and links showing connections between them. The graph uses physics-based force-directed layout through `d3.forceSimulation`, combining forces from `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Interactive dragging is enabled via `d3.drag`, allowing users to manually reposition nodes. The SVG rendering includes arrow markers on links via the `defs` element, and node hover effects are implemented with CSS classes. Data comes from a JSON file containing node names and link relationships.

AAnanyaSamala
77% match
Loading thumbnail…

ICE8 - Network Graph

A network graph visualizes the relationships between eight individuals, with nodes labeled by name and connected by directed, arrowed links. The layout is determined by a force-directed simulation, using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide`, with nodes rendered as pink circles and blue links. Data comes from a local `networkData.json` file, and the visualization includes interactive dragging via D3's `drag` handler, with hover effects that change the node stroke to green.

Sshiiva-surya
77% match