How to visualize a taxonomy for web?

Question

I am trying to draw a taxonomy on a web page, where I can drill down the content of this taxonomy to get finally to links to other webpages.

The input is something like the following.

<root>
 <catSuper1 link="google.com">
  <subcat1-1>
   <item1-1-1 link="http://web.com/1" />
   <item1-1-2 link="http://web.com/2" />
   <item1-1-3 link="http://web.com/3" />
  </subcat1-1>
  <subcat1-2>
   <item1-2-1 link="http://web.com/1" />
   <item1-2-2 link="http://web.com/2" />
   <item1-2-3 link="http://web.com/3" />
  </subcat1-2>
 </catSuper1>
 <catSuper2>
  <subcat2-1>
   <item2-1-1 link="http://web.com/1" />
   <item2-1-2 link="http://web.com/2" />
   <item2-1-3 link="http://web.com/3" />
  </subcat2-1>
  <subcat2-2>
   <item2-2-1 link="http://web.com/1" />
   <item2-2-2 link="http://web.com/2" />
   <item2-2-3 link="http://web.com/3" />
  </subcat2-2>
 </catSuper2>
</root>

The taxonomy should be drawn as root and the sub elements directly under it. When clicking on any one for drilling, the old drawing will be cleared, and a new one where the clicked node is the root, and its children are drawn connected to it.

For each node, there should be an ability to click on a link to send us to another page, the same link specified in the attribute link.

I can easily change the input data schema into anything requested like json for example, but I have wrote the data as xml in the previous code snippets to represent my idea clearer.

Please advise,

EDIT:

I am new to data visualization field, so I am looking for an advise about what tool I can use to achieve my purpose, and how I can do so. I heard about d3.js, but after looking into it, I have no idea how to achieve what I want.

Best regards,