Untitled

100%

✓ Published0🌍 Public

Last edited Jul 17, 2023

Created on Jul 17, 2023

This example visualizes a small social network of five people, showing how individuals like Alice and Charlie connect through direct relationships. The rendering uses NetworkX and Matplotlib to create the graph, with nodes drawn as light blue circles and labels displayed inside them. The `nx.Graph` object stores the nodes and edges, while `nx.draw` handles positioning and visual output, resulting in a static diagram of connected names. The data consists of hardcoded person names and their pairwise relationships.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Simple Social Network Graph

This example shows a small social network with five people (Alice, Bob, Charlie, David, and Emily) connected by four relationships. The force-directed layout uses `d3.forceSimulation` with `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to keep nodes centered. Users can drag nodes via `d3.drag()`, which temporarily raises alpha for interactive repositioning. The SVG rendering styles links as gray lines and nodes as orange circles with labels.

NNukaShravanKumar

79% match

Loading thumbnail…

Untitled

This example visualizes a small social network of six people, each labeled with an ID and connected by weighted links. Node color encodes gender, and hovering over a circle enlarges it to reveal a tooltip with name and job. The graph is rendered as animated SVG using D3.js v4, with `d3.forceSimulation` handling layout through link, charge, and center forces. Users can drag nodes via `d3.drag`, which pins them temporarily during interaction. Data is loaded from a local JSON file, and link thickness is proportional to each connection’s value.

HHeide

78% match

Loading thumbnail…

Untitled

This example visualizes a small social network of six people labeled A through F, using a force-directed graph with nodes colored by gender and labeled with IDs. The network depicts relationships between individuals with varying link weights, such as the strong connection between F and B. A static adjacency matrix at the top complements the interactive graph, showing the same connections in tabular form. The visualization uses d3.forceSimulation with link, charge, and center forces, alongside d3.drag for interactive node movement and hover effects that enlarge nodes. Data is loaded remotely as JSON via d3.json.

HHeide

78% match

Loading thumbnail…

Social Network Graph

This visualization shows a small social network with five nodes (Alice, Bob, Charlie, Eve, and David) connected by friendship links. The graph is rendered as SVG elements styled with CSS, using D3.js v6’s `d3.forceSimulation` with link, charge, and center forces to position nodes dynamically. Each node displays a blue circle and a text label, while links appear as gray lines that update positions on every tick via the simulation’s tick event.

BBhavanaGIrni

77% match

Loading thumbnail…

network

This network visualization shows a small social graph of seven named individuals with weighted connections between them, rendered as green nodes with yellow labels on a black background. The force-directed layout, built with d3.layout.force from d3.v4, positions nodes and links while supporting drag interaction. The code loads data from data.json via d3.json, then uses SVG line elements for links with stroke-width determined by the square root of each link's weight, and groups for nodes with attached circles and text labels.

Ddivyagunuguntla

77% match

Loading thumbnail…

Untitled

This interactive network graph visualizes a small social network of six people, with nodes shaped according to job (circles for “Informatiker,” triangles for “Student,” rectangles for “Author”) and colored by gender. The node-link diagram is laid out using the force-directed physics of `d3.forceSimulation`, with link thickness proportional to the connection value. The visualization is built in React, uses SVG for rendering, and loads its JSON data via `d3.json`. Users can drag nodes to rearrange the layout, which the force simulation then re-optimizes in real time.

HHeide

76% match

Loading thumbnail…

Network chart of five people

This example shows a network graph of seven people divided into four groups, with nodes positioned by a force-directed layout and connected by green links whose thickness reflects link weight. The code uses the older `d3.layout.force` API to simulate physics and drag interaction, rendering circles and labels as SVG elements styled with brown strokes and large text. Data comes from a local `data.json` file, and the visualization runs within a minimal React setup, as referenced by the accompanying README link.

SSheshidharreddy

76% match

Loading thumbnail…

Social Network Graph

A social network graph displays five people as circular nodes connected by five undirected edges, with labels identifying each person. The visualization uses D3 v5’s `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` to position nodes and links dynamically. Hardcoded data defines the nodes and links, and the SVG container updates on each simulation tick to draw lines, circles, and text labels.

UUVarshaReddy

76% match