4 ms·
The tree visualization was kind of cool, so I turned it into a library called d4tree. https://github.com/shawwn/d4tree https://github.com/shawwn/d4tree Throw
by shawn 9y ago
The tree visualization was kind of cool, so I turned it into a library called d4tree.
https://github.com/shawwn/d4tree https://github.com/shawwn/d4tree
Throw it any JSON data whose structure is isomorphic to http://rebecca-ricks.com/paypal-data/data/paypal.json http://rebecca-ricks.com/paypal-data/data/paypal.json
Here's an example of how to use d4tree on your site:
https://github.com/shawwn/d4tree-paypal https://github.com/shawwn/d4tree-paypal
git clone https://github.com/shawwn/d4tree-paypal
cd d4tree-paypal
yarn && yarn dev
Make any changes you want to paypal.json, then refresh http://localhost:1234 http://localhost:1234 to see them. Whenever you're happy, run `yarn deploy` to push it live.
Standard paypal visualization:
https://dist-zlomdidehn.now.sh/ https://dist-zlomdidehn.now.sh/
After truncating paypal.json to three nodes, we get a skinny tree:
https://dist-kzpulmmevd.now.sh/ https://dist-kzpulmmevd.now.sh/
Let's attach package.json to the top of paypal.json:
import d4tree from 'd4tree';
d4tree([{
name: "package.json",
parent: "null",
children: require('./paypal.json'),
Data: JSON.stringify(require('./package.json'), true, 2),
}]);
https://dist-vcqquyfbwl.now.sh https://dist-vcqquyfbwl.now.sh
https://imgur.com/a/arwF5 https://imgur.com/a/arwF5
- jamessb 9y agoDo you realise that this is essentialy Mike Bostock's reference implementation of a Collapsible Tree [1]? Why re-distribute it as a separate repository? Rebeca Ricks added tooltips, but you haven't generalised these: the code in your repo still generates this text using .Data and .Purpose attributes of the data objects representing the leaves [2], which won't exist for general tree objects. [1]: https://bl.ocks.org/mbostock/4339083 https://bl.ocks.org/mbostock/4339083 [2]: https://github.com/shawwn/d4tree/blob/master/js/script.js#L72 https://github.com/shawwn/d4tree/blob/master/js/script.js#L7...
- shawn 9y agohttp://9front.org/img/freesoftware.gif http://9front.org/img/freesoftware.gif Thanks! :) I did this mostly for the fun of it, but it's nice to know the source. The styling on Mike's tree is much nicer. It's quite handy to have zooming and tooltips. The zooming is a little rough, but overall this seems like a nice way to explore huge amounts of hierarchical data. My overall aim is to make an interactive bundle explorer: https://i.imgur.com/Ww0ARCS.png https://i.imgur.com/Ww0ARCS.png Graphviz is nice, but it's not interactive. What you really want is to attach a ton of information to each node, hidden by default. Tooltips are a small but promising step towards that. It doesn't seem like this library can handle circular dependencies though. Anyone know of something along these lines that can handle arbitrary cycles? DOT graphs try to display all the nodes at once, but it seems like the Collapsible Tree strategy could be applied to circular graphs: just let the user click on the edges they want to explore, and elide the rest. Then indicate which edges are "interesting" (lots of children, or children with significant effects), so that users aren't randomly stepping through a huge mostly-hidden graph. I'd love to find something performant enough to display your entire filesystem as an explorable tree, but that'd be quite a challenge.