Building a Draggable Line Chart at Xandr

AndreEPaul
Oct 16 · 3 min read

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.

Image for post
Image for post

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).

Image for post
Image for post

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.

Xandr-Tech

Our latest thoughts, challenges, triumphs, try-again’s…

AndreEPaul

Written by

Xandr-Tech

Our latest thoughts, challenges, triumphs, try-again’s, most snarky and profound commit messages. Our proudest achievements, deepest darkest technical debt regrets (just kidding, maybe). All the humbling yet informative things you learn when you try to do things with computers.

AndreEPaul

Written by

Xandr-Tech

Our latest thoughts, challenges, triumphs, try-again’s, most snarky and profound commit messages. Our proudest achievements, deepest darkest technical debt regrets (just kidding, maybe). All the humbling yet informative things you learn when you try to do things with computers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store