d3.js - D3 custom library - Collapsible Tree in Drupal 7 -

i trying create views taxonomies - collapsible tree (http://bl.ocks.org/mbostock/4339083).

i installed d3 modules, imported d3 libraries , started create custom library. created d3.[mynewlibrary].libraries.info file, [mynewlibrary].css , [mynewlibrary].js , uploaded under d3.[mynewlibrary] folder. however, went views , couldn't able select [mynewlibrary].

i wonder best way validate codes written in custom library , if views automatically add new custom library selection.

i new d3. can provide help?

here below js , css codes. thanks!

/**   *@file   *javascript d3 collapsible tree library.   */    (function($) {    drupal.d3.collapsibletree = function (select, setting) {       var vis = d3.select("#viz").append("svg:svg")        .attr("width", 400)        .attr("height", 300)        .append("svg:g")        .attr("transform", "translate(40, 0)"); // shift right           // create tree "canvas"        var tree = d3.layout.tree()      .size([300,150]);           var diagonal = d3.svg.diagonal()        // change x , y (for left right tree)        .projection(function(d) { return [d.y, d.x]; });           // preparing data tree layout, convert data array of nodes        var nodes = tree.nodes(treedata);        // create array links        var links = tree.links(nodes);           console.log(treedata)        console.log(nodes)        console.log(links)           var link = vis.selectall("pathlink")        .data(links)        .enter().append("svg:path")        .attr("class", "link")        .attr("d", diagonal)           var node = vis.selectall("g.node")        .data(nodes)        .enter().append("svg:g")        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })           // add dot @ every node        node.append("svg:circle")        .attr("r", 3.5);           // place name atribute left or right depending if children        node.append("svg:text")        .attr("dx", function(d) { return d.children ? -8 : 8; })        .attr("dy", 3)        .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })        .text(function(d) { return d.name; })     }    }  })(jquery);

.node {    cursor: pointer;  }    .node circle {    fill: #fff;    stroke: steelblue;    stroke-width: 1.5px;  }    .node text {    font: 10px sans-serif;  }    .link {    fill: none;    stroke: #ccc;    stroke-width: 1.5px;  }

hmm... without seeing other files (.info), can't sure. if of js broken, visualization should show option in views.

are dependencies , versions correctly called in .info file?