How PayPal Shares Your Data

Re:How PayPal Shares Your Data by shawn on Sunday January 21, 2018 @06:14AM (#16197638)

The tree visualization was kind of cool, so I turned it into a library called d4tree.

Throw it any JSON data whose structure is isomorphic to http://rebecca-ricks.com/paypal-data/data/paypal.json

Here's an example of how to use d4tree on your site:

  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 to see them. Whenever you're happy, run `yarn deploy` to push it live.

Standard paypal visualization:

https://dist-zlomdidehn.now.sh/

After truncating paypal.json to three nodes, we get a skinny tree:

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://imgur.com/a/arwF5

[ Parent | on HN ]

Re:How PayPal Shares Your Data by jamessb on Sunday January 21, 2018 @06:54AM (#16197753)

Do 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

[2]: https://github.com/shawwn/d4tree/blob/master/js/script.js#L7...

[ Parent | on HN ]

Re:How PayPal Shares Your Data by shawn on Sunday January 21, 2018 @08:21AM (#16197940)

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

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.

[ Parent | on HN ]