Subgraph plot for ramzaneh data

.gitignore

@@ -0,0 +1 @@
+/temp

README.md

@@ -5,8 +5,67 @@
 | (_| | | | (_| | |_) | | | |___) | |_| | |_) |
  \__, |_|  \__,_| .__/|_| |_|____/ \__,_|_.__/ 
  |___/          |_|                            
+
 </pre>
 
-graphSub is a Javasctipt module for extracting 
-a subset of a larger graph defined as per the
-force directed graph examples given in d3js.
+graphSub is a re-usable force directed chart for displaying connected data. Written in Javascript with the [d3js](http://d3js.org) library. It has some cool features rolled in.
+
+### Featues include:
+* Display graph subsets. Given a data-set with 1000+ nodes, displaying all nodes at once can clutter your  screen. With graphSub you can display only a subset of your data-set whilst being able to navigate through the entire data-set with mouse clicks.
+* The search box feature allows you to quickly locate the node that you are interested in.
+* None over-lapping labels means that node labels do not obscure each other.
+* Works on touch screens.
+* The responsive chart resizes upon a browser resize.
+* The code uses an MVC architecture, making future development easier to manage.
+* More features to be added....
+
+### Instructions:
+
+The following code can be found at the end of static/js/graphsub.js please modify it to suit your needs.
+Your data must follow the format given in the example data-set. This can be found in /data/miserables.json
+More information on d3s' force layouts can be found [here](https://github.com/mbostock/d3/wiki/Force-Layout#force).
+
+
+    /*----------------------------------------------------------------------------`
+    The code example below:
+    1. Loads the JSON data.
+    2. Sets the width to 760px.
+    3. Set the height to 500px.
+    4. Displays all nodes within 2 hops of the selected node.
+    5. Attaches the chart to the DOM element with id #chart
+    */
+
+    d3.json("data/miserables.json", function(error, graph) {
+        if (error) throw error;
+
+        // Parse JSON into the correct format if needed
+
+        var chart = d3.graphSub()
+                      .width(760)
+                      .height(500)
+                      .hops(2);
+
+        d3.select("#chart")
+          .datum(graph)
+          .call(chart);
+    });
+
+Want to contribute a bug fix or enhancement; then feel free to clone the repository and make a pull request.
+
+****A working example can be seen by downloading the repo and opening index.html****
+
+Example bl.ock.s used in the development of this graph:
+
+[Simple example of reusable d3 plugin](http://bl.ocks.org/cpbotha/5073718)
+
+[Force-based label placement](http://bl.ocks.org/MoritzStefaner/1377729)
+
+[Force-Directed Graph](http://bl.ocks.org/mbostock/4062045)
+
+[General Update Pattern, I](http://bl.ocks.org/mbostock/3808218)
+
+[General Update Pattern, II](http://bl.ocks.org/mbostock/3808221)
+
+[General Update Pattern, III](http://bl.ocks.org/mbostock/3808234)
+
+[Animating Changes in Force Diagram](http://bl.ocks.org/ericcoopey/6c602d7cb14b25c179a4)

data/fm.json

@@ -1,36 +1,36 @@
 {
     "nodes":[
-      {"name":"a"},
-      {"name":"b"},
-      {"name":"c"},
-      {"name":"d"},
-      {"name":"e"},
-      {"name":"f"},
-      {"name":"g"},
-      {"name":"h"},
-      {"name":"i"},
-      {"name":"j"},
-      {"name":"k"},
-      {"name":"l"},
-      {"name":"m"},
-      {"name":"n"}
+      {"name":"a-asdasdasd", "group":1},
+      {"name":"b-dfgdfgdfg", "group":2},
+      {"name":"c-hjfghjfgj", "group":3},
+      {"name":"d-sthdfhdfg", "group":4},
+      {"name":"e-vbncvbvcb", "group":5},
+      {"name":"f-qwerqwere", "group":6},
+      {"name":"g-xfgxfgdff", "group":7},
+      {"name":"h-sdfghdfhd", "group":1},
+      {"name":"i-arsargfas", "group":2},
+      {"name":"j-hdgfhdgfh", "group":3},
+      {"name":"k-asefasdfd", "group":4},
+      {"name":"l-sthsdhgsd", "group":5},
+      {"name":"m-awsefraea", "group":6},
+      {"name":"n-rtyhrthyt", "group":7}
   ],
     "links":[
       {"source":0,"target":1,"value":1},
+      {"source":0,"target":5,"value":1},
+      {"source":0,"target":6,"value":1},
+      {"source":0,"target":7,"value":1},
+      {"source":1,"target":5,"value":1},
+      {"source":1,"target":6,"value":1},
+      {"source":1,"target":7,"value":1},
       {"source":2,"target":3,"value":1},
       {"source":4,"target":5,"value":1},
       {"source":7,"target":8,"value":1},
       {"source":9,"target":10,"value":1},
       {"source":11,"target":12,"value":1},
-      {"source":0,"target":5,"value":1},
-      {"source":1,"target":5,"value":1},
-      {"source":0,"target":6,"value":1},
-      {"source":1,"target":6,"value":1},
-      {"source":0,"target":7,"value":1},
-      {"source":1,"target":7,"value":1},
       {"source":2,"target":8,"value":1},
-      {"source":3,"target":8,"value":1},
       {"source":2,"target":9,"value":1},
+      {"source":3,"target":8,"value":1},
       {"source":3,"target":9,"value":1},
       {"source":4,"target":11,"value":1},
       {"source":5,"target":11,"value":1},

index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>graphSub</title>
+    <title>Animating Changes in Force Diagram</title>
+    <script src="http://d3js.org/d3.v3.js"></script>
+    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
+    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
+    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
+    <style>
+        .link {
+            stroke-width: 4px;
+        }
+
+        .node {
+            stroke: #fff;
+            stroke-width: 2px;
+        }
+
+        .textClass {
+            stroke: #23232;
+            font-family: "Arial", "Liberation Sans", Arial, Helvetica, sans-serif;
+            font-weight: bold;
+
+            stroke-width: 3;
+            font-size: 20px;
+
+        }
+
+        #licensing {
+            fill: green;
+        }
+
+        .link.licensing {
+            stroke: green;
+        }
+
+        #chart, .ui-widget {
+            border-style: solid;
+            border-width: 2px;
+            border-color: white;
+        }
+
+        body {
+            background-color: white;
+        }
+    </style>
+</head>
+<body>
+<div class="ui-widget">
+  <label for="search">Search: </label>
+  <input id="search">
+</div>
+<div id="chart">    
+</div>
+</body>
+<script src="static/js/g2j4d3.js"></script>
+<script src="static/js/graphSub.js"></script>
+</html>