Tengo esta matriz (de conexiones de ID a otra):

 const connectionsArr = [ { sourceId: 1, targetId: 2 }, { sourceId: 1, targetId: 9 }, { sourceId: 9, targetId: 3 }, { sourceId: 3, targetId: 5 }, { sourceId: 3, targetId: 7 }, { sourceId: 5, targetId: 6 }, { sourceId: 6, targetId: 10 }, { sourceId: 11, targetId: 12 } ];

A partir de esta matriz, creé una matriz de "árboles" con niveles para cada ID:

 [ { "id": 1, "children": [ { "id": 2, "children": [], "level": 1 }, { "id": 9, "children": [ { "id": 3, "children": [ { "id": 5, "children": [ { "id": 6, "children": [ { "id": 10, "children": [], "level": 5 } ], "level": 4 } ], "level": 3 }, { "id": 7, "children": [], "level": 3 } ], "level": 2 } ], "level": 1 } ], "level": 0 }, { "id": 11, "children": [ { "id": 12, "children": [], "level": 1 } ], "level": 0 } ]

¿Cómo puedo configurar las coordenadas (x, y) para cada identificación y las coordenadas serán jerárquicas y, finalmente, si decido ponerlas en una imagen/lienzo, debería verse así:

descripción de la imagen aquí

No quiero usar una biblioteca externa en absoluto.

Gracias de antemano a los que ayudaron y ayudarán.