Untitled

100%

✓ Published0🌍 Public

Last edited Jun 26, 2023

Created on Jun 26, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

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

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

81% match

Loading thumbnail…

Mobile Patent Suits

663anp3ca

81% match

Loading thumbnail…

Untitled

This visualization shows a directed force-directed graph where nodes representing digital advertising and analytics technologies connect to related services, with links flowing between categories like ad exchanges, ad analytics, and testing platforms. The code builds the visualization using d3.forceSimulation to position nodes and animate the layout, with SVG circles and lines for rendering. The graph uses d3.v3, as indicated by the script import, and applies a dark theme with semi-transparent nodes and links, where text labels identify each technology node.

SStefan Apostol

76% match

Loading thumbnail…

Untitled

This example visualizes a dynamic network of nodes and links using a force-directed layout. It shows how connected entities repel and attract each other, settling into a stable configuration over time. The visualization is built with React and uses D3's `d3.forceSimulation` to calculate physics-based positions, while rendering the graph as SVG elements. The code defines nodes and links with varying colors and sizes, and the simulation updates continuously to reflect real-time movements.

Nnicklaus-roy

75% match

Loading thumbnail…

Untitled

This interactive network graph visualizes the connections between nodes, using a force-directed layout to arrange them spatially. Built with React and rendered as SVG, the visualization employs `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute node positions and link distances. The graph supports dynamic updates, allowing nodes and links to be added or removed while the simulation restarts to re-stabilize. Colors are assigned from predefined palettes, with node sizes indicating hierarchy. Data loading from a CSV file is prepared but commented out, currently showing three main nodes without links.

JJediquu

74% match