Skip to main content
SimilarExport ZIP
100%

Force-Directed Graph (modificación de datos, español)

✓ Published0🌍 Public
PPacsangon
Last edited Jul 25, 2016
Created on Jul 23, 2016

A force-directed graph maps Facebook profile attributes—such as hometown, political views, and employer—as linked nodes, with edge thickness indicating relationship strength. The D3 v4 code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while `d3.drag` enables interactive movement. Data comes from Stanford's SNAP Facebook ego-network dataset, adapted into Spanish with custom node labels and grouping colors via `d3.scaleOrdinal`.

AI-generated description

Este es mismo ejemplo de force-directed graph realizado por Mike Bostock. Lo único que se le cambio son los datos y las sentencias necesarias para contar con un ejemplo modificado y comentado en español.

The source of this information is SNAP. Just take information about a node of Facebook.

La fuente de esta informacion es SNAP. Solo tome la información sobre un node de Facebook.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force Directed Graph

An interactive force-directed graph visualizes the relationships between Facebook, Inc. and Volkswagen Group and their subsidiaries, with nodes connected by curved, orange paths. The graph uses `d3.forceSimulation` with link, charge, and centering forces to position the nodes, and node size and fill color reflect the number of connections per node. Dashed, thicker gray-orange links indicate a zero-value relationship, and the nodes support drag interactions via `d3.drag`. The visualization is rendered as an SVG, with labels displayed beside each node.

Ppierre-reibel
77% match
Loading thumbnail…

Force

This visualization shows a force-directed network graph of social connections from the Caltech36 Facebook dataset, rendered as SVG circles and lines. The simulation uses `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceCenter`, and `d3.forceLink` to position nodes colored with a rainbow sequential scale. The code loads node and link data from a local JSON file, then applies ticked updates to redraw node positions and link endpoints as the layout stabilizes.

Vvivianaaai@qq.com
76% match
Loading thumbnail…

Facebook Data Viz Network

This example visualizes a Facebook friendship network as a force-directed graph, showing clusters of connected users through nodes and links rendered on a Canvas. The code loads edge data from `facebook_data.csv`, builds nodes from unique source and target IDs, and uses `d3.forceSimulation` with `forceX`, `forceY`, `forceCollide`, `forceManyBody`, and `forceLink` to position the network. Each tick updates the canvas by clearing it and redrawing links as lines and nodes as circles, with node names mapped via the `d.id` accessor.

EELBOUNIAmine
75% match
Loading thumbnail…

Force-Graph

A force-directed graph visualizes relationships among four nodes labeled A through D, with curved arrows representing directed links whose thickness corresponds to a numeric value. The D3 v4 force layout, specifically `d3.layout.force`, positions nodes via simulated physics—charge repulsion and link distance—while SVG paths draw the arcs. Node labels and circles are rendered in SVG, and the graph loads JSON data from a static file. The code also enables dragging nodes and updates positions on each tick event.

RRafael Campos
74% match
Loading thumbnail…

Force Directed Graph

A force-directed graph maps parent companies to their subsidiary brands, using curved links and labeled circular nodes. The visualization shows relationships like Facebook, Inc. connecting to Instagram and WhatsApp, with dashed coral lines distinguishing weaker connections. Built with d3.forceSimulation, the layout applies forceLink, forceCenter, and forceManyBody to position nodes dynamically. Node size and blue color intensity reflect link count, computed via path filtering. User interaction is supported through d3.drag, while tick updates redraw curved SVG paths. Data is embedded directly in the code as link and node objects.

Gguinessjulie
74% match
Loading thumbnail…

Network Graph

A force-directed network graph visualizes social connections among ten people, with labeled nodes and directed, arrowed links. Node size reflects connection strength through link thickness, and hovering highlights a node. The example uses D3 v6’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position elements, rendering in SVG. Data comes from `graph.json` and includes relationship types and values. Interactive dragging is implemented via `d3.drag`.

Iindushashi.g@gmail.com
73% match
Loading thumbnail…

Force

This example visualizes a social network from the Caltech36 dataset, representing individuals as nodes and their connections as links in a force-directed graph. Node colors are assigned using a sequential rainbow scale based on index, and the layout is computed with d3.forceSimulation, incorporating many-body, center, and link forces. The SVG rendering updates positions on each tick, showing clusters and relationships within the network data loaded via d3.json.

Vvivianaaai@qq.com
73% match
Loading thumbnail…

D3 Force Simulation

A force-directed network graph displays seven people connected by social links, with node size encoding age and color encoding gender throughout the simulation. The layout uses `d3.forceSimulation` with multiple forces: `d3.forceX` for gender-based horizontal separation, `d3.forceY` for vertical centering, `d3.forceCollide` for collision avoidance, and `d3.forceLink` for edge attraction. Users can drag nodes via `d3.drag()`, which dynamically adjusts the simulation’s temperature. Data is hardcoded as JavaScript arrays and rendered to SVG with circles and lines.

TTamayoValencia
73% match