observable examples

[timelyportfolio]

I just published two examples on Observable in case anyone is interested.

• Treemap as d3-flextree
• Simple Example

Just learning Observable, so I apologize if I did anything in a non-best-practice kind of way.

[AGenchev]

Hello, I'm struggling to draw a tree in a browser using different sized nodes and saw you examples, but on your 'simple example' I cannot see anything in the svg, it's code is <svg viewBox="-150 0 400 400" width="400" height="400"><g transform="translate(25, 25)"></g></svg> and the other does not look like a tree...
Still I can not get how to draw something 'flex' while for reference, there is a good working example for the classic d3 tree layout : https://github.com/BernhardZuba/d3js-orgchart/blob/master/index.htm with collapsing/expanding + animations and small code w/o other plugins.

[timelyportfolio]

@AGenchev the observable examples were some of my first, so they don’t render automatically. This is clumsy but click the three vertical dots and edit. Then hit the play button next to the block.

I will try to fix tonight.

Flex tree allows for non-uniform size and spacing. For a little more discussion on uniform size/spacing see https://www.jsinr.me/2017/11/13/visualizing-trees--partition---sankey/.

[AGenchev]

Uh, O.K. thanks, I didn't know it doesn't auto-run. Now I see unequal squares, which was the goal I guess. It still lacks connecting lines but is something to experiment with. I'll try to render hierarchical data like this:
data = {"id":"1","desc":"Executive office","children":[ {"id":"2","desc":"Sales","children":[]},{"id":"3","desc":"Marketing's looong name which needs flextree to show","children":[]},{"id":"4","desc":"Development","children":[]} ]};

[sumitpal29]

Mate, do you have a solution for updating the node size of an individual node onClick with this flex-tree?