Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active January 31, 2025 21:03

Revisions

  1. mbostock revised this gist Jan 16, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    Original file line number Diff line number Diff line change
    @@ -1 +1,2 @@
    license: gpl-3.0
    redirect: https://observablehq.com/@mbostock/mobile-patent-suits
  2. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  3. mbostock revised this gist Nov 17, 2015. 2 changed files with 5 additions and 5 deletions.
    5 changes: 5 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    **Click to drag nodes.** Dashed links are resolved suits; green links are licensing.

    Thomson Reuters published a rather [abysmal infographic](http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/) showing the "bowl of spaghetti" that is current flurry of patent-related suits in the mobile communications industry. So, inspired by [a comment](https://twitter.com/jfire/status/104008561436270593) by John Firebaugh, I remade the visualization to better convey the network. That company in the center? Yeah, it's the [world's largest](http://www.businessweek.com/news/2011-08-09/apple-briefly-passes-exxon-as-world-s-largest-company.html), so little wonder it has the most incoming suits.

    Implemented in [D3.js](http://d3js.org/).
    5 changes: 0 additions & 5 deletions readme.md
    Original file line number Diff line number Diff line change
    @@ -1,5 +0,0 @@
    **Click to drag nodes.** Dashed links are resolved suits; green links are licensing.

    Thomson Reuters published a rather [abysmal infographic](http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/) showing the "bowl of spaghetti" that is current flurry of patent-related suits in the mobile communications industry. So, inspired by [a comment](https://twitter.com/#!/jfire/status/104008561436270593) by John Firebaugh, I remade the visualization to better convey the network. That company in the center? Yeah, it's the [world's largest](http://www.businessweek.com/news/2011-08-09/apple-briefly-passes-exxon-as-world-s-largest-company.html), so little wonder it has the most incoming suits.

    Implemented in [D3.js](http://mbostock.github.com/d3/).
  4. mbostock revised this gist Oct 30, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -34,7 +34,7 @@

    </style>
    <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    // http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
  5. mbostock revised this gist Jun 11, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -34,7 +34,7 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

    // http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
  6. mbostock revised this gist Nov 22, 2013. 1 changed file with 43 additions and 65 deletions.
    108 changes: 43 additions & 65 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -1,28 +1,22 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Mobile Patent Suits</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
    <style type="text/css">

    path.link {
    <meta charset="utf-8">
    <style>

    .link {
    fill: none;
    stroke: #666;
    stroke-width: 1.5px;
    }

    marker#licensing {
    #licensing {
    fill: green;
    }

    path.link.licensing {
    .link.licensing {
    stroke: green;
    }

    path.link.resolved {
    .link.resolved {
    stroke-dasharray: 0,2 1;
    }

    @@ -35,18 +29,13 @@
    text {
    font: 10px sans-serif;
    pointer-events: none;
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
    }

    text.shadow {
    stroke: #fff;
    stroke-width: 3px;
    stroke-opacity: .8;
    }

    </style>
    </head>
    <body>
    <script type="text/javascript">
    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    // http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
    var links = [
    @@ -88,82 +77,71 @@
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
    });

    var w = 960,
    h = 500;
    var width = 960,
    height = 500;

    var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([w, h])
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

    var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    // Per-type markers, as they don't inherit styles.
    svg.append("svg:defs").selectAll("marker")
    svg.append("defs").selectAll("marker")
    .data(["suit", "licensing", "resolved"])
    .enter().append("svg:marker")
    .attr("id", String)
    .enter().append("marker")
    .attr("id", function(d) { return d; })
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("svg:path")
    .append("path")
    .attr("d", "M0,-5L10,0L0,5");

    var path = svg.append("svg:g").selectAll("path")
    var path = svg.append("g").selectAll("path")
    .data(force.links())
    .enter().append("svg:path")
    .enter().append("path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

    var circle = svg.append("svg:g").selectAll("circle")
    var circle = svg.append("g").selectAll("circle")
    .data(force.nodes())
    .enter().append("svg:circle")
    .enter().append("circle")
    .attr("r", 6)
    .call(force.drag);

    var text = svg.append("svg:g").selectAll("g")
    var text = svg.append("g").selectAll("text")
    .data(force.nodes())
    .enter().append("svg:g");

    // A copy of the text with a thick white stroke for legibility.
    text.append("svg:text")
    .attr("x", 8)
    .attr("y", ".31em")
    .attr("class", "shadow")
    .text(function(d) { return d.name; });

    text.append("svg:text")
    .enter().append("text")
    .attr("x", 8)
    .attr("y", ".31em")
    .text(function(d) { return d.name; });

    // Use elliptical arc path segments to doubly-encode directionality.
    function tick() {
    path.attr("d", function(d) {
    var dx = d.target.x - d.source.x,
    dy = d.target.y - d.source.y,
    dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    });

    circle.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
    });

    text.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
    });
    path.attr("d", linkArc);
    circle.attr("transform", transform);
    text.attr("transform", transform);
    }

    function linkArc(d) {
    var dx = d.target.x - d.source.x,
    dy = d.target.y - d.source.y,
    dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    }

    function transform(d) {
    return "translate(" + d.x + "," + d.y + ")";
    }

    </script>
    </body>
    </html>
    </script>
  7. mbostock revised this gist Oct 12, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  8. mbostock revised this gist Aug 18, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion readme.md
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    **Click to drag nodes.**
    **Click to drag nodes.** Dashed links are resolved suits; green links are licensing.

    Thomson Reuters published a rather [abysmal infographic](http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/) showing the "bowl of spaghetti" that is current flurry of patent-related suits in the mobile communications industry. So, inspired by [a comment](https://twitter.com/#!/jfire/status/104008561436270593) by John Firebaugh, I remade the visualization to better convey the network. That company in the center? Yeah, it's the [world's largest](http://www.businessweek.com/news/2011-08-09/apple-briefly-passes-exxon-as-world-s-largest-company.html), so little wonder it has the most incoming suits.

  9. mbostock revised this gist Aug 18, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion readme.md
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    **Click to drag nodes.**

    Thomson Reuters published a rather [abysmal infographic](http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/) showing the "bowl of spaghetti" that is current flurry of patent-related suits in the mobile communications industry. So, inspired by [a comment](https://twitter.com/#!/jfire/status/104008561436270593) by John Firebaugh, I decided to remake the visualization with something that much more clearly conveys the suits. That company in the center? Yeah, it's the [world's largest](http://www.businessweek.com/news/2011-08-09/apple-briefly-passes-exxon-as-world-s-largest-company.html), so little wonder it has the most incoming suits.
    Thomson Reuters published a rather [abysmal infographic](http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/) showing the "bowl of spaghetti" that is current flurry of patent-related suits in the mobile communications industry. So, inspired by [a comment](https://twitter.com/#!/jfire/status/104008561436270593) by John Firebaugh, I remade the visualization to better convey the network. That company in the center? Yeah, it's the [world's largest](http://www.businessweek.com/news/2011-08-09/apple-briefly-passes-exxon-as-world-s-largest-company.html), so little wonder it has the most incoming suits.

    Implemented in [D3.js](http://mbostock.github.com/d3/).
  10. mbostock revised this gist Aug 18, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion readme.md
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    **Click to drag nodes.**

    Thomson Reuters published a rather [abysmal infographic](http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/) showing the "bowl of spaghetti" that is current network of patent-related suits in the mobile communications industry. So, inspired by [a comment](https://twitter.com/#!/jfire/status/104008561436270593) by John Firebaugh, I decided to remake the visualization with something that much more clearly conveys the suits. That company in the center? Yeah, it's the [world's largest](http://www.businessweek.com/news/2011-08-09/apple-briefly-passes-exxon-as-world-s-largest-company.html), so little wonder it has the most incoming suits.
    Thomson Reuters published a rather [abysmal infographic](http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/) showing the "bowl of spaghetti" that is current flurry of patent-related suits in the mobile communications industry. So, inspired by [a comment](https://twitter.com/#!/jfire/status/104008561436270593) by John Firebaugh, I decided to remake the visualization with something that much more clearly conveys the suits. That company in the center? Yeah, it's the [world's largest](http://www.businessweek.com/news/2011-08-09/apple-briefly-passes-exxon-as-world-s-largest-company.html), so little wonder it has the most incoming suits.

    Implemented in [D3.js](http://mbostock.github.com/d3/).
  11. mbostock revised this gist Aug 18, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -100,7 +100,7 @@
    .on("tick", tick)
    .start();

    var svg = d3.select("#chart").append("svg:svg")
    var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

  12. mbostock revised this gist Aug 18, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion readme.md
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    *Click to drag nodes!*
    **Click to drag nodes.**

    Thomson Reuters published a rather [abysmal infographic](http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/) showing the "bowl of spaghetti" that is current network of patent-related suits in the mobile communications industry. So, inspired by [a comment](https://twitter.com/#!/jfire/status/104008561436270593) by John Firebaugh, I decided to remake the visualization with something that much more clearly conveys the suits. That company in the center? Yeah, it's the [world's largest](http://www.businessweek.com/news/2011-08-09/apple-briefly-passes-exxon-as-world-s-largest-company.html), so little wonder it has the most incoming suits.

  13. mbostock created this gist Aug 18, 2011.
    169 changes: 169 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,169 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Mobile Patent Suits</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
    <style type="text/css">

    path.link {
    fill: none;
    stroke: #666;
    stroke-width: 1.5px;
    }

    marker#licensing {
    fill: green;
    }

    path.link.licensing {
    stroke: green;
    }

    path.link.resolved {
    stroke-dasharray: 0,2 1;
    }

    circle {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
    }

    text {
    font: 10px sans-serif;
    pointer-events: none;
    }

    text.shadow {
    stroke: #fff;
    stroke-width: 3px;
    stroke-opacity: .8;
    }

    </style>
    </head>
    <body>
    <script type="text/javascript">

    // http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
    var links = [
    {source: "Microsoft", target: "Amazon", type: "licensing"},
    {source: "Microsoft", target: "HTC", type: "licensing"},
    {source: "Samsung", target: "Apple", type: "suit"},
    {source: "Motorola", target: "Apple", type: "suit"},
    {source: "Nokia", target: "Apple", type: "resolved"},
    {source: "HTC", target: "Apple", type: "suit"},
    {source: "Kodak", target: "Apple", type: "suit"},
    {source: "Microsoft", target: "Barnes & Noble", type: "suit"},
    {source: "Microsoft", target: "Foxconn", type: "suit"},
    {source: "Oracle", target: "Google", type: "suit"},
    {source: "Apple", target: "HTC", type: "suit"},
    {source: "Microsoft", target: "Inventec", type: "suit"},
    {source: "Samsung", target: "Kodak", type: "resolved"},
    {source: "LG", target: "Kodak", type: "resolved"},
    {source: "RIM", target: "Kodak", type: "suit"},
    {source: "Sony", target: "LG", type: "suit"},
    {source: "Kodak", target: "LG", type: "resolved"},
    {source: "Apple", target: "Nokia", type: "resolved"},
    {source: "Qualcomm", target: "Nokia", type: "resolved"},
    {source: "Apple", target: "Motorola", type: "suit"},
    {source: "Microsoft", target: "Motorola", type: "suit"},
    {source: "Motorola", target: "Microsoft", type: "suit"},
    {source: "Huawei", target: "ZTE", type: "suit"},
    {source: "Ericsson", target: "ZTE", type: "suit"},
    {source: "Kodak", target: "Samsung", type: "resolved"},
    {source: "Apple", target: "Samsung", type: "suit"},
    {source: "Kodak", target: "RIM", type: "suit"},
    {source: "Nokia", target: "Qualcomm", type: "suit"}
    ];

    var nodes = {};

    // Compute the distinct nodes from the links.
    links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
    });

    var w = 960,
    h = 500;

    var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([w, h])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

    var svg = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

    // Per-type markers, as they don't inherit styles.
    svg.append("svg:defs").selectAll("marker")
    .data(["suit", "licensing", "resolved"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

    var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
    .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

    var circle = svg.append("svg:g").selectAll("circle")
    .data(force.nodes())
    .enter().append("svg:circle")
    .attr("r", 6)
    .call(force.drag);

    var text = svg.append("svg:g").selectAll("g")
    .data(force.nodes())
    .enter().append("svg:g");

    // A copy of the text with a thick white stroke for legibility.
    text.append("svg:text")
    .attr("x", 8)
    .attr("y", ".31em")
    .attr("class", "shadow")
    .text(function(d) { return d.name; });

    text.append("svg:text")
    .attr("x", 8)
    .attr("y", ".31em")
    .text(function(d) { return d.name; });

    // Use elliptical arc path segments to doubly-encode directionality.
    function tick() {
    path.attr("d", function(d) {
    var dx = d.target.x - d.source.x,
    dy = d.target.y - d.source.y,
    dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    });

    circle.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
    });

    text.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
    });
    }

    </script>
    </body>
    </html>
    5 changes: 5 additions & 0 deletions readme.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    *Click to drag nodes!*

    Thomson Reuters published a rather [abysmal infographic](http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/) showing the "bowl of spaghetti" that is current network of patent-related suits in the mobile communications industry. So, inspired by [a comment](https://twitter.com/#!/jfire/status/104008561436270593) by John Firebaugh, I decided to remake the visualization with something that much more clearly conveys the suits. That company in the center? Yeah, it's the [world's largest](http://www.businessweek.com/news/2011-08-09/apple-briefly-passes-exxon-as-world-s-largest-company.html), so little wonder it has the most incoming suits.

    Implemented in [D3.js](http://mbostock.github.com/d3/).