Network synced with parallel coordinates

This work illustrates an example of combining node-link based network visualization with parallel coordinate visualization.

Network visualization with node-link based has advantages in understanding the relationship between data, but it has a disadvantage in recognizing the attributes of individual nodes. By combining parallel coordinates visualization, the disadvantages of node-link based visualization can be complemented. The parallel coordinate was built with d3.parcoords.js.

You can see the other version of this visulaization which implmented with sigma.js network and d3 parallel coordinates in this link.

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Network synced with parallel coordinates</title>
</head>
<body>
​
<script src="https://fastcdn.org/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="/syntagmatic/3341641/example/render-queue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="d3.parcoords.css">
​
​
<div id="container">
    <div id="graph-container" class="graph"></div>
    <div id="pc-container" class="parcoords"></div>
​
    <script src="d3.parcoords.js"></script>
    <script src="d3.svg.multibrush.js"></script>
    <script src="main.js"></script>
​
​
</div>
​
</body>
</html>
    

Updated missing url https://fastcdn.org/Underscore.js/1.8.3/underscore-min.js to https://fastcdn.org/underscore.js/1.8.3/underscore-min.js

Updated missing url https://bl.ocks.org/syntagmatic/raw/3341641/render-queue.js to /syntagmatic/3341641/example/render-queue.js

https://fastcdn.org/Underscore.js/1.8.3/underscore-min.js

https://d3js.org/d3.v3.min.js

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://bl.ocks.org/syntagmatic/raw/3341641/render-queue.js

https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js