tech tree example


Please check out the demo by visiting

activating a tech node


  • use a TexturePacker spritesheet or individual images
  • horizontal, vertical and even radial tech trees
  • multiple parents for a single technology


in the browser

Download the minified file and optinally, the source map. Include the minified file and the dependencies in your html file

    <script src="lib/d3.min.js"></script>
    <script src="lib/saveSvgAsPng.min.js"></script>
    <script src="js/techTree.min.js"></script>

Building and running

To build, be sure you have node and npm installed.

Ideally, you should also have gulp installed globally.

Clone the directory using git:

git clone

Install dependencies:

npm install



Run a webserver

gulp serve

Then open a browser and go to localhost:8000 to see the site.

Art used

Art assets used under the CC-BY 3.0 License

Software libraries used

Libraries used under the MIT License

  • d3
  • saveSvgAsPng

Copyright (C) 2017 ldd

Share this project: