Play with this interactive chart here: http://jennyknuth.github.io/collapsible-tree-javascript-diagram/

This interactive diagram takes the work of coodict’s “JavaScript in one pic” found here:https://github.com/coodict/javascript-in-one-pic, and puts it into a collapsible tree format using d3.js by Mike Bostock, found here: http://bl.ocks.org/mbostock/4339083.

I liked the idea of being able to interact with the complicated tree diagram, to expand and contract it at will in order to explore its different branches. I also like the idea of exploring the structure of the JavaScript language.

 

  • Project Type: Data Visualization
  • Goals and Constraints: Simplify a complex tree chart into an interactive collapsible diagram.
  • Solution: Use D3.js's collapsible tree code to allow exploration of branches at will.
  • Skills Used: D3.js, HTML, CSS, Javascript
  • Visit site: http://jennyknuth.github.io/collapsible-tree-javascript-diagram/