javascript - How to visualize a taxonomy for web? -

i trying draw taxonomy on web page, can drill down content of taxonomy links other webpages.

the input 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 drawn root , sub elements directly under it. when clicking on 1 drilling, old drawing cleared, , new 1 clicked node root, , children drawn connected it.

for each node, there should ability click on link send page, same link specified in attribute link.

i can change input data schema requested json example, have wrote data xml in previous code snippets represent idea clearer.

please advise,

edit:

i new data visualization field, looking advise tool can use achieve purpose, , how can so. heard d3.js, after looking it, have no idea how achieve want.

best regards,