How can I move a Grapviz node to the left?

Question

I'm making an application on Sreamlit, which should visualize Gradient Descent. I have this code:

graph= graphviz.Digraph(graph_attr={'rankdir':'LR'})

#black arrows

graph.edge(f'3', '12 ', label='3*4')
graph.edge(f'4', '12 ', label='4*3')
graph.edge('12 ', '12', label='max(0,12)')
graph.edge('12', '60', label='12*5')
graph.edge('5', '60', label='5*12')
graph.edge('60', '1600', label='(100 - 60)**2')

#red arrows

graph.edge('1600', '60', label='2*(100 - 60)=80', color='red')
graph.edge('60', '12', label='5*80=400', color='red',)
graph.edge('60', '5', label='12*80=960', color='red')
graph.edge('12', '12 ', label='1*400=400', color='red')
graph.edge('12 ', '3', label='400*4=1600', color='red')
graph.edge('12 ', '4', label='400*3=1200', color='red')

st.graphviz_chart(graph)

Which produces this graph:

I want all the black arrows to point to the right and all the red arrows to point to the left. For that I would need to move node 12to4 and 60to5 to the left. I tried graph.edge(... pos="-1,0") but that did not help.

Does anyone have any suggestions? Would really appriciate it.

Answer 1

[This answer is at the Graphviz-level, not specific to Streamlit.]
I don't remember a generic way to force edges to be directional, however there are several ways to "strongly encourage" directionality.

• rank=same (https://graphviz.org/docs/attrs/rank/) to force nodes to the same rank
• TBbalance=min (https://graphviz.org/docs/attrs/TBbalance/) to force nodes that could be positioned to multiple ranks toward min or max rank
• setting minlen for some of the edges to establish "openings" for other nodes

I suggest setting nodes 3 & 4 on the same rank and 5 & 12 on the same rank.
In the Graphviz language this would be:

{rank=same 3 4}
{rank=same 5 12}