Viz of facebook relations

100%

Viz of facebook relations

✓ Published0🌍 Public

Last edited May 8, 2021

Created on May 8, 2021

Forked from node-link diagrams v.s. adjacency matrix123

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Vis of facebook relations

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.

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

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

81% match

Loading thumbnail…

Assignment #8 Node-link diagram with force-directed layout

This node-link diagram visualizes the relationships among Facebook food pages, using a force-directed layout to position nodes and edges. The graph is rendered as an SVG, with nodes as blue circles and labels placed nearby. The code utilizes the D3.js v7 library, specifically leveraging the `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` APIs to compute the layout. The data originates from the networkrepository.com fb-pages-food dataset, loaded from `nodes.csv` and `links.csv` files. The simulation continuously updates node, label, and link positions on each tick event.

Mmhzahdeh@dons.usfca.edu

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

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

76% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Canvas Force Tutorial

This visualization shows a Facebook friend network as a force-directed graph rendered on an HTML `<canvas>` element. The code loads edge data from a CSV file, builds nodes and links, and applies `d3.forceSimulation` with `forceX`, `forceY`, `forceCollide`, `forceManyBody`, and `forceLink` to position the network. Each tick redraws nodes as small circles and links as lines using Canvas 2D context methods, with a simple 700×500 layout and muted stroke styling.

YYUTONG FENG

76% match

Loading thumbnail…

Fork of Fork of Fork of Canvas Force Tutorial

A force-directed network graph renders Facebook user connections as nodes and links on an HTML canvas. The visualization uses d3.forceSimulation with forceX, forceY, forceCollide, forceManyBody, and forceLink to position the nodes. Data comes from a CSV file listing source-target pairs, and the canvas is redrawn on each simulation tick. Nodes are drawn as small circles with a fixed radius, while links appear as thin lines. The example follows a step-by-step tutorial approach, adapted from a video guide on building network visualizations with D3 v4.

EELBOUNIAmine

76% match