Activity-2.7.2

100%

Activity-2.7.2

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 19, 2023

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity-8.6.2

This example shows a social network graph of nine named individuals connected by weighted links. The node-link diagram uses D3's `forceSimulation` engine, combining `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to compute the layout. Each node is a light-green circle rendered with SVG, and links are blue lines with arrow markers. Data sets come from `graph.json`, loaded via `fetch`, and the code uses `scaleOrdinal` for coloring, though not visible in this output.

Ppjdhungana@gmail.com

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

89% match

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

89% 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…

Social Network graph

This example shows a social network graph of nine people, with blue, purple-outlined circles representing individuals and labeled with their names. The visualization uses a force-directed layout to position the nodes and displays the relationships between them as blue lines, where the line thickness corresponds to the connection weight. Built with D3.js v4, the code loads the network structure from a JSON file and leverages the `d3.forceSimulation` API for the layout physics, along with custom SVG styling for node and link appearance. The implementation creates the graph as an SVG element and supports dragging nodes with the mouse.

GGARIDIDEEKSHITHREDDY

88% match

Loading thumbnail…

Social network Task2

This example shows a small social network of nine people connected by weighted links, with node labels displayed beside each circle. The graph uses a force-directed layout via `d3.layout.force` to position nodes, and link thickness is scaled by the square root of the weight value from the JSON data. Nodes are rendered as SVG circles and text, with drag interaction enabled through `force.drag`. The visualization reads its graph structure from `graph.json` and applies simple styling for green circles and blue labels.

Ddineshtadepalli12

88% match

Loading thumbnail…

Social Network Graph

This example visualizes a small social network as a node-link diagram. The network graph shows eight people (nodes) and their “Friend with” relationships (links), with the link thickness between "july" and "tanu" indicating a higher connection value. The layout is generated by a force simulation, using `d3.forceSimulation` with link, charge, collision, and center forces to position nodes. The graph is rendered as SVG, with nodes as circles and links as lines with arrow markers, and users can drag nodes to explore the network.

AArun Pratap

87% match

Loading thumbnail…

Network Graph

This example demonstrates a social network graph of nine individuals connected by various relationships such as friendship, siblings, and colleagues. Nodes are represented as large green circles with red labels, and links are drawn as blue arrows with arrowhead markers. The visualization uses d3.forceSimulation to compute the layout, with forces for link distance, charge repulsion, collision, and centering. Users can drag nodes to reposition them, and hovering highlights a node with a red stroke. Data is loaded from a local graph.json file, and the code imports select and scaleOrdinal from d3.

Bbogasamudramvamsikrishnareddy

87% match