Replace png with svg examples

Author: shreyasbharath

.gitignore

@@ -15,5 +15,6 @@ deps.dot
 deps.html
 deps.json
 deps.graphml
+deps.svg
 index.html
 cpp_dependency_graph.callgrind.out*

README.md

@@ -37,9 +37,11 @@ To generate the overall component depenency graph for a project, use it like so
 
 Below is the overall `dot` and `d3` component dependency visualisations for [leveldb](https://github.com/google/leveldb)
 
-![Dot](examples/leveldb_overall.png)
+![Dot](examples/leveldb_overall.svg)
 
-![D3 Force Directed Graph](examples/leveldb_overall_d3.png)
+![d3.js visualisation of leveldb](examples/leveldb_overall_d3.svg)
+
+![d3.js visualisation of rocksdb](examples/rocksdb_overall_d3.svg)
 
 **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.
 
@@ -51,9 +53,9 @@ This will highlight the dependencies coming in and going out of a specific compo
 
 Here's a component dependency visualisation generated for the `queue` component in [rethinkdb](https://github.com/rethinkdb/rethinkdb)
 
-![Queue component dot visualisation](examples/rethinkdb_queue_component.png)
+![Queue component dot visualisation](examples/rethinkdb_queue_component.svg)
 
-![Queue component d3 visualisation](examples/rethinkdb_queue_component_d3.png)
+![Queue component d3 visualisation](examples/rethinkdb_queue_component_d3.svg)
 
 ### Component include dependency graph
 
@@ -63,9 +65,9 @@ This will highlight dependencies of includes within a specific component
 
 Here's a component include dependency visualisation generated for the `queue` component in [rethinkdb](https://github.com/rethinkdb/rethinkdb)
 
-![Queue include graph dot](examples/rethinkdb_queue_include.png)
+![Queue include graph dot](examples/rethinkdb_queue_include.svg)
 
-![Queue include graph d3](examples/rethinkdb_queue_include_d3.png)
+![Queue include graph d3](examples/rethinkdb_queue_include_d3.svg)
 
 ## Development
 

TODO.md

@@ -31,6 +31,7 @@
   - [ ] Highlight strongly coupled components (i.e. have lots of outgoing/incoming dependencies). How to visualise strongly coupled components?
   - [ ] Interface vs implementation coupling (interface is worse!). Highlighting interface vs implementation coupling between components on graph?
   - [ ] Look at using subgraphs of the dot/svg language to cluster component dependencies in the graph
+  - [ ] Create a d3 donut graph with relative sizes of components in project? This'll probably show which components need to be further split up (something like this https://blog.kathyreid.id.au/2016/12/29/linux-australia-expense-breakdown-a-data-visualisation-in-d3-js/)
   - [ ] Node size - base it on how many source files (or lines of code) or how many connections going in/out of node?
   - [ ] Provide a 'zoom' slider on the visualisation to zoom in/out of the view (high level dependencies to low-level dependencies)
   - [ ] Visualise components matching user provided regex only