Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
HHeide
Last edited Dec 3, 2021
Created on Dec 3, 2021
Forked from aufgabe c

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Untitled

This interactive network visualization displays six people connected by weighted links, with node color representing gender and node labels showing names. The graph uses a force-directed layout driven by `d3.forceSimulation`, which combines a link force, a charge force for repulsion, and a centering force. Node size increases on mouseover and dragging is supported via `d3.drag`. The data comes from the JSON file "helpme.json", and the SVG is rendered with animated updates on each simulation tick.

HHeide
90% 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
89% match
Loading thumbnail…

Untitled

This example shows a force-directed network graph of six nodes (A-F), each colored by gender and labeled with an ID, with link thickness representing connection strength. The nodes are draggable and expand on hover, revealing tooltips with each person’s profession. The visualization uses D3 v7’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position elements, with `d3.drag` for interaction and `d3.scaleOrdinal` for categorical colors. Data is loaded from a local JSON file via `d3.json`. A static 6×6 adjacency matrix above the SVG complements the dynamic graph.

Sshatomouimena
88% match
Loading thumbnail…

Untitled

This interactive network diagram uses a force-directed layout to show relationships between six nodes, with link thickness encoding connection strength. The visualization reads data from a JSON file containing nodes and links, then renders circles and lines as SVG elements. Built with React and D3 v4, it uses `d3.forceSimulation` for physics-based layout, `d3.forceLink` for link constraints, `d3.forceManyBody` for node repulsion, and `d3.forceCenter` for centering. Nodes are draggable via `d3.drag`, allowing users to manually reposition elements while the simulation continues.

HHeide
88% match
Loading thumbnail…

Untitled

This example shows a small interactive force-directed network of six nodes labeled A through F, connected by six weighted links. The data from a JSON file includes attributes such as gender and profession, though the visualization primarily focuses on node connections and link thickness proportional to edge value. Users can drag nodes to reposition the network. The code uses d3.forceSimulation with centering, charge, and link forces, rendering nodes as SVG circles with text labels and titles via d3.

Sshatomouimena
86% match
Loading thumbnail…

Untitled

This interactive network graph visualizes the connections between nodes, using a force-directed layout to arrange them spatially. Built with React and rendered as SVG, the visualization employs `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute node positions and link distances. The graph supports dynamic updates, allowing nodes and links to be added or removed while the simulation restarts to re-stabilize. Colors are assigned from predefined palettes, with node sizes indicating hierarchy. Data loading from a CSV file is prepared but commented out, currently showing three main nodes without links.

JJediquu
86% match
Loading thumbnail…

Untitled

This example shows a small network of six nodes connected by six links, revealing an undirected graph structure. The nodes represent individuals with attributes like gender and profession, while links carry a numeric distance value. A D3 force-directed layout positions the nodes using `d3.forceSimulation` with link, charge, and center forces. The code loads data from a local `data.json` file and renders the result as an SVG with circles for nodes and lines for edges. The simulation updates positions on each tick, though link distances are not explicitly used to set edge lengths.

Sshatomouimena
85% match