Skip to content

Instantly share code, notes, and snippets.

@srinivashavanur
Last active April 4, 2016 20:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save srinivashavanur/dda712aabd03c88b90e9 to your computer and use it in GitHub Desktop.
Save srinivashavanur/dda712aabd03c88b90e9 to your computer and use it in GitHub Desktop.
Visual Implementation 7

Built with blockbuilder.org


Name: Srinivas Havanur

Assignment: CS 725 - VI7 submission

Course: Information Visualization

Semester: Spring 2016


Insights gained from:

Node link diagram: In the json dataset, I have included the "category" attribute to group the states according to the starting letter. Hence the node-link diagram is encoded with different colors according to the "category" attribute. It is observed from the diagram that nodes that are closer to each other are the neighbouring states and the nodes that are farther from each other are distant states. This is identified by having links among the different nodes as shown.

Matrix View: In this, the node-link diagram is transformed into matrix view in which nodes are represented by horizontal and vertical edges of a square region and links between two nodes are indicated as an area mark in the cell in the matrix. I have provided a dropdown to

a) Group the things by name in which different states are sorted alphabetically as shown. In addition, it is also observed that the states are encoded with different colors according to the "category" attribute.

b) Group the things by number of links.

c) Group the things by cluster to see the crowded information cluster wise.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/>
<h1><center>
<a href="http://bl.ocks.org/srinivashavanur/ab441b0f43779f5ea140" target="_blank">1. Node Link View</a></center></h1>
<h1><center>
<a href="http://bl.ocks.org/srinivashavanur/155d3602465fe8f298d7" target="_blank">2. Matrix View</a></center></h1>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment