Integrating D3 in Qwik Apps
Tags: qwik, javascript, trees, d3js
Published: 2023-07-01 12:11:34

---
title: Integrating D3 in Qwik Apps
published: true
date: 2023-06-30 17:11:41 UTC
tags: qwik,javascript,trees,d3js
canonical_url: https://gilfink.medium.com/integrating-d3-in-qwik-apps-3e3a66c53960
---

In the past I wrote a bunch of posts that explained how to integrate D3 library and React. In this post I’ll do the same but this time I’ll show you how to integrate D3 in Qwik apps. We will build together a D3 tree and host it inside a basic Qwik app.

Are you ready?

> Things to do before you start adding the suggested code:

> 1. Create a new Qwik app using the **npm create qwik@latest** _._

> 2. Add a new route to your app, which will be used to show the D3 graph.

#### Creating a Qwik D3 Container Component

First you are going to add a new **TreeContainer** component. This component will be responsible to hold the D3 container, which will be used to create the graph.

Let’s look at the code:

{% gist https://gist.github.com/gilf/6a6360c5cfe7e4e1b7597cb7e3cf0227 %}

The **TreeContainer** is going to be the div that D3 will use to create the graph. You use a signal to reference the rendered **div** , so you will be able to use it’s in-memory Html element representation later on.   
Another thing that you can notice is the usage of **useVisibileTask$**. Since D3 runs only in the client, you should use the **useVisibileTask$** hook that makes sure that the code which is responsible to creates the graph runs after the component’s client rendering.

#### Building the Graph Generator

Once the container is ready it’s time to write the **createGraph** function.

Here is the full function code:

{% gist https://gist.github.com/gilf/2b27b23a25b69689200b96fdff52e71f %}

Let’s analyze the code to understand what is going on. We will start in the beginning with the **processSymbols** function.

{% gist https://gist.github.com/gilf/2fe3ef262aa35165d354d9882ce5a9f8 %}

Sometimes we have a model that doesn’t fit into the way the D3 graphs expect their data. The **processSymbols** function will transform the symbols array to the needed graph representation.

At the start of the **createGraph** function you set the d3 tree in-memory implementation. This is happening in these lines of code:

{% gist https://gist.github.com/gilf/f681251e6ea2d0a3681e64770baa2f33 %}

Then, you create the tree visual representation using D3 API that creates SVG elements such as paths, circles, text and more:

{% gist https://gist.github.com/gilf/184afea7da8e557997b05e5859abf3f6 %}

The data that is being used in the example is the following symbols array:

{% gist https://gist.github.com/gilf/d4d9fccb2cb79dbadae06edc1ecd6376 %}

After you wire everything you can run the app to see the following graph on your screen:

![](https://cdn-images-1.medium.com/max/1024/1*2HuxZMikq9nSJnO8CpQvLQ.png)
_Symbol Graph_

#### Summary

In the post I showed you how easy it is to integrate D3 in Qwik apps. The post guided you how to create the graph container and then how to create the graph by using D3 functionality.

You can take a look at the whole example in the [qwik-d3-example](https://github.com/gilf/qwik-d3-example) repository.