Integrating Complex D3 Visualizations into Vue


Creating Vue/D3 components
On a recent project, we were tasked with integrating a client's legacy D3 visualizations into our new, modernized user interface built on Vue.js. D3 is a powerful JavaScript library used for manipulating documents based on data. D3 operates on common tools - HTML, SVG, and CSS - and is therefore compatible with a variety of frameworks and architectures. Here, we discuss the pattern we used for integrating complex D3 visualizations into Vue.

The below codepen will serve as an example for the rest of the post. (Note that this example makes use of Vuetify, a component/CSS framework, and our preferred UI toolkit for Vue.)

 
 

The display consists of a simple graph with a button to update the values. Click on the button, and a new graph renders near-instantly (the power of Vue). Let's delve into how this is happening.

First we create our Vue instance at the bottom of the javascript (Babel/JS) tab. (The synatx we are using requires us to instantiate and register the components before the instance; thus, starting at the bottom.) For this simple example, the app will serve as the parent component of our two other components: the visualization and the update button. When building out larger applications, you would most likely make these separate components.

The parent component contains both the data itself ('dataModel') and the method by which we change the data ('updateData'). This keeps the information in sync across components. For our more complex visuals, we may have a large number of different filters that will call an API and bring down different data to display; in this example, we just have a "randomize" button.

Scrolling back up to the top, you will find the 'button-component'. It receives the 'updateData' function as a prop passed down from its parent; when the user clicks the button, it will randomize the values in our 'dataModel'.

Just below that, you will see at last the 'svg-component'. The template seems simple - a div wrapping an svg with the id of "visualization." The visualization itself is created through the 'drawSVG' method, which contains all the d3 code that creates the graph. In a real world scenario, this would be our clients' legacy code with some minimal tweaks for implementation purposes, or methods that we write ourselves for a new or improved visualization.

Using the "mounted" Vue lifecycle hook, we ensure the svg-component draws for the first time when the component is mounted. Note that 'mounted' is the earliest hook on which we can call drawSVG - any earlier (on created, for example), and the DOM will not be ready to be manipulated by d3. We then use Vue's ability to "watch" changes to the dataModel, so that the svg-component redraws whenever it receives new values.

This is a high-level overview of how we approach these implementations. The beauty of Vue is that there are many ways to approach each problem. Do you have any experience in creating and orchestrating D3 visualizations with Vue? Let us know in the comments.

 

Want to know more about Vuetify, our preferred UI toolkit for Vue? Read Integrating a UI Toolkit Into Your Application or contact us for more info!

 

Contact Us

Topics: UI, Design Thinking

Top