Vis of facebook relations

100%

Vis of facebook relations

✓ Published0🌍 Public

Last edited May 8, 2021

Created on May 8, 2021

Forked from IRIS

This visualization displays a Facebook social network using two coordinated views: an adjacency matrix showing connections between users, and a force-directed node-link diagram. The matrix uses colored cells to indicate relationships, while the network graph reveals community structure through node coloring based on degree centrality. Built with D3 v5, the visualization employs `d3.forceSimulation` for layout and `d3.forceLink` for edge positioning. Users can zoom and pan the network view, while clicking nodes or matrix cells logs their identity. The underlying data is loaded from a TSV file listing Facebook friend pairs.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Viz of facebook relations

This example visualizes Facebook relationships using a combined force-directed graph and adjacency matrix. The left panel shows a network of nodes connected by links, built with `d3.forceSimulation`, while the right panel displays a grid representing the adjacency matrix, where each cell’s fill opacity reflects link weight. Clicking a node in the graph or a grid cell highlights the corresponding link in both views, using D3’s selection and event handling. Data comes from an external CSV edges file, and the visualization renders with SVG.

EELBOUNIAmine

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

85% match

Loading thumbnail…

Network graph

This network graph visualizes a small Facebook network of nine people, with green links connecting blue circular nodes. The graph uses a force-directed layout to position nodes, with link thickness proportional to the weight values from the JSON data. The visualization is built with d3.v4, using the d3.layout.force API for simulation and SVG rendering. Node labels appear in red text, and users can click and drag nodes to rearrange the network interactively.

Aavnreddy95

80% match

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

79% match

Loading thumbnail…

facebook_matrix

This matrix visualization maps friendships between 58 Facebook users, with each of the 3,980 rows in the dataset representing a directed edge from one user to another. The visualization uses a 64×64 adjacency matrix where dots are plotted at coordinates corresponding to user IDs, revealing the network's structure through the resulting point pattern. The data, sourced from a gist by ByronHan333 under the MIT license, shows clustering patterns along the diagonal with notable outliers, as connections are concentrated among users with similar ID ranges. The sparse scatter of points across the matrix highlights the social graph's density variations and community structure inherent in the Facebook friendship network.

BByronHan333

78% match

Loading thumbnail…

Social Network

This social network visualization uses a force-directed graph to display connections between nodes, with dashed lines representing links and labeled red circles for members. The layout is computed using d3.forceSimulation with forceLink, forceManyBody, and forceCenter forces, updating positions each tick. Data loads from a remote JSON via d3.json, and the SVG renders nodes, links, and text labels with D3 v6.

KKishen Patel

78% match

Loading thumbnail…

Fork of Network graph

This example visualizes a small network of Facebook friends, where nodes represent individuals and links represent connections between them. The graph uses a force-directed layout to position nodes, with link thickness proportional to the connection weight. The visualization is built with D3.js v4, using the `d3.layout.force` API for the layout simulation and SVG rendering. Node labels are placed beside each circle, and the data is loaded from a local JSON file containing node names and link weights.

DDeekshithVemula

78% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes the relationships between individuals, with nodes representing people and links representing their connections. The network layout is computed using D3.js force-directed algorithms, specifically `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes based on their interactions. Users can drag nodes to explore the graph, and hovering highlights a node with a green stroke. The visualization is rendered as an SVG using React, with data loaded from a JSON file.

Ggeethanjalikotaru

77% match