DEV Community is a community of 888,741 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

John Dears

Posted on • Updated on

Creating Composite Node of a Graph using D3.js

Lately I have been using D3 for visualizing data for a React project and it got my attention for a while. I was especially interested as to the scope of this very powerful tool that has a great problem solving ability range related to any kind of data visualization.
It gives you a feeling that you can do ANYTHING. Okay, lets talk about it.

What is D3.js ?

D3.js is a javascript library used for visualizing data. It is very powerful with the combination of SVG (Support Vector Graphics) and HTML.
Now it depends on the creativity of the developer using it to actually visualize it in the most beautiful way.

Since this is data driven , d3.js works on your pure data and transforms it in a graphical way. While applying d3.js, you will doing lot of CSS, at the same time solving some Mathematical Coordinate Geometry problems. For instance, applying Pythagorean theorem, finding distance between two coordinates `(x1, y1)` and `(x2, y2)` on a graph etc.

This article especially focuses on creating a complex node of a graph. A Complex node refers to a node which will have a lot of elements or information attached to it, instead of just an empty circle.

Why v5 version especially ?

You will find so many example snippets and gists especially on bl.ocks.org or stackoverflow for creating graphs or trees with `v3` version but not many on the `v5` version.

Pre-requisite

Html, CSS , Javascript, Coordinate Geometry.

Let's Start

We will be writing a simple working script for creating a complex SVG node of a graph.
First, you need to include the following `<script>` inside your html `<body>` for using d3 `v5` library.

Canvas and data container element

Specify the canvas’s `width` and `height` where all the SVG elements will reside. We then call `d3.select()` on `body` element, appending `svg` to it, and specifying properties like `width` and `height` We currently have our json data as `nodes` with all params that we require to visualize.

Lets append new element `g` into `svg` variable (canvas) and insert node data into it, indexing with `id`.

Rectangular node

Now we append `rect` element into our `svg` with `(x,y)` coordinates as `(0,0)`.

Now this gets tricky here, as we now have our basic node ready and would like to place many more elements inside with reference to the rectangular node and not canvas. One of the ways for doing that is to get coordinates using `getBBox()`.

Image element

Now that we have placement coordinates of this box, lets place things inside.
Say I want to place a logo here available. It's simple.

As you can see we have tweaked `X` and `Y` a little bit depending on where we would like it to be. I wanted it to be in middle, with a little bit of tab (`10`) from left.

Text element

Now, we want some text. We use the node data and access it using keys. And again, append `text` to `svg` like below:

Circular counter element

Now what if I want to insert a circle inside the rectangular node and maintain a text inside it. We do it as follows:

and text

At last simply merge all the elements into one.

Wondering how does it look like while inspecting. See for yourself.

Discussion (1)

John Dears

Cool right!!! You can find the entire code here

Happy learning!!!

You can contact me on LinkedIn