S

salwa191

@salwa191·19 public vizzes

Loading thumbnail…

RETWEET NETWORK

This example visualizes a retweet network as a force-directed graph, where each node represents a user and links represent retweet interactions weighted by frequency. It shows clusters of users based on their retweet connections, with node color indicating party affiliation. The visualization uses D3.js v5 with a Canvas rendering approach, employing `d3.forceSimulation` with forces for centering, collision, charge, and link constraints. Users can drag nodes to explore the network structure, with the simulation updating continuously to reflect the weighted relationships from the Higgs Twitter dataset.

Loading thumbnail…

Fork of Canvas Force Tutorial

This example shows a force-directed network visualization rendered on a 500×500 HTML canvas. Nodes and links are loaded from a CSV file and positioned using d3.forceSimulation, with forces for X/Y centering, collision, charge, and link constraints. The simulation updates on each tick, clearing and redrawing the canvas with simple circles and connecting lines. It uses D3 v5’s force functions and Canvas 2D context for drawing.

Loading thumbnail…

Fork of IRIS

A graph visualization shows the connections between a dataset of node pairs, with a grid-based adjacency matrix on the left and a force-directed network on the right. The code uses `d3.forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while rectangles are colored by edge presence and circles are colored by degree. The visualization supports zooming and panning, with node colors assigned based on degree quantiles.

Loading thumbnail…

Fork of Force Directed Graph

This example presents a node-link force-directed graph alongside its adjacency matrix representation, allowing users to explore connections between nodes. The graph uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while the matrix encodes edge weights as cell opacity. Clicking a node highlights its corresponding rows and columns in the matrix, and clicking matrix cells highlights the matching graph link. The implementation relies on d3.v6 with SVG rendering, and includes zoom and drag interactions. The data appears to come from a Dublin infection network, with nodes colored by group classification.

Loading thumbnail…

Fork of Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix to visualize the same graph, letting users compare both representations. The node-link view uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to generate a network layout, where nodes are colored by group and are draggable via d3 drag. Clicking a node highlights its corresponding row and column links in the matrix, and vice versa; selecting a matrix cell highlights the matching network edge. The graph data comes from the infect-dublin edge list, and the visualization is built with reusable D3 v6 modules rendered in SVG.

Loading thumbnail…

Fork of Force Directed Graph

A force-directed graph of a Dublin infection network, rendered as SVG with D3.js, is paired with an adjacency matrix to compare the two representations. Clicking a node highlights its corresponding row and column in the matrix, while clicking a matrix cell highlights its link in the graph. The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, supports zooming via `d3.zoom`, and applies node colors by group. The dataset comes from `infect-dublin.edges` and includes edge weights affecting link stroke width.

Loading thumbnail…

Fork of GraphLayout with Interactive Filtering

A force-directed graph layout visualizes network data from two CSV files, with nodes colored by a category value. Interactive filtering lets users click a legend to highlight nodes of selected categories, and a check button toggles edges between nodes of different categories. The visualization uses `d3.forceSimulation` with `forceLink` and `forceManyBody` for layout, and implements drag-and-drop node interaction with `d3.drag` and animated transitions in SVG.

Loading thumbnail…

Fork of Force-Graph

This example visualizes a force-directed network graph of game assets, displaying interconnected nodes with labels and colored links. It uses d3.forceSimulation with link, charge, and center forces to position nodes, while d3.drag enables interactive node movement. The SVG rendering maps asset names from a JSON file, with node colors assigned via d3.scaleOrdinal and d3.schemeCategory10.

Loading thumbnail…

Fork of Canvas Force Tutorial

This example shows a force-directed network graph rendered on a Canvas element using d3 v5. Nodes and links are drawn as circles and straight lines, positioned by a d3.forceSimulation with forceX, forceY, forceCollide, forceManyBody, and forceLink forces. The graph loads its edge list from a CSV file (data.csv), which contains source, target, and weight fields, and updates the visualization on each simulation tick via the canvas 2D context.

Loading thumbnail…

rt-higgs

This example shows a force-directed network of 514 nodes and over 500 links derived from a Higgs boson dataset, with weighted edges visualized as straight lines on a large Canvas. The visualization uses d3.forceSimulation with forceX, forceY, forceCollide, forceManyBody, and forceLink to position nodes, while rendering is done entirely through Canvas 2D context methods like arc and lineTo. Node and link positions update on each simulation tick, and the data is loaded from a CSV file containing source, target, and weight columns.

Loading thumbnail…

Fork of Fork of Canvas Force Tutorial

A force-directed network visualization renders a small social graph of named individuals from a CSV file, with nodes drawn as circles and links as lines on an HTML canvas. D3’s `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCollide` drives the layout, while the `ticks` update the canvas via the `getContext('2d')` API. Node positions are centered using `forceX` and `forceY`, and edge weights from the data are parsed but not visually encoded.

Loading thumbnail…

Fork of Force Directed Graph

This visualization pairs a force-directed graph with an adjacency matrix of the same network, using d3.forceSimulation, d3.forceLink, and d3.drag to lay out and interact with nodes. Clicking a node highlights its corresponding row and column in the matrix, while the graph’s links are drawn as semi-transparent lines with widths proportional to edge value. The code loads edge data from a CSV file and maps node groups to a fixed color palette, with both views rendered as SVG.

Loading thumbnail…

Fork of Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix to visualize the same graph, letting users compare both representations. The node-link view uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to generate a network layout, where nodes are colored by group and are draggable via d3 drag. Clicking a node highlights its corresponding row and column links in the matrix, and vice versa; selecting a matrix cell highlights the matching network edge. The graph data comes from the infect-dublin edge list, and the visualization is built with reusable D3 v6 modules rendered in SVG.

Loading thumbnail…

Fork of Force Directed Graph

This visualization pairs a force-directed node-link diagram with an adjacency matrix for a Dublin contact network. Using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, it simulates node physics, while the matrix encodes link weights as cell opacity. Clicking a node or matrix cell highlights its row and column, and interactions support drag-and-drop and zoom via `d3.zoom` and custom drag handlers. Data comes from an edge list of weighted connections, rendered as SVG circles and lines.

Loading thumbnail…

Fork of Force Directed Graph

This visualization combines a force-directed node-link diagram with an adjacency matrix to compare two representations of the same graph data. Clicking a node in the diagram highlights the corresponding row and column in the matrix, and clicking a matrix cell highlights the linked edge. The code uses D3 v6 with `d3.forceSimulation`, `d3.forceLink`, `drag`, and `zoom` for interactive layout, while rendering SVG elements for both views. The graph data is loaded from external CSV and edge files, with node colors mapped by group.

Loading thumbnail…

Fork of World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree diagram. The data is loaded from a local JSON file and rendered as SVG using D3 v5. It uses `d3.tree` and `d3.hierarchy` to compute the layout, `d3.linkHorizontal` for the connecting paths, and a zoom behavior for panning and scaling. Node labels are positioned dynamically, with font size decreasing by depth, and text shadows improve readability.

Loading thumbnail…

Let's make a face with D3.js!

This example shows a cheerful yellow face built from SVG shapes that animates its eyebrows up and down. The code uses D3.js version 5 to select the SVG element, append circles for the eyes and face, and draw the mouth with the `arc` generator. Eyebrow rectangles are animated using chained `transition().duration()` calls, moving vertically over two seconds. The static geometry derives from numeric constants for spacing and sizing, with the face centered via a transformed group.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation and transitions. The face is constructed using SVG primitives: a circle for the head, circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. D3 transitions animate the eyebrow group’s vertical position over four seconds, moving them up and down. The code uses `d3.select`, `d3.arc`, and `.transition().duration()` to build and animate the visualization.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This visualization demonstrates basic D3.js DOM manipulation by rendering an animated smiley face. The code builds a yellow circle for the head, adds two circular eyes, and animates rectangular eyebrows upward and downward using chained `transition()` calls. A mouth is drawn using an `arc()` path generator. The example uses D3 v5 to select SVG elements, set attributes like fill and stroke, and apply timed transforms, all rendered as an SVG animation.