ELBOUNIAmine

@ELBOUNIAmine·13 public vizzes

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.

May 16, 2021

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.

May 16, 2021

Loading thumbnail…

Fork of Network Graph

This fork of a network graph visualizes a hierarchical node-link structure on a dark canvas. It uses the `d3` library's deterministic simulation toolkit, specifically `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCollide`, to position nodes. The example reads node data from a CSV file and employs Canvas rendering for the visualization. Nodes are color-coded and sized according to their position in the hierarchy, with the root and key nodes highlighted in distinct colors.

May 16, 2021

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.

May 8, 2021

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.

May 8, 2021

Loading thumbnail…

DataVis

This example combines an adjacency matrix with a force-directed network graph to visualize pairwise relationships from a TSV dataset of numeric node pairs. The matrix displays presence or absence of edges as black or grey cells, while the force simulation using `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` positions circles representing nodes. Node colors are assigned based on degree thresholds, and users can drag nodes to rearrange the graph. Both views update simultaneously via d3 v5's zoom and drag behaviors.

May 8, 2021

Loading thumbnail…

Fork of IRISis

This visualization shows a graph of connections between numbered nodes, derived from a dataset of edges, alongside a matrix display of the same adjacency information. The code uses D3 v5 with `d3.forceSimulation` for the force-directed layout, rendering nodes as circles and links as lines in an SVG. Additionally, it displays a matrix of clickable squares where colors indicate linked or unlinked pairs, with node colors assigned by degree ranges. The implementation reads data from a tab-separated file and includes zoom interaction via a translation and scale transform.

May 8, 2021

Loading thumbnail…

Fork of Force Directed Graph

This example presents a force-directed graph alongside its adjacency matrix, allowing for the exploration of network connections through two complementary views. Clicking a node in the graph highlights the corresponding row and column in the matrix, while clicking a matrix cell highlights the associated edge in the graph. The visualization uses d3.forceSimulation for layout, d3.forceLink for edge constraints, and d3.forceManyBody for repulsion, rendering with SVG. Nodes are colored by group and support drag interactions, while a d3.zoom transform enables panning and scaling. Data appears to be loaded from CSV or TSV sources.

May 8, 2021

Loading thumbnail…

Fork of IRIS

This visualization displays a network graph of nodes and links derived from a tab-separated dataset, rendered as an interactive SVG. The code builds an adjacency matrix and visualizes it as a grid of colored rectangles, while a separate force-directed layout using `d3.forceSimulation` positions the nodes and links. Nodes are colored based on their degree, and both the matrix cells and graph nodes respond to click events, though the click handlers only log to the console. The visualization also supports zooming and panning via a zoom behavior.

May 8, 2021

Loading thumbnail…

Fork of GraphLayout

A force-directed graph layout rendered as an SVG uses node positions from a CSV file and edge connections from a second CSV file. Each node is a circle colored by a categorical `k` value using a `scaleOrdinal` with the `schemeRdYlGn` color scheme. The visualization supports zooming through the `d3.zoom` behavior, which applies a transform to the graph group. D3 v5 loads the data with `csv` and appends `line` and `circle` elements to the SVG.

May 8, 2021

Loading thumbnail…

Fork of Force Directed Graph

The visualization pairs a node-link force-directed graph with an adjacency matrix view of the same network. The graph is computed using `d3.forceSimulation` with link, many-body, and center forces, while the matrix uses `rect` elements to encode edge weight via fill opacity. Clicking a node highlights its corresponding matrix row and column, and vice versa, with the selected cell emphasized in red. The implementation relies on the D3.js v6 API, including `d3.forceLink`, `d3.forceManyBody`, and custom drag and zoom interactions.

May 8, 2021

Loading thumbnail…

Fork of Force Directed Graph

A fork of a force-directed graph links a node-link diagram with an adjacency matrix. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes and links from the `infect-dublin.edges` dataset, rendered as SVG circles and lines. Clicking a node or matrix cell highlights its corresponding links and row/column with a distinct color, while `d3.zoom` and a custom `drag` function enable panning, scaling, and node repositioning. Colors map node groups via a predefined palette, and each matrix cell’s fill opacity reflects edge weight.

May 8, 2021

Loading thumbnail…

Fork of Force Directed Graph

A fork of a force-directed graph compares node-link and adjacency-matrix views of a network. Clicking a node in the graph, or a cell in the matrix, highlights the corresponding row and column or links. The graph uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter, while the matrix renders as SVG rectangles scaled by edge weight. Both views support zooming and dragging via d3.drag and d3.zoom, with node colors mapping to group values.

May 8, 2021