Force-Directed Graph with Mouseover

100%

Force-Directed Graph with Mouseover

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 15, 2012

A force-directed graph displays patent litigation and licensing relationships among technology companies, using D3.js v3’s `d3.layout.force` to position nodes and links. Dragging nodes is enabled via `force.drag`, while mouseover and mouseout events trigger a 750-millisecond transition that grows and shrinks each node’s circle radius from 8 to 16 pixels. The SVG rendering updates positions on each tick, with labels next to each circle and link lines drawn between sources and targets. Data comes from a hardcoded array of link objects naming companies like Microsoft, Apple, and Samsung.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Gist 9438552

This example shows a force-directed network graph of patent disputes and licensing agreements among technology companies. Node labels and link types distinguish lawsuits, licensing deals, and resolved cases through distinct colors and arrow markers. The visualization uses D3.js v3 with the force layout (`d3.layout.force`) and SVG rendering. Data is hardcoded manually, with an elliptical arc path (`linkArc`) that doubly-encodes directionality and arrowhead markers defined per link type. Drag interaction is enabled on nodes via `force.drag`.

MMraleksa

84% match

Loading thumbnail…

fancier_force_distance

This example visualizes a force-directed network of patent litigation and licensing disputes among technology companies. It shows how firms are connected through lawsuits, with each link representing a legal relationship and its type distinguished by color and line style. The visualization uses D3.js v3’s `d3.layout.force` to simulate physical forces, positioning nodes and adjusting link distances based on a numeric `distance` property in the data. SVG elements—paths for links with arrow markers, circles for nodes, and text labels—are bound to the force simulation’s tick event, which updates their positions. The source data originates from a Thomson Reuters blog post, and the code manually constructs node and link arrays from a hardcoded list.

JJoelGallagher

83% match

Loading thumbnail…

Untitled

A force-directed graph visualizes patent litigation and licensing relationships among technology companies, with nodes representing firms and links showing suit, licensing, or resolved cases. The visualization uses d3.layout.force to simulate physical forces, positioning nodes and enabling dragging, while SVG circles and text labels display the network. Data from a Thomson Reuters blog post about mobile patent suits drives the layout, with circular areas expanding on mouseover via transition animations. The graph runs in React, leveraging d3.v3 for the force simulation and tick-based position updates.

Ppoppy

82% match

Loading thumbnail…

Mobile Patent Suits

A force-directed network diagram maps patent disputes among mobile technology companies, with nodes representing firms and curved links encoding suit direction via arc paths. Dashed links show resolved cases, while green links indicate licensing agreements, highlighting Apple as a central target of litigation. Built with D3.js v3, the visualization uses the `d3.layout.force` API for physics-based node placement and SVG markers for link arrowheads. Data comes from a Thomson Reuters infographic, recreated to improve clarity over the original "bowl of spaghetti" design.

Mmbostock

76% match

Loading thumbnail…

A8-Node-Link Diagram with Force-Directed Graph

This example shows a force-directed node-link diagram of inter-firm relationships in the high-tech sector, loaded from a CSV dataset. Nodes are rendered as hotpink circles and links as gray, curved paths whose widths scale with link weights. The layout is computed using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`. It also uses D3’s drag behavior to move nodes and a custom tooltip on hover, with the SVG drawn entirely through D3 v7.

Bbhavi.kenia@gmail.com

76% match

Loading thumbnail…

D3 Network Graph

This example shows an interactive network graph of company ownership links, with labeled nodes positioned through a force-directed simulation. It uses D3 version 6’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute node positions, while `d3.drag` enables dragging nodes. The SVG rendering draws gray lines for links and circles with labels for nodes, with data structured as nodes and links from a dataset containing company records and weighted ownership connections.

RRajath Gowda

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

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

75% match