Skip to main content
100%

Wiki data, first 10 pages only (force-Directed Graph with Mouseover)

✓ Published0🌍 Public
UUtopiah
Last edited Sep 15, 2016
Created on Sep 15, 2016

A force-directed graph displays the first ten pages from a wiki dataset, with nodes representing page titles and links showing their target relationships. The visualization uses D3 v3’s `d3.layout.force` to compute positions, while SVG circles and text labels render each node. Mouseover and mouseout events trigger transitions that enlarge or shrink the circles via `transition().attr("r")`. The underlying data comes from an external JavaScript file (`wiki_graph_var.js`) that defines the node dictionary and link arrays.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Wiki data, first 10 pages only (force-Directed Graph with Mouseover)

A force-directed graph visualizes the first 10 pages from a Wikipedia dataset, showing nodes as circles labeled with page names and links as lines between connected pages. Hovering over a node enlarges its circle with a smooth transition. The visualization uses d3.v3’s `d3.layout.force` for layout and animation, with SVG rendering for nodes and links. Data comes from an external `wiki_graph_var.js` script, which provides the `wiki.Nodes` dictionary, while mouseover and mouseout events trigger the radius changes.

UUtopiah
96% match
Loading thumbnail…

A8 - Node-link diagram with force-directed layout

This visualization shows the Wikipedia voter network as a node-link diagram, where each circle represents a user and connecting lines represent voting relationships. The graph uses a force-directed layout driven by `d3.forceSimulation`, with `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` for positioning. Nodes are rendered as SVG circles, interactive via `d3.drag`, and hovering displays a user’s ID. Data is loaded from a CSV file using `d3.csv` and rendered entirely with SVG elements.

RRiya Mathur
74% match
Loading thumbnail…

Untitled

A force-directed graph displays a small hierarchy of D3 module names, with nodes connected by links to show parent-child relationships. The visualization uses d3.layout.force to simulate physical forces, while a custom tick function pushes source nodes upward and target nodes downward, creating a weak tree structure. Nodes are rendered as colored circles using d3.scale.category20, and the data comes from a local graph.json file containing seven nodes and six links.

JJacob Pingel Lauridsen
71% match
Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes node-link relationships alongside an adjacency matrix, with both views linked by highlighting a selected node’s row and column on hover or click. The SVG rendering uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while `d3.drag` enables interactive repositioning and `d3.zoom` supports scaling. Links are colored by group, and matrix cells reflect edge weights via fill opacity, with data loaded from CSV text.

TThe-World-Muda
71% match
Loading thumbnail…

zoomable, draggable force layout with labels

This interactive force-directed graph displays ten labeled nodes (A through J) connected by links, with Font Awesome icons as labels overlaid on colored circles. The layout uses D3 v4’s `d3.forceSimulation` for physics-based positioning, combined with `d3.drag` for node dragging and `d3.zoom` for canvas zoom and pan. Node positions are bounded within the SVG viewport, and an HTML slider controller adjusts an external value. The black background, custom fonts, and Bootstrap controls frame the visualization, which reads node and edge data from a local `data.json` file.

FFrissAnalytics
70% match
Loading thumbnail…

Force Directed Graph

A force-directed graph displays a network of 410 nodes and their connections, with node colors assigned by group via `d3.schemeCategory10`. The visualization pairs the graph with an adjacency matrix rendered as SVG rectangles, where users can click either nodes or grid cells to highlight corresponding links and matrix positions. Built with `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, the graph supports drag-and-drop node repositioning and zoom/pan interactions through `d3.zoom`. The adjacency matrix uses `d3.select` to update stroke and fill opacity based on edge weights.

WWei-Che Chang
70% match
Loading thumbnail…

Force Directed Graph

A force-directed graph of 410 connected nodes is shown alongside an adjacency matrix, letting users explore network structure through either view. Clicking a node in the graph highlights its row and column in the matrix, while clicking a matrix cell highlights the corresponding link. The layout uses d3.forceSimulation with forceLink and forceManyBody, rendered as SVG circles and lines, with a zoom transform applied to both. The adjacency matrix is built from the same edge data, and hover effects use dynamically updated stroke colors and widths.

Aa04775
70% match
Loading thumbnail…

Force Directed Graph

This visualization employs a force-directed graph to display a dataset of 410 linked nodes, loaded from a TSV file. The d3-force simulation, using `forceSimulation`, `forceLink`, and `forceManyBody`, positions the nodes with link thickness proportional to edge weight. Nodes are colored by a group value, and interactive dragging with `d3.drag` and zooming with `d3.zoom` are enabled. A separate, non-interactive adjacency matrix, built with `d3.select` and `reorder`, is shown but not linked to the graph.

Aa04775
70% match