Question: I have an open-source matrix of data, the Mitre ATT&CK Cyberthreat Intel ( Matrix - Enterprise | MITRE ATT&CK® ). How do i make the matrix like a tree, where column headings are laid out with a tidy tree, and the rows/sub-rows are laid out with an indented tree algorithm? the aim is to be …

Try 2 which uses the dataset, and has a more sophisticated, node-based layout Mitre ATT&CK Try 2. / brettforbes | Observable (observablehq.com) the visual aim is to look something like this diagram below. There are a range of tactics that can be collapsed or expanded, shown/hidden On the left, t…

I would probably model this as an HTML nested list so that you can use CSS grids and Flexbox to arrange the items, and let the browser handle most of the layout complexities for you. If you wrap your sublists in <details> you can probably even get away without any JS at all in the rendered markup.

hey thats a super interesting idea, thanks. I guess I’m more of a Python programmer, and hadn’t really thought it through from that angle, so thats a real insight, cheers. I hadn’t considered this because i am guessing this is the way the current mitre navigator is done, and their current tech is r…

In my mind the only argument that would speak for an SVG layout would be that you can export it as an image, and arguably you can do the same by converting an HTML DOM to SVG. Trees by themselves aren’t difficult. It’s the nested layouts that make things tricky (propagate layout changes when dimens…

You’re a genius and a very cool person @mootari it is greatly appreciated. Its given me a lot to think about. Let me cogitate on it and come back to you. But thank you so much for helping me, you have great skill and i appreciate you spending time on me, cheers

Custom Tree - Combining Tidy and Indented Trees

Community Help

mootari September 30, 2023, 9:50am 6

Here’s a “basic” example (as in, I didn’t attempt to draw links, but I’d also argue that they might not be necessary): https://observablehq.com/d/a3fcb62fa23af22d

Topic		Replies	Views
Collapsible Indent Tree Show and Tell	1	708	July 6, 2022
Request : A d3 notebook for a tree hierarchy layed down on a timeline Community Help	0	64	July 11, 2024
A version of collapsible tree with label transform function Show and Tell	0	477	July 7, 2020
Rendering a directed graph on top of an HTML table, one node per row New To Observable	4	180	September 5, 2024
Basic question on design Community Help	2	487	October 23, 2018

Custom Tree - Combining Tidy and Indented Trees

Related topics