Ideal web framework for d3

Hi guys,

I’m new here and still getting my to grips with everything but I’m loving all the stuff I’m seeing.

I want to create a fairly simple news app including graphs built from d3. I had learnt the basics of React but have read that it isn’t entirely compatible with d3. I didn’t completely understand, but something to do with both libraries trying to control the DOM.

Does anyone have any experience with this? Can anyone recommend another framework that might be a better fit?

Any help hugely appreciated (especially if you can explain like I am 5).


1 Like

Hi @theojolliffe, and welcome to the community!

I hope someone else will respond here, as I am a novice user and I have never gotten my head around different ‘frameworks’ (or what that even means).

… but to share my understanding: although often referred to as a framework, react.js is a library that allows you to build out (reusable) web components that you would use in an app. Part of its appeal is that it can help to easily manipulate the ‘document object model’ (DOM), or the elements of HTML that play together to represent your app on the web. Maybe this what the point of what you are reading: both react and d3.js will manipulate the DOM. Since react.js works with a ‘virtual DOM’, maybe this limits how D3.js can interact with the elements it creates? I really don’t know…

Very likely you can also use react.js together with d3.js without interference–if you’re careful. At least, there are several web tutorials about how one accomplishes this. There are also several here on Observable:

My understanding is that you don’t need react.js (or any framework) to make a web app at all (though if you know what you’re doing they can save you some time). For this reason, I use Observable to help me prototype a data visualization, and then I embed it directly in my HTML documents. This approach takes me pretty far… without knowing more than the very basics.

Hope this helps! And I hope others respond here to better clarify potential DOM conflicts.

1 Like

Thanks @aaronkyle that is very helpful I will certainly consult those sources as I am move forward.

I think now I’m getting used to observable it is becoming apparent that it doesn’t make a huge difference where I am embedding my charts. My fear with react was that if my chart wasn’t working I would never know whether it was because of this DOM conflict. But now I realise I can build that charts out entirely within observable and then send to my site.

Thanks a lot.

I made this tool to help embed Observable notebooks in React a while back. It might be useful either as is or as inspiration:

1 Like