Building a Draggable Line Chart at Xandr

This summer I had a great experience as a Software Engineering Intern at Xandr. Despite being fully remote, I felt a great sense of community and an innovative culture. One of my tasks was to contribute to the company’s open source UI component library named lucid.

This component is for a more interactive UI on a piece of the Xandr platform. Specifically, it is a line chart where the points on the graph are draggable. To build the component, I utilized D3 (data driven documents) and React together. This can be a unique challenge as D3 and React both want control of the DOM (document object model) and they both have their own way of doing it.

This approach could be interesting to anybody who wants to utilize D3 and React (especially together) and making custom changes to data visualization tools.

My primary learning points were the distinction between how D3 handles interactive rendering versus how React handles rendering. D3 utilizes traditional manipulation of the DOM whereas React utilizes their virtual DOM. The traditional DOM is a tree data structure. Manipulating the DOM gives a lot of control but can be somewhat volatile and less performant. The React virtual DOM is a representation of the actual DOM. Every DOM object has a corresponding virtual DOM object. It is more lightweight and live re-renders happen via a diffing algorithm to see which components need updating.

Outside of this, there were key points to learn about which objects were in scope within a React class method. Starting with a pure D3 working example, the naive first attempt was “plugging in” what I had into a React component. This was much more involved than I anticipated, however, as certain objects were not in scope yet during React’s rendering lifecycle versus the objects that were in scope using pure D3.

This was a very positive learning experience, especially because it was unexpected, in a way. I was anticipating more of a learning experience with solely the functionality of D3. Knowing when to use which D3 methods, etc. I certainly still learned a lot about D3 functionality. However, this ended up being a deeper dive into consolidating React/D3 lifecycles, how function scope can change when utilizing different libraries, and the virtual DOM versus traditional DOM manipulation. Also, I learned about how arrow functions can have different context for the this keyword than a traditional javascript function, even if the contents are otherwise identical (you can check out more about this here).

React and D3 are both powerful and commonly used javascript libraries which address different challenges, and getting them to work nicely together is an interesting and worthwhile endeavor.

Try it for yourself!! Here is the GitHub repo for lucid and here is observable, a great place to sandbox some D3 code.