A d3 enabled implementation of the SeeSoft and Treemap Visualization.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.




  • set c_id and c_secret values for increasing github limit rate How to get c_id, c_secret:
1. goto: github - settings - application - developer applications - register new application
2. put any values on the form and it will produce client_id and client_secret.
  • Zoom in: mouse click, Zoom out: alt + mouse click


  • The javascript code in this project is tested using the BDD testing framework, Jasminev2.3.4.
  • The Jasmin library, its dependencies, and the actual test runner (SpecRunner.html) is included in the tests directory.
  • The tests/spec folder contains the actual tests, written in javascript.
  • Writing/adding more javascript tests
    • You do not have to download the library. That is already done for this project.
    • You can add more tests (written in JS) in tests/spec
    • Declare your cod-under-test and the spec inside SpecRunner.html, i.e. the test-runner.
    • Here are some awesome links to learn more about Jasmine:
    • To run your tests, just open SpecRunner.html in your browser (works on Firefox).

Change Log


  1. Reduced the size of the TreeMap Layout
  2. Added the search functionality which does the same thing as zooming in on any file
  3. Added a line to erase the previous TreeMap on update
  4. Implemented "autocomplete" using jQuery
  5. Added a restore button to restore it to the original view.


  1. Add commit log
  2. Add source view
  3. fix zoom behavior
    • zoom in: left mouse click
    • zoom out: left mouse click + alt


Added Double Click Show details functionality.


Added D3 Autocomplete feature. Issue: The dropped down list is opaque.


Added the lines of code as "pre" HTML elements with a background color. More operations like zooming and redirection on top of this.


Colors made lighter allowing "pre" section to overflow.


On clicking a particular line of the source code in the SeeSoft view, the user is redirected to the GitHub page of the file with the clicked on like highlighted.


On clicking the "+" or "-" above the SeeSoft View, one can zoom in and out accordingly. The next step is to be able to zoom in and out using a slider.


Implemented a range slider to zoom in an out of the SeeSoft view better.


  1. On clicking any colored rectangle, the SeeSoft is zoomed in and the page is scrolled down the exact line number that was clicked. On double clicking the line, a new window with a link to the highlighted line of the GitHub page of the source code.
  2. Made colors a bit lighter.


Added bootstrap.css to make it look better. Will later use the sections to make it appear more organized later.


Fixed the auto-scrolling on the click listener on every "pre" object.


Varied column size with the zoom.


Beautifying with Bootstrap classes and HTML.


Fixed the search function to hook on to the SeeSoft view.


Added gradient effect to the TreeMap but had to remove the commit brightener. Will make it look neater and incorporate commit information.

90e7eba9d8a640956d8bb37255148892a056cf1c Tied up the radius of the bright spot with the number of commits.

df4bd177179e815a8f359c260b1f6ae8c63cab22 Changed the appearance from a bright spot to a bright ring.

d22d70fd72532e5e2b050b416ff1bf744526d1d3 Changed the bight spot to a corner gradient. Also put the TreeMap in the "jumbotron" element.

93f755c85ad3741c5e91de333508b1945ce1ad8b Cascading the SeeSoft views. Also removed the margin from the TreeMap. Made the background black but it doesn't stretch.

cfd006b2aaa993c1859d7f531777b021422773a1 Added Tabs that get appended once every new file is displayed. More Work required here.

a0a24b5c3e9c03df728b20c153a1286b2d95daed Tabs finally working.

6c2cbaff97c80093f80c6a4448bd2803ca4d2d50 Minor bug fixes with tabs. Removed the jQuery search.

1be0f184a8af215aa6d97b075c32b1775fce0422 Added the X button to close tabs.

03b100c438d20706edddaca24051637244d372b1 Changed the UI by putting the zoom changer and tab selector on the header. The default tab opens to the tree map.

Latest Moved around UI elements and hid the TreeMap while viewing SeeSoft.