Skip to main content
SimilarExport ZIP
100%

activity 8- network

✓ Published0🌍 Public
Mmandadi1999
Last edited Jul 19, 2023
Created on Jul 19, 2023
Forked from Network Graph

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.

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…

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

Activity 7

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.

Ssaikrishnabussa
90% match
Loading thumbnail…

network

This example visualizes a social network as a force-directed graph, showing eight people and their friend relationships with links labeled by relationship type. Nodes are rendered as grey circles with names, and lines with arrowheads indicate directed connections based on a JSON data file. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while drag interactions let viewers move nodes. Hovering highlights nodes with a green stroke via CSS class toggling.

BBala Sai Krishna
89% match
Loading thumbnail…

Activity-2.7.2

This example displays a social network graph with nine nodes and eight links, representing people and their connections. Nodes are rendered as blue-outlined pink stars rather than circles, with labels showing each person's name. The graph uses d3.forceSimulation with link, charge, collision, and center forces to position the elements inside an SVG. Node dragging is handled through d3.drag, and arrowheads are defined using SVG markers. Data comes from a local graph.json file, with the visualization employing a categorical color scale from d3.

Ppjdhungana@gmail.com
89% 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
89% match
Loading thumbnail…

Network Graph

This example shows a social network graph of ten people connected by friendship links, with nodes labeled by name and sized uniformly. It uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position the nodes, while SVG circles and text render each person. Links are drawn as blue lines with arrow markers, and the graph is fully interactive—nodes can be dragged via d3.drag, and hovering highlights them with a black border. The data comes from a JSON file specifying relationships and node groups.

Vvineelaramulapalli32
89% match
Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten friends named in a JSON data file, with links representing friendships weighted by a value. The visualization uses D3.js v6, with a force-directed simulation (`d3.forceSimulation`) combining link, many-body, collision, and center forces to position nodes, rendered as SVG circles with text labels. Interactions include node dragging and hover highlighting, with edges drawn as blue lines with arrow markers.

Vvineelaramulapalli32
88% match