In my last post, I shown a graph representing around five hundred papers regarding Deep Learning and their authors and citations.

Adding JavaScript

I added some pure JS to make the SVG graph a little interactive, I also included the SVG in an svgPanZoom so you can zoom and move through the graph.

Instructions

To interact with the graph, you need to have JavaScript enabled in your browser and let the page load completely before interacting. Then:

  • Hover on a node to enlarge and highlight that node and all connected ones
  • Click on a node to hold/un-hold the highlighting
  • Click on a node with the ALT-key down to open the paper’s URL in a new tab.
  • Always remember that you can get information about a paper or an author by hovering for a second on a node.

  • Use the + and - buttons to zoom the graph, you can also move in the zoomed area by dragging the graph and zooming by double-clicking on it
  • Press the RESET button if you have problems with the zoomable interface

Read the legend below to know the colour meanings.

I hope I didn’t miss anything or left any bugs (if so, please let me know).

Interactive Graph

Legend

  • Nodes:

    • Green : authors, size depend on the number of written papers, very tiny at default zoom settings, but they get bigger if highlighted
    • Pink to Red: papers, coloured based on the publication date, sizes depend on the number of citations received per year
  • Edges:

    • Green : “authored by” relationship
    • Earth Blue (very few Chilli Pepper and Magenta) : “cited by” relationship
  • Interaction:

    • Magenta: highlighted node on mouse hover
    • Dimorphotheca Magenta: highlighted node, toggled on mouse click
    • Cyan: papers cited by highlighted papers or authors who wrote an highlighted paper
    • Blue Hosta: papers citing an highlighted paper