Add d3 visualisation option

Author: shreyasbharath

README.md

@@ -17,7 +17,9 @@ This tool aims to -
 
 ## Inspiration
 
-This tool is inspired by a number of projects [rubrowser](http://www.emadelsaid.com/rubrowser/) and [cpp-dependencies](https://github.com/tomtom-international/cpp-dependencies) and [objc-dependency-visualizer](https://github.com/PaulTaykalo/objc-dependency-visualizer).
+This tool is inspired by a number of projects [rubrowser](http://www.emadelsaid.com/rubrowser/), [cpp-dependencies](https://github.com/tomtom-international/cpp-dependencies) and [objc-dependency-visualizer](https://github.com/PaulTaykalo/objc-dependency-visualizer).
+
+The pretty `d3` visualisations are directly copied from `objc-dependency-visualiser`.
 
 A huge shout out to the poeple behind these projects.
 
@@ -31,37 +33,39 @@ A huge shout out to the poeple behind these projects.
 
 To generate the overall component depenency graph for a project, use it like so -
 
-`cpp_dependency_graph generate_graph -r spec\test\example_project\ -o deps.dot`
+`cpp_dependency_graph visualise -r spec\test\example_project\ -o deps.dot -f dot`
+
+Below is the overall `dot` and `d3` component dependency visualisations for [leveldb](https://github.com/google/leveldb)
 
-Below is the overall componet dependency graph for [leveldb](https://github.com/google/leveldb)
+![Dot](examples/leveldb_overall.png)
 
-![Overall component graph of leveldb](examples/leveldb_overall.png)
+![D3 Force Directed Graph](examples/leveldb_overall_d3.png)
 
 **NOTE** - If your project has a large number of components (> 100 and lots of connections between them), then generation (and subsequent rendering) may take some time.
 
 ### Individual component dependency graph
 
 This will highlight the dependencies coming in and going out of a specific component. This allows you to filter out extraneous detail and study individual components in more detail.
 
-`cpp_dependency_graph generate_graph -r spec\test\example_project\ -c Engine -o deps.dot`
+`cpp_dependency_graph visualise -r spec\test\example_project\ -c Engine -o deps.dot -f dot`
 
 Here's a component graph generated for the `queue` component in [rethinkdb](https://github.com/rethinkdb/rethinkdb)
 
-![Queue component graph of rethinkdb](examples/rethinkdb_queue_component.png)
+![Queue component dot visualisation](examples/rethinkdb_queue_component.png)
 
-Here's a component graph generated for the `table` component in [rocksdb](https://github.com/facebook/rocksdb)
-
-![Table component graph of rethinkdb](examples/rocksdb_table_component.png)
+![Queue component d3 visualisation](examples/rethinkdb_queue_component_d3.png)
 
 ### Component include dependency graph
 
 This will highlight dependencies of includes within a specific component
 
-`cpp_dependency_graph generate_graph -r spec\test\example_project\ -c Engine --include -o deps.dot`
+`cpp_dependency_graph visualise_includes -r spec\test\example_project\ -c Engine`
 
 Here's a component include graph generated for the `queue` component in [rethinkdb](https://github.com/rethinkdb/rethinkdb)
 
-![Queue include graph of rethinkdb](examples/rethinkdb_queue_include.png)
+![Queue include graph dot](examples/rethinkdb_queue_include.png)
+
+![Queue include graph d3](examples/rethinkdb_queue_include_d3.png)
 
 ## Development
 

TODO.md

@@ -2,6 +2,7 @@
 
 - [ ] Documentation
   - [ ] Screencast of how to use tool on projects
+  - [ ] Create a github.io homepage
 - [ ] Progress messages
   - [ ] Progress bar?
 - [x] Allow user to specify a single component and the tool should print only that component

examples/leveldb_overall_d3.png

@@ -37,7 +37,11 @@ def generate_html_file(deps, file)
 
     json_nodes = JSON.pretty_generate(nodes)
     json_connections = JSON.pretty_generate(connections)
-    File.write(file, json_nodes + json_connections)
+    # File.write(file, json_nodes + json_connections)
+
+    template = File.read('views/index.html.template')
+    contents = template % { dependency_links: json_connections }
+    File.write(file, contents)
   end
 
   private