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 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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Utopiah/'>Utopiah</a>'s block: <a href='http://bl.ocks.org/Utopiah/7b3cbee942e9ef8fe9dc4c2918125242'>Wiki data, first 10 pages only (force-Directed Graph with Mouseover)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

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

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.

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
75% match
Loading thumbnail…

d3.js wiki visualization

This visualization maps Wikipedia’s most controversial articles as a force-directed network, where each node represents an article and is colored by its conflict type (e.g., nationality disputes, factual disagreements, or image inclusion debates). Hovering over a node reveals a tooltip with the article’s title, conflict category, creation date, and edit count. The graph is rendered as an SVG with animated positioning, using node size to encode the number of page edits and a color scale for conflict type. A legend and axes support interpretation, and the dark background highlights the categorical colors and interactive hover effects.

CCBasis
71% match
Loading thumbnail…

Wikipedia Exploration Map

This visualization maps the user's personal browsing history through Wikipedia, displaying a branching tree of visited articles connected by hyperlinks. Built with D3.js v6, the SVG visualization uses `d3.tree` for hierarchy layout and `d3.linkHorizontal` for curved edges, with interactive zoom and drag via `d3.zoom`. Nodes contain clickable links to the original articles, and hovering reveals full article summaries in a `foreignObject` text container. The underlying data, structured as a JSON tree in `flare-2.json`, was scraped from the user's browser history using Python.

Cchristiand416@gmail.com
70% match
Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

FFrissAnalytics
70% match
Loading thumbnail…

Network Graph

A force-directed network graph visualizes social connections among ten people, with labeled nodes and directed, arrowed links. Node size reflects connection strength through link thickness, and hovering highlights a node. The example uses D3 v6’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position elements, rendering in SVG. Data comes from `graph.json` and includes relationship types and values. Interactive dragging is implemented via `d3.drag`.

Iindushashi.g@gmail.com
69% match
Loading thumbnail…

Untitled

An interactive force-directed graph lets users create nodes by clicking, with new nodes automatically linking to any existing nodes within a 30-pixel radius. The visualization uses d3.layout.force for physics simulation, SVG circles for nodes, and lines for links, rendered in a React-free vanilla HTML page with d3.v3. A brown cursor circle tracks the mouse, and nodes are draggable via force.drag.

Ppoppy
69% 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
69% match