As a React/D3/Typescript beginner, I have mixed feelings about how I built the following demo, which takes a randomized array in Python that changes at every reload, passes it to the React component which builds a D3 chart over it with transitions :
It’s mostly https://medium.com/@jeffbutsch/using-d3-in-react-with-hooks-4a6c61f1d102 with a slice of https://wattenberger.com/blog/react-and-d3. I like the React Streamlit class since it handles all the render events / data fetch for me, but from reading the latter article, I’m under the impression that it’s preferable if D3 does not mutate the DOM through React ref, so either like in the article I declaratively rebuild animations/transitions (through react-spring for example) and don’t use the D3 functions which mutate DOM, or drop the React Streamlit class in favor of the plain TS approach.
There are plenty other articles which debate over this D3 integration in React, so I guess my main questions are :
- how would you do D3 in Streamlit ?
- do the pros for using React Streamlit class outweigh the cons of having D3 clash with React ?