Old school D3 from simpler times

All examples By author By category About

PatMartin

Full window Github gist

D3 Plus Ring Network

NVD3 Bubble Chart

This is the dex.js ring network visualization based on D3 Plus. It's a nice way to explore relationships.

References

dex.js The main site

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html, body, #D3Plus_RingNetwork {
        height: 100%;
        min-height: 100%;
        width: 100%;
        min-width: 100%;
    }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex.css">

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dexjs.net/js/dex-jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://dexjs.net/js/dex-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://dexjs.net/js/dex-libs.js"></script>
<script src="https://dexjs.net/js/dex.js"></script><script>d3 = dex.charts.d3.d3v3;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3plus/1.9.8/d3plus.min.js"></script>
<body>
<div id="D3Plus_RingNetwork"></div>
<script>
  var csv = new dex.csv({
    'header': ["President", "Party", "Home State"],
    'data': [
      ["George Washington", "Independent", "Virginia"],
      ["John Adams", "Federalist", "Massachusetts"],
      ["Thomas Jefferson", "Democratic-Republican", "Virginia"],
      ["James Madison", "Democratic-Republican", "Virginia"],
      ["James Monroe", "Democratic-Republican", "Virginia"],
      ["John Quincy Adams", "Democratic-Republican/National Republican", "Massachusetts"],
      ["Andrew Jackson", "Democratic", "Tennessee"],
      ["Martin Van Buren", "Democratic", "New York"],
      ["William Henry Harrison", "Whig", "Ohio"],
      ["John Tyler", "Whig", "Virginia"],
      ["James K. Polk", "Democratic", "Tennessee"],
      ["Zachary Taylor", "Whig", "Louisiana"],
      ["Millard Fillmore", "Whig", "New York"],
      ["Franklin Pierce", "Democratic", "New Hampshire"],
      ["James Buchanan", "Democratic", "Pennsylvania"],
      ["Abraham Lincoln", "Republican/National Union", "Illinois"],
      ["Andrew Johnson", "Democratic/National Union", "Tennessee"],
      ["Ulysses S. Grant", "Republican", "Ohio"],
      ["Rutherford B. Hayes", "Republican", "Ohio"],
      ["James A. Garfield", "Republican", "Ohio"],
      ["Chester A. Arthur", "Republican", "New York"],
      ["Grover Cleveland", "Democratic", "New York"],
      ["Benjamin Harrison", "Republican", "Indiana"],
      ["Grover Cleveland (2nd term)", "Democratic", "New York"],
      ["William McKinley", "Republican", "Ohio"],
      ["Theodore Roosevelt", "Republican", "New York"],
      ["William Howard Taft", "Republican", "Ohio"],
      ["Woodrow Wilson", "Democratic", "New Jersey"],
      ["Warren G. Harding", "Republican", "Ohio"],
      ["Calvin Coolidge", "Republican", "Massachusetts"],
      ["Herbert Hoover", "Republican", "Iowa"],
      ["Franklin D. Roosevelt", "Democratic", "New York"],
      ["Harry S. Truman", "Democratic", "Missouri"],
      ["Dwight D. Eisenhower", "Republican", "Texas"],
      ["John F. Kennedy", "Democratic", "Massachusetts"],
      ["Lyndon B. Johnson", "Democratic", "Texas"],
      ["Richard Nixon", "Republican", "California"],
      ["Gerald Ford", "Republican", "Michigan"],
      ["Jimmy Carter", "Democratic", "Georgia"],
      ["Ronald Reagan", "Republican", "California"],
      ["George H. W. Bush", "Republican", "Texas"],
      ["Bill Clinton", "Democratic", "Arkansas"],
      ["George W. Bush", "Republican", "Texas"],
      ["Barack Obama", "Democratic", "Illinois"]
    ]
  });

// Configure a chart.
  var network = dex.charts.d3plus.RingNetwork({
      'parent': '#D3Plus_RingNetwork',
      'type': 'rings',
      'edges': {'arrows': true},
      'csv': csv
    }
  ).render();

</script>

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

https://dexjs.net/js/dex-jquery.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

https://dexjs.net/js/dex-bootstrap.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://dexjs.net/js/dex-libs.js

https://dexjs.net/js/dex.js

https://cdnjs.cloudflare.com/ajax/libs/d3plus/1.9.8/d3plus.min.js