Untitled

100%

✓ Published0🌍 Public

Last edited Dec 3, 2021

Created on Dec 3, 2021

Forked from 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.

AI-generated description

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

Similar vizzes

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

93% 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

92% 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

92% 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

91% match

Loading thumbnail…

Untitled

This example presents a small force-directed network graph with six nodes labeled A through F and six weighted links. Node color is a uniform olive, while link thickness reflects the numeric “value” assigned to each connection. The underlying data, loaded from a JSON file, includes additional attributes like gender and occupation for each node, though these are not visually encoded. The visualization uses d3.forceSimulation with link, charge, and center forces, and supports interactive dragging. Node positions are updated on each tick, with SVG circles and text labels rendered through D3’s data join.

HHeide

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

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

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

87% match