Gist 9438552

100%

✓ Published0🌍 Public

Last edited Mar 8, 2014

Created on Mar 8, 2014

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

AI-generated description

Similar vizzes

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

87% match

Loading thumbnail…

Force-Directed Graph with Mouseover

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.

Mmbostock

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

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

80% match

Loading thumbnail…

Gist ad2220ac28db7651ecc78c969d6711ae

This example visualizes a force-directed network graph, showing the connections between nodes as a dynamic, interactive layout. The graph uses D3.js’s `d3.forceSimulation` to calculate node positions and link forces, while rendering the network with SVG elements and dashed path links. Node drag behavior is implemented via `d3.drag`, and transitions are animated using `transition.attrTween` to smoothly update link positions as the simulation runs. The data appears to be a small set of fictional or synthetic nodes and edges, drawn in a circular arrangement.

AAnaMal08

77% match

Loading thumbnail…

Gist 3de8cf86d3b2f2dda02884fee53b1abf

This example visualizes a force-directed network graph using D3.js, rendering clustered nodes and curved links on a dark background. It employs `d3.forceSimulation` with collision, charge, and link forces to position the nodes, while `d3.drag` enables interactive node movement. The visualization updates positions on each tick via SVG transforms, and node colors distinguish groups. Data appears to be generated inline within the JavaScript, with no external file loaded. The code uses D3 v3 APIs, including `d3.layout.force()` (the pre-v4 predecessor to `d3.forceSimulation`) and `d3.svg.diagonal` for edge paths.

AAnaMal08

77% match

Loading thumbnail…

Gist 41688f44df38ac0b35d9

This example shows a force-directed network graph where nodes are connected by curved links, with a color scheme that differentiates clusters. The visualization uses D3.js’s `forceSimulation` API to compute the physics-based layout, while the links are drawn as Bézier curves using the `d3.geoPath` generator. Node positions and link paths are updated iteratively in a custom simulation loop, with the rendering performed on an HTML5 Canvas element. The code reads a static JSON dataset embedded within the HTML file, providing the node and link definitions for the graph.

MMyoshu

76% match

Loading thumbnail…

Mobile Patent Suits

This network diagram maps patent-related lawsuits and licensing agreements among major mobile technology companies, with nodes representing firms and directed links showing the relationship type. Solid links indicate active suits, dashed links show resolved cases, and green links represent licensing agreements. The visualization uses D3.js's force layout (`d3.layout.force`) to position the nodes, with SVG paths and markers encoding link direction and type. Text labels along the links and node names are drawn using SVG text elements, and the interactive force-directed graph allows dragging nodes to explore the dense web of litigation.

663anp3ca

76% match