Activity 7

100%

✓ Published0🌍 Public

Last edited Jul 20, 2023

Created on Jul 20, 2023

This interactive network graph visualizes a small social network of ten people and their friendship connections. Built with D3.js v6 and rendered as SVG, it uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes. Circles represent people, with arrows between them indicating directed relationships, and the link thickness reflects the friendship value stored in the graph.json data. Users can drag nodes to rearrange the layout, and hovering highlights individual circles via CSS class changes.

AI-generated description

Network graph

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity_8-Graph

This social network graph visualizes friendship connections among ten people, with green circular nodes and blue directed edges carrying arrow markers. The visualization uses D3.js v6 with a force-directed simulation (`d3.forceSimulation`) that applies link, charge, collision, and centering forces to position nodes. Nodes are draggable and highlight on hover, while the data comes from a local JSON file containing node and link objects. The SVG rendering includes custom markers defined in the `defs` section, with text labels displayed inside each node.

Ssaipaidipalli

91% match

Loading thumbnail…

activity 8- network

This interactive network graph visualizes a social network of ten people, with circular nodes representing individuals and directed blue lines with markers indicating friendships. The visualization uses D3.js v6 with its force-directed simulation API (`d3.forceSimulation`) to position nodes, applying link, many-body, collision, and centering forces. Data is loaded from a local JSON file, rendered as an SVG, and styled with CSS. Nodes are draggable, and hovering highlights connections through a focus class.

Mmandadi1999

90% match

Loading thumbnail…

Network Graph-Activity8_task6.2

This interactive network graph visualizes a social network of ten people and their friendship connections, with nodes sized by friend count and directed edges showing relationships. The visualization uses D3.js v6 with a force-directed layout powered by `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes. Users can drag nodes via `d3.drag`, and hovering highlights nodes through CSS classes. The SVG rendering loads data from a local `graph.json` file, with nodes labeled and edges drawn as blue lines with arrow markers.

Ssreekarthanda@gmail.com

90% match

Loading thumbnail…

Activity8_Task6_NetworkGraph

A social network graph displays ten people connected by “Friend with” relationships, with node size and link thickness varying by connection value. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while drag interaction lets viewers rearrange the layout. Nodes render as SVG circles with labels, and links are drawn as lines with arrow markers, all colored by a simple green palette. Data loads from a local graph.json file containing the node and edge definitions.

HHarshithaAmbilpur

88% match

Loading thumbnail…

Activity 8 Q6B

This example shows a social network graph of people connected by friendship links, with each node labeled by name and laid out in a force-directed arrangement. The graph is rendered as an SVG using D3 v6, with green circles representing individuals and blue directed edges with arrow markers indicating relationships. The layout is computed with `d3.forceSimulation`, using link, charge, collision, and center forces to position nodes, while drag interaction is enabled via `d3.drag`. Node colors are assigned with a simple color scale, and data is loaded from a local `graph.json` file.

Ppasyasahas

88% match

Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten people, using color-coded nodes and red links to show friendships. Built with D3 v6 and rendered as an SVG, the graph employs `d3.forceSimulation` with link, charge, and collision forces to position nodes. Links are drawn as lines with arrow markers, and data originates from a local `graph.json` file. Users can drag nodes, and hovering highlights them with a black stroke.

MmNamratha25

87% match

Loading thumbnail…

Social Network

This social network graph visualizes the friendships between ten people using a force-directed layout. Nodes represent individuals and links show their connections, with all nodes colored orange and link thickness indicating relationship strength. Built with D3 v6, the visualization uses `d3.forceSimulation` with link, many-body, collision, and center forces to position nodes. Users can drag nodes to rearrange the network. Data comes from the embedded `data.json` file, with nodes labeled directly and rendered as SVG circles and lines.

AAshrith Kudidhi

87% match

Loading thumbnail…

Network Graph

This network graph visualizes a small social network of ten people and their friend relationships, with each node labeled by name and connected by directed links. The graph uses a force-directed layout via `d3.forceSimulation` with link, charge, collision, and centering forces, rendering nodes as green circles and links as blue lines with arrow markers. Node colors are assigned using `scaleOrdinal`, and nodes are draggable through `d3.drag`, with hover highlighting. Data comes from a local `graph.json` file, and the visualization is built with D3 v6 and SVG.

Ssrikkanth05

87% match