DEV Community: simbamkenya

Building spider chart with D3 JS and React js

simbamkenya — Fri, 01 Dec 2023 11:28:21 +0000

Introduction

A spider chart is a popular chart used in visualizing complex data. It is commonly used to visualize multivariate data in a two-dimensional manner. A spider chart's name comes from its appearance in displaying data in a circular grid.

One of the most prominent features of a spider chart is radial axes. The chart has multiple axes extending from the center. The provided data points are plotted along each axis and then drawn to connect all the provided data points.

Subtopics from the provided data tend to branch out from the center which resembles a spider. In our case, the spider chart will visualize two football players' attributes. It will focus on attributes such as pace, shooting, passing, dribbling, and physical scores falls between 0 and 1.

Technologies

The chart will be built using the following technologies

D3 JS (Data-Driven Documents)
React JS.

What we are going to learn

The project entails building a complex spider chart. The process is very involving and there is a lot to learn.

What is a spider chart
Creating radial axes from data attributes
Calculating angle in slices from data attributes
Calculating coordinates from angles
Drawing lines from D3 line
Adding interactivity to the spider chart
Adding legends to the spider chart

Set up the project

-Install React JS

npm create vite@latest spider -- --template react
cd spider
npm install
npm run dev

-Install D3 JS

npm install d3

Create a Radar component

Create a components folder and create a Radar component in the folder. The Radar component will be imported into the App component. The Radar component will return the SVG element.

The useRef will have chartRef which stores a reference to the SVG element. This way the component will have a reference to the DOM element. The SVG element will have ref with the value of containerRef.

The SVG element will have a viewBox attribute to the chart responsive on different device sizes. Code for drawing the chart will be contained in the useEffect hook to prevent unnecessary re-rendering.

import React, { useRef, useEffect } from 'react'

function Radar() {
......
//reference to DOM element (svg)
   const containerRef = useRef(null)

    const margin = { top: 20, right: 10, bottom: 60, left: 10 },
            width = 760 - margin.left - margin.right,
            height = 450 - margin.top - margin.bottom;
.....
useEffect(() => { 
//code for the chart goes in here
},[])
.......  
//DOM Element
  return (
    <svg  viewBox={`0 0 ${width + 100} ${height + 100}`} ref={containerRef} >
    </svg>
  )
}

export default Radar

Set up SVG element

We set up an SVG element, this is the canvas that D3 will paint the spider chart. We get access to the SVG element through useRef by containerRef.current. We import select from d3 js.

import { select } from 'd3';

        var svg = select(containerRef.current)
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
            .attr('fill', 'gray');

Bring in the data

Spider chart works on two-dimensional data. Our dataset has two objects representing two players and each object has five attributes. This chart makes it easy to compare various characteristics of players. The chart will have five axes to represent the five attributes of pace, shooting, dribbling, passing, and physical. The closed shape will touch on each scaled value of player attributes.

const data =  [
    {
      pace : 0.85,
      shooting : 0.92,
      passing : 0.91,
      dribbling: 0.95,
      physical: 0.65,
     },
     {
      pace : 0.89,
      shooting : 0.93,
      passing : 0.81,
      dribbling : 0.89,
      physical : 0.77,
     }
  ]

Setting up axes

The radial chart axes extend from the center. It will have five axes that represent the five attributes in the data. They include passing, dribbling, physical, shooting, and pace. The axes will extend from the center. When setting up these axes, we need a way to calculate angles for each axis. We need to convert coordinates to angles.

In this case center of the chart will be width/2 and height/2. Each axis is represented by an SVG line element. The value of x2in axis line is x + width/2 and the y2 will be y + height/2. Note that they take into account the center position of the chart. We will also require a capitalize helper function to capitalize axes labels.

   const capitalize = (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1)
    }

We set up radius and tick values for the chart. These values will help calculate coordinates for axes and draw ticks.

 const radius = 200;
 const ticks = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]

We will calculate the angle as a slice for each axis line and use the radius value of the chart to calculate the coordinates of each axis line. We will use (Math.PI / 2) to offset the angles by 90 degrees. This way angles start at the top of the circle or first quadrant.

const slice = (Math.PI / 2) + (2 * Math.PI * i / attributes.length)

We will revisit my trigonometry mathematics. These basics will help to calculate the x2 and y2 coordinates for each axis line.

Based on the trigonometry chart above when calculating for y coordinate, we are simply calculating for opposite (opp). Having an angle and hypotenuse (Hpy), we can calculate for y coordinate by multiplying sin θ with Hyp. Thus we get y coordinates by Math.sin(angle) * (len). Similarly, trigonometry dictates that the calculation of x coordinates utilizes Math.cos(angle) * (len).

We will use cordForAngle to calculate the coordinates for each axis representing the five attributes. We loop the five attributes, calculate coordinates, and draw an axis line.

  const cordForAngle = (angle, len) => {  
           let x=  Math.cos(angle) * (len);
           let y= Math.sin(angle) * (len);

          return {"x": x, "y": y};
        }

Placing labels on the five axes was challenging. Setting values for dy and dx was more experimental. I tweaked the values till they felt right.

const attributes = Object.keys(data[0])

 const radius = 200;
 const ticks = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]

  const cordForAngle = (angle, len) => {  
           let x=  Math.cos(angle) * (len);
           let y= Math.sin(angle) * (len);

          return {"x": x, "y": y};
        }

        //round axis
        for (var i = 0; i < attributes.length; i++) {
          const slice = (Math.PI / 2) + (2 * Math.PI * i / attributes.length)
          const key = attributes[i]

         //axis values
         const {x, y} = cordForAngle(slice, radius)

         svg.append('line')
          .attr('x2', x + width /2)
          .attr('y2', y + height/2)
          .attr('x1', width/2)
          .attr('y1', height/2)
          .attr('stroke', 'white')
          .attr('stroke-width', 1.5)
          .style('opacity', '0.1')

          svg.append('text')
          .attr('x', x + width/2)
          .attr('y', y + height/2)
          .text(capitalize(key))
          .style('text-anchor', d => (i === 0 ? 'end': i === 1 ? 'end': i=== 2 ? 'end':  i=== 2 ? 'end' : null))
          .attr('dx', d => (i === 0 ? '0.7em' : i === 1 ? '-0.7em'  : i === 2 ? '-0.5em': i === 3 ? '0.3em' : '0.6em'))
          .attr('dy', d => (i === 0 ? '1.3em': i === 1 ? '0.4em': i === 2 ? '-0.5em': i === 3 ? '-0.5em' : '0.4em'))
          .attr('fill', 'white')
        }

This is what we have at this stage:

Add ticks to the chart

D3 JS provides scaleLinear that we will use to position ticks and labels. These axes represent the five attributes presented in the data. They will share the circle, the 360% equally. Ticks in this chart will come in the form of circles. Axis labels are offset by 0.85 to prevent overlapping with the axis ticks. To set up the scale we will import scaleLiner from D3.
The radAxis scale will help to plot an object attribute. The scale will take values from 0.1 and 1.0 and map between 0 and the radius of the chart. This will be helpful when placing ticks and labels on the axis.

import { select, scaleLinear } from 'd3';

//radial scale
   const radAxis = scaleLinear()
          .domain([0.1, 1.0])
          .range([0, radius])

  //circle labels
      ticks.forEach(el => {
        svg.append('text')
        .attr('x', width/2)
        .attr('y', height/2 - radAxis(el) - 0.85)
        .text(el)
        .attr('fill', 'white')
        .attr('stroke', 'none')
        .attr('opacity', '0.5')
        .style('text-anchor', 'middle')
        .style('font-size', '0.825rem')
      })

In spider charts axis ticks are circles. The radial nature of the charts requires the use of circles as ticks. The radius of these values are scaled value of ticks.

      //circes levels
       ticks.forEach(el => {
        svg.append('circle')
          .attr('cx', width/2)
          .attr('cy', height/2)
          .attr('fill', 'none')
          .attr('stroke', 'gray')
          .attr('stroke-width', 1.0)
          .attr('r', radAxis(el))
       })

What we have at this point:

Drawing a closed shape

The chart will have a closed shape. This closed area allows the comparison of multiple entities in the provided dataset. Our dataset holds a series of two entities that represent the two players. Each player entity will have a closed shape area, that takes into account five variables based on player attributes.

Note that we are drawing a closed shape for each entity. Our data has two entities each represented by an object with five attributes. As a result, we will have two closed shapes, one for each object. This is the reason we are looping the data array. We use getCoordPath to create coordinates for each object or entity.

The closed shape on the chart touches the values player's attributes on each of the five axes. These axes will represent player attributes. These attributes include passing, dribbling, physical, shooting, and pace. For each axis such as pace, the player is rated from 0.1 to 1.0.

But what kind of magic do we use in the getCoordPath. There is no magic trust me, just well-thought-out logic. Each data point has five attributes: passing, dribbling, pace, physical, and shooting. We use the for loop to access each attribute's score and convert each score to coordinates for a closed shape path.

We use (Math.PI / 2) to offset the angles by 90 degrees. This way angles start at the top of the circle or first quadrant. To get the angle we use this logic, the five attributes get to share the entire circle 2 * Math.PI. Sharing of the entire 360 degrees is achieved by use a for loop index.

let angle = (Math.PI / 2) + (2 * Math.PI * i / attributes.length);

We then create a helper function to convert each angle into coordinates. The angle is calculated based on the number of attributes from the data set. The getCoordPath function receives a datapoint, accesses each attribute, scales it, and passes it to cordForAngle. Thus we get coordinates for each entry that is then used to plot the closed shape.


//converting data point to coordinates
  const getCoordPath = (dataPoint) => {
        let coord = [];
        for(let i=0; i<attributes.length; i++){
          let attr = attributes[i]
          let angle = (Math.PI / 2) + (2 * Math.PI * i / attributes.length);
          coord.push(cordForAngle(angle, radAxis(dataPoint[attr])))
        }
        return coord;
       }

A spider chart is characterized by an area around the center based on the coordinates on each axis score. D3 JS will convert coordates into an area. This is achieved by d3 line generator. On close inspection line generator requires a dataset with x and y coordinates. The enclosed areas by lines are filled with color.

Drawing the enclosed area will be based on the number of items in the dataset. In our case, we have two data points. we convert these data points into coordinates and then use a line generator. We will import line from D3. This helps to create a line generator.

import { select, scaleLinear, line } from 'd3';

       //line generator 
       let lineGen = line()
        .x(d => d.x)
        .y(d => d.y)

        //drawing path
        for(let i=0; i<data.length; i++ ){
          let d = data[i]
          const cord = getCoordPath(d)

        //spider chart 
        svg.append('path')
        .datum(cord)
        .attr('class', 'areapath')
        .attr("d",lineGen)
        .attr("stroke-width",1.5)
        .attr("stroke", 'none')
        .attr("fill", () => i === 0 ? '#FFC4DD': '#B4FF9F')
        .attr("opacity", 0.1)
        .attr('transform', `translate(${width/2}, ${height/2})`)
        }

What we have at this stage:

Adding interactivity

Interactivity in this chart will be achieved through CSS. We will add a hover effect on the path element with className of areapath. On a hover effect, the area path opacity will increase from 0.1 to 0.5.

body{
  background-color: #242424;
}
.areapath:hover{
  opacity: 0.5;
}

Add legends to the chart

The chart will need legends. We need a way to easily identify the enclosed areas by the spider chart. It should be easy to tell which attributes are for Messi and Cristiano. This is achieved by assigning different colors and setting up legends to identify data.

Appending legends to the chart
//legends
        svg.append("circle")
        .attr("cx",width/2 + 250)
        .attr("cy", height/2 + 150)
        .attr("r", 10)
        .style("fill", "#FFC4DD")
        .style("opacity", "0.5")

        svg.append("circle")
        .attr("cx", width/2 + 250)
        .attr("cy", height/2 + 180)
        .attr("r", 10)
        .style("fill", "#B4FF9F")
        .style("opacity", "0.7")

        svg.append('text')
        .attr('y', height/2 + 150)
        .attr('x', width/2 + 280)
        .html('Messi')
        .style('stroke', 'none')
        .style('fill', 'white')

        svg.append('text')
        .attr('y', height/2 + 185)
        .attr('x', width/2 + 280)
        .html('Cristiano')
        .style('stroke', 'none')
        .style('fill', 'white')

Finally, this is how the chart should look like:

Conclusion

A spider chart is an effective type of chart to visualize two-dimensional data. In our case, the spider chart will visualize two players' attributes. It will help outline the difference in abilities between these two players.

Live Chart: https://messivscristiano-spider-chart.netlify.app/

I am open to freelancing. Contact me: pharesmuruthi@gmail.com or Twitter

The final code on Radar component:

import React, { useRef, useEffect } from "react";
import { select, scaleLinear, line, extent } from "d3";

function Radar(props) {
  const containerRef = useRef(null);
  const margin = { top: 20, right: 10, bottom: 60, left: 10 },
    width = 760 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

  const data = [
    {
      pace: 0.85,
      shooting: 0.92,
      passing: 0.91,
      dribbling: 0.95,
      physical: 0.65,
    },
    {
      pace: 0.89,
      shooting: 0.93,
      passing: 0.81,
      dribbling: 0.89,
      physical: 0.77,
    },
  ];

  const capitalize = (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1);
  };



  useEffect(() => {
    var svg = select(containerRef.current)
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .attr("fill", "gray");

    const attributes = Object.keys(data[0]);

    const radius = 200;
    const ticks = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];

      //radial scale
  const radAxis = scaleLinear().domain([0.1, 1.0]).range([0, radius]);

    const cordForAngle = (angle, len) => {
      let x = Math.cos(angle) * len;
      let y = Math.sin(angle) * len;

      return { x: x, y: y };
    };

    for (var i = 0; i < attributes.length; i++) {
      const slice = Math.PI / 2 + (2 * Math.PI * i) / attributes.length;
      const key = attributes[i];

      //axis values
      const { x, y } = cordForAngle(slice, radius);

      svg
        .append("line")
        .attr("x2", x + width / 2)
        .attr("y2", y + height / 2)
        .attr("x1", width / 2)
        .attr("y1", height / 2)
        .attr("stroke", "white")
        .attr("stroke-width", 1.5)
        .style("opacity", "0.1");

      svg
        .append("text")
        .attr("x", x + width / 2)
        .attr("y", y + height / 2)
        .text(capitalize(key))
        .style("text-anchor", (d) =>
          i === 0
            ? "end"
            : i === 1
            ? "end"
            : i === 2
            ? "end"
            : i === 2
            ? "end"
            : null
        )
        .attr("dx", (d) =>
          i === 0
            ? "0.7em"
            : i === 1
            ? "-0.7em"
            : i === 2
            ? "-0.5em"
            : i === 3
            ? "0.3em"
            : "0.6em"
        )
        .attr("dy", (d) =>
          i === 0
            ? "1.3em"
            : i === 1
            ? "0.4em"
            : i === 2
            ? "-0.5em"
            : i === 3
            ? "-0.5em"
            : "0.4em"
        )
        .attr("fill", "white");
    }

    //circle labels
    ticks.forEach((el) => {
      svg
        .append("text")
        .attr("x", width / 2)
        .attr("y", height / 2 - radAxis(el) - 0.85)
        .text(el)
        .attr("fill", "white")
        .attr("stroke", "none")
        .attr("opacity", "0.5")
        .style("text-anchor", "middle")
        .style("font-size", "0.825rem");
    });

    //circes levels
    ticks.forEach((el) => {
      svg
        .append("circle")
        .attr("cx", width / 2)
        .attr("cy", height / 2)
        .attr("fill", "none")
        .attr("stroke", "gray")
        .attr("stroke-width", 1.0)
        .attr("r", radAxis(el));
    });

    //line generator
    let lineGen = line()
      .x((d) => d.x)
      .y((d) => d.y);

    //converting data point to coordinates
    const getCoordPath = (dataPoint) => {
      let coord = [];
      for (let i = 0; i < attributes.length; i++) {
        let attr = attributes[i];
        let angle = Math.PI / 2 + (2 * Math.PI * i) / attributes.length;
        coord.push(cordForAngle(angle, radAxis(dataPoint[attr])));
      }
      return coord;
    };

    //drawing path
    for (let i = 0; i < data.length; i++) {
      let d = data[i];
      const cord = getCoordPath(d);

      //spider chart
      svg
        .append("path")
        .datum(cord)
        .attr("class", "areapath")
        .attr("d", lineGen)
        .attr("stroke-width", 1.5)
        .attr("stroke", "none")
        .attr("fill", () => (i === 0 ? "#FFC4DD" : "#B4FF9F"))
        .attr("opacity", 0.1)
        .attr("transform", `translate(${width / 2}, ${height / 2})`)


//legends
        svg.append("circle")
        .attr("cx",width/2 + 250)
        .attr("cy", height/2 + 150)
        .attr("r", 10)
        .style("fill", "#FFC4DD")
        .style("opacity", "0.5")

        svg.append("circle")
        .attr("cx", width/2 + 250)
        .attr("cy", height/2 + 180)
        .attr("r", 10)
        .style("fill", "#B4FF9F")
        .style("opacity", "0.7")

        svg.append('text')
        .attr('y', height/2 + 150)
        .attr('x', width/2 + 280)
        .html('Messi')
        .style('stroke', 'none')
        .style('fill', 'white')

        svg.append('text')
        .attr('y', height/2 + 185)
        .attr('x', width/2 + 280)
        .html('Cristiano')
        .style('stroke', 'none')
        .style('fill', 'white')
    }
  }, []);

  return (
    <svg
      viewBox={`0 0 ${width} ${height}`}
      ref={containerRef}
    ></svg>
  );
}

export default Radar;

Why you should pick D3 js when building charts next time.

simbamkenya — Fri, 01 Dec 2023 10:06:28 +0000

Introduction
Visualization is an essential part of front-end development. There are many solutions to build these charts. However, I can argue that the D3 library is the best solution for achieving such tasks. When building simple line chart to complex charts like a racing bar chart, D3 have you sorted.

They say "Never as a butcher, if meat is tender", and as a D3 enthusiast, I can be biased on the topic. However, if you give me a few minutes I can persuade you on this one.

Data visualization with D3
The Internet has grown to be the most powerful tool for sharing information. All professionals have embraced this tool as a means to communicate with their clients and other stakeholders.

An economist can share their economic growth or inflation rate trend charts and journalists get to communicate the spread of a disease in a given geographic location through an interactive map. As a developer, when I am met with these scenarios, D3 js is always my tool of choice.

Pros of using D3

There are many benefits to choosing D3 when building various visualizations: They include
1. Builds many types of charts
D3 is a Swiss knife when it comes to visualizations. It handles simple and complex visualizations. The following charts can be built with D3. It is safe to say, that D3 has all your chart needs to be covered from a simple line chart to a spider chart.

Line, Area, and Bar Chart
Pie, Donut, and Bubble Chart
Scatter Plot
Heatmap and Treemap
Stacked Bar and Stacked Area Chart
Box Plot
Choropleth Map
Network Graph
Force-Directed Graph
Radar Chart
Sunburst Chart
Sankey Diagram

2. Highly customizable charts
D3 has a way of making its customers feel in control. One can design custom charts and implement them using the library. The library gives power to developers to control a visualization appearance and also visual elements' behavior. It can bring to life unique visualization to fit specific requirements. This helps to produce custom charts such as racing bar charts and others. The library makes use of SVG elements like path, line and rect to create complex charts.

3. Highly interactive charts
The library has features that support the creation of highly interactive charts. Users can interact with these charts through clicking, zooming, hovering, and dragging elements. Interactivity adds functionality to visualization and assists in communicating complex data more effectively.

4. Trust professionals
If there is still any doubt on why D3 is a tool for choice for building visualizations, then listen to Journalists from the New York Times and Reuters. They have embraced the library with the New York Times employing the creator of D3 to handle visualization for the organization.

Endorsement from these big organizations means the library will continue improving for the foreseeable future. Many developers are skeptical on embracing technologies as they fear it will fail in the future. In the case of D3, the library is on a positive trajectory and it is expected to continue growing and improving.

5. Huge community and Ecosystem
The library enjoys a huge, strong and active community. This allows developers to get examples, resources and tutorials with ease. It can be frustrating for developers when they get stuck on a problem on a given technology and lack resources or tutorials. D3 js enjoys a huge wealth of community support and documentation and this allows learners to embrace the library with ease.

6. Integration with web technologies
The library has built to work seamlessly with web technologies such as CSS, HTML and SVG. This has made the technology get integrated into web applications. Its seamless integration with web technologies has allowed charts from the library to work well with other libraries and front-end frameworks such as Svelte, React Js and Vue Js.

Cons of using D3 JS

The only downside of using D3 comes from a steep learning curve. First, the library requires a strong background in Javascript and other web technologies such as HTML and CSS. Individuals learning D3 without understanding these web technologies end up with constant frustrations.

Conclusion

D3 JS is the best solution for creating custom visualization on the website. The library can build a wide range of charts and has been embraced by journalists and economists. The library is built to work seamlessly with web technologies and has a huge and active community.

What is D3 js layout?

simbamkenya — Fri, 03 Nov 2023 07:07:08 +0000

Introduction

The respect and adoration around the D3 library can be attributed to its ability to build complex charts such as treemaps and edge bundling. When clients need one of those breathtaking charts built, more often they pick D3. Why is this the case? well, the library arsenals have essential tools to build both basic and complex charts.
First, we need to consider how the library works. D3 takes map data to visual marks. For example, when drawing a line chart, D3 will take an array of objects and map a line in a Scalable Vector Graphic (SVG). For complex charts like pie charts and stacked bar charts, the process that requires mapping visual marks is more complicated. To solve this problem D3 brings out D3 layouts.

D3 layout

D3 layouts are a collection of methods used to create specific charts. These methods by themselves do not output any visual element like lines. Contrarily, layout methods transform data into a more convenient form in the creation of a specific chart.
For example, when working with a pie chart, the d3.pie() layout method will take a normal javascript object and add properties like endAngle and startAngle.

//d3.pie Layout Transformation of Data
//input data
const data = [1, 1];

//pie layout method
const pieGenerator = d3.pie();

//transformation of data
const arcs = pieGenerator(data);

//output data
[
  {"data":  1, "value":  1, "index": 6, "startAngle": 6.050474740247008, "endAngle": 6.166830023713296, "padAngle": 0},
  {"data":  1, "value":  1, "index": 7, "startAngle": 6.166830023713296, "endAngle": 6.283185307179584, "padAngle": 0},
]

The output data is now suited for generating arcs which gives a pie chart. This transformation was specifically intended for arcs generation which is an effective illustration of the importance of layout methods in visualization.

Types of D3 layouts

D3 comes with a number of layouts to cater to various types of visualizations. For each complex chart, d3 usually has a layout method for transforming input data to fit the specific needs of a given chart. These charts make use of different elements such as rects, circles, and lines. Layout methods are aware of these specific needs for these output elements. The most common D3 layout methods include:

1. Tree layout - Handles visualization with tree-like structure.
2. Pack layout – Handles circle packing charts
3. Pie layout – Handle pie charts
4. Force layout - Handles network visualizations
5. Chord layout – Handles network flow charts
6. Stack layout -Handldles stacked area and bar charts

A close look at pack layout

I have picked this layout as an example of D3 layouts. The layout works with hierarchical data which is evident. The layout method helps transform data to fit the nesting of circles.

Pack chart

Input data

// Sample data for the bubble chart
        const data = {
            children: [
                { name: "Savings", value: 40000 },
                { name: "Rent", value: 15000 },
                { name: "Shopping", value: 20000 },
                { name: "Taxes", value: 10000 }
            ]
        };

Output data

Transformation of data
Passing data, which in our case has to go through d3.hierachy() to generate the root node. The pack(root) layout method returns objects with transformed data


 // Create a pack layout and set its size
        const pack = d3.pack()
            .size([500, 500])
            .padding(10);

        // Assign the data to the pack layout
        const root = d3.hierarchy(data)
            .sum(d => d.value);

        // Generate the pack layout and get the nodes
        const nodes = pack(root).descendants();

We use the d3.hierarchy to calculate the root node. The pack layout methods take a javascript object and add new attributes such as x, y, and r.

1. x - x coordinate for the circle's center
2. y - y coordinate for the circle's center
3. r - radius of the circle
This transformation allows the drawing of circle elements based on input data.

Conclusion
It is clear that D3 layout methods help in data transformation. They transform data to fit a specific type of visualization. These layout methods include d3.pie() and d3.pack(). Layout methods introduce new properties that help build custom charts, such as d3.pack() introducing radius property to draw packed circles.

What is D3 js

simbamkenya — Wed, 25 Oct 2023 07:35:59 +0000

Introduction

When you browse online and see cool, highly interactive, and aesthetically pleasing charts, probably those charts are powered by D3 Js. Charts were built way before the internet came along. The first chart was made in 1644 by Florent Van Langren. He was an astronomer in an attempt to represent statistical data visually.

In this age of the internet, the need to represent data on web browsers is essential. Visual representation of complex data is achieved by using javascript libraries like D3 Js.

D3 js library

The term “D3” stands for Data-Driven Documents. The library creates dynamic and interactive charts and renders them on Scalable Vector Graphics (SVG). It was developed by Mike Bostock in 2011. Over the years the library has grown from a single library to a collection of smaller and modular libraries that developers can use independently.

These smaller libraries can be categorized into:

1.Data manipulation
This category deals with preparing and manipulating data to fit a desired format before feeding it to various d3 functions. Data manipulation can include handling arrays, fetching data, and formatting. Some of these data manipulation utilities includes d3-array d3-dsv d3-fetch d3-format d3-random d3-time d3-time-format

2.Visualization utilities
Charts have common elements such as axes and scales. The library caters to these needs by providing utility functions to handle the creation of these chart elements. For example d3-axis d3-chord d3-color d3-interpolate d3-contour d3-delaunay d3-force d3-geo d3-hierarchy d3-path d3-polygon d3-quadtree d3-scale d3-scale-chromatic d3-selection d3-shape

3.Animation
Animations in d3 come with utilities such as d3-ease d3-timer and d3-transition. They ensure transitions are smooth when interacting with a chart.

4.Interactive
D3 js charts implement interactiveness through the library utilities such as d3-brush d3-dispatch d3-drag d3-zoom.This is achieved through tooltips, hover-effects etc.

Why is d3 js so popular

There is a multitude of libraries that handle the creation of charts over the web. D3 Js belongs to the elite part of this group. The library is well-loved and revered by data scientists, and data journalists among other professionals.

1. Highly customizable charts
D3 allows users to build chart elements such as scales to their liking. Highly skilled d3 developers can build custom charts such as racing bar charts to knowledge charts. Other libraries such as Highcharts give complete charts with little chances for customization.

2. Highly interactive charts
When working with complex data, interactivity improves data presentation compared to static charts. Users have an opportunity to discover correlations and trends that would be hidden otherwise.

3. Gives data-driven charts
D3 js charts are data-driven. The library manipulates DOM elements based on provided data. This allows users to track statistical changes on a given dataset.

How does it work

D3 JS takes in data and outputs a chart. The library has functions that take in data and give end users a chart with meaningful insights. For example, if you feed d3 js with the following data it will output a pie chart on SVG or Canvas.

D3 js takes statistical data and mirrors it on SVG elements. For example, D3 js will take the population size of a country, use a scale, and output it as an SVG rect element. Changing population size can increase the width or height attribute of the rect element. The end users will note population trends by observing these rect attributes.

Input data

// Sample data for the pie chart
    const data = [
      { label: "Apples", value: 30 },
      { label: "Pineapples", value: 45 },
      { label: "Mangoes", value: 25 }
    ];

Output (Pie chart)

Transformation of data to charts

This is where the magic happens, D3 takes data and manipulates DOM elements to give chart information of SVG or Canvas. This gives power and allows developers to build custom charts.

Data input

In this simple chart, data is presented as a simple array. In real-world applications, data comes from APIs, CSV, and JSON files. D3 has utilities such as d3.fetch d3.csv and d3.json.

    // Sample data for the pie chart
    const data = [
      { label: "Apples", value: 30 },
      { label: "Pineapples", value: 45 },
      { label: "Mangoes", value: 25 }
    ];

DOM element

Through d3.select, d3 picks a DOM element to hook the chart.

<div id="pie-chart"></div>

Here we set the chart dimensions and select the DOM element for the chart.

    // Set up the dimensions and radius for the pie chart
    const width = 400;
    const height = 400;
    const radius = Math.min(width, height) / 2;

    // Create a color scale
    const color = d3.scaleOrdinal(d3.schemeCategory10);

    // Set up the SVG container
    const svg = d3.select("#pie-chart")
                .append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Bringing in data

After setting the stage by selecting the DOM element and adding dimensions, the next stage is bringing in the data for d3 to generate a given chart.
D3 has functions that turn data into SVG elements such as paths and lines.

    // Set up the pie chart layout
    const pie = d3.pie()
                .value(function(d) { return d.value; });

    // Generate the arcs for the pie chart
    const arcs = pie(data);

    // Draw the pie slices
    const path = d3.arc()
                 .outerRadius(radius - 10)
                 .innerRadius(0);

    const arc = svg.selectAll(".arc")
                 .data(arcs)
                 .enter()
                 .append("g")
                 .attr("class", "arc");

    arc.append("path")
       .attr("d", path)
       .attr("fill", function(d) { return color(d.data.label); });

    // Add labels to the pie slices
    arc.append("text")
       .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
       .attr("dy", ".35em")
       .text(function(d) { return d.data.label; })
       .style('fill', 'white');

There is along going on the above code and I will just highlight the most significant parts.

d3.pie allows d3 to calculate necessary angles based on provided data. All data provided to this function will share the 360-degree (full-circle). This function allocates angles for various pie segments.
Feeding a simple object will transform it. For example

//simple object
{ label: "Apples", value: 30 }

Transformed object

d3.arcutlity returns path generator functions for drawing a pie chart. It makes use of startAngle and endAngle provided by d3.pie.

Drawing the chart
All this process aims at generating a path which is an SVG element.

   const arc = svg.selectAll(".arc")
                 .data(arcs)
                 .enter()
                 .append("g")
                 .attr("class", "arc");

    arc.append("path")
       .attr("d", path)
       .attr("fill", function(d) { return color(d.data.label); });

Final code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3.js Pie Chart</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <style>
    .slice {
      stroke: #fff;
      stroke-width: 2px;
    }
  </style>
</head>
<body>
  <div id="pie-chart"></div>

  <script>
    // Sample data for the pie chart
    const data = [
      { label: "Apples", value: 30 },
      { label: "Pineapples", value: 45 },
      { label: "Mangoes", value: 25 }
    ];

    // Set up the dimensions and radius for the pie chart
    const width = 400;
    const height = 400;
    const radius = Math.min(width, height) / 2;

    // Create a color scale
    const color = d3.scaleOrdinal(d3.schemeCategory10);

    // Set up the SVG container
    const svg = d3.select("#pie-chart")
                .append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    // Set up the pie chart layout
    const pie = d3.pie()
                .value(function(d) { return d.value; });

    // Generate the arcs for the pie chart
    const arcs = pie(data);
    console.log(arcs)

    // Draw the pie slices
    const path = d3.arc()
                 .outerRadius(radius - 10)
                 .innerRadius(0);

    const arc = svg.selectAll(".arc")
                 .data(arcs)
                 .enter()
                 .append("g")
                 .attr("class", "arc");

    arc.append("path")
       .attr("d", path)
       .attr("fill", function(d) { return color(d.data.label); });

    // Add labels to the pie slices
    arc.append("text")
       .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
       .attr("dy", ".35em")
       .text(function(d) { return d.data.label; })
       .style('fill', 'white');
  </script>
</body>
</html>

D3 js application

1. Interactive dashboards
D3 works with other web technologies such as frontend frameworks like React JS to create interactive dashboards. Business organizations leverage the power of D3 to show users crucial performance indicators and other metrics to end users.

2. Geospatial data visualization
D3 has proven a useful tool in creating interactive maps and visualizing geospatial data. It helps create maps and create interactive capacity allowing users to understand geospatial data with ease.

3. Data journalism
The power is used by data journalists to create interactive, data-driven stories. Media houses such as the New York Times and Reuters utilized D3 to create interactive visualizations to tell stories based on collected information.

conclusion

D3 is a powerful tool for visualizing data on the web. In situations where you need highly interactive charts on the web, D3 is the right tool. It has common building blocks for various charts and has high flexibility.

Thank you for your time.

How to build a Radial Bar Chart with D3 JS and React JS

simbamkenya — Tue, 17 Oct 2023 10:05:33 +0000

Technologies

D3 JS is an amazing JavaScript library for building dynamic and interactive data visualization charts on the web. The library works seamlessly with Scalable Vector Graphic (SVG) to render charts. SVG is a file format based on vector image. It allows developers to define two-dimensional graphics and supports animation and interactivity. SVG can be styled with CSS to create aesthetically pleasing charts.

The project will utilize React js to handle rendering. React is an open-source JavaScript library. It is used to build user interfaces based on components. The library will be crucial in building various UI elements in this chart.

What you will learn

Working with d3.arc()
Building a dynamic chart
Styling SVG chart

How to build a project with D3 JS

This project will entail building a complex chart using D3 JS and React JS. Specifically, we will be building a radial bar chart which is a common chart on the dashboard for visualizing KPI's indicators as a percentage.

In this project, I opted for a slider with a range of 0 to 100. The slider will simulate a dynamic data source. This is an imitation of a sales dashboard taking data from a database and presenting a conversion rate indicator to the end user.
React JS will manage the state of the chart. It will monitor changes on the slider and update the data being fed to the chart. The useState hook will come in handy in managing state.

The radial chart will have the following elements:
1. Two arcs
2. Text labels
3. Slider to stimulate dynamic data

One arc will act as the background the other as the foreground. The background arc will help visualize the remaining part that is not covered by the first arc. It gives an illusion of background color on the path that the main arc of the chart will follow.

Setting up the project

Creating react app

npm create vite@latest radialbarchart -- --template react

Navigate to the folder with the project

cd radialbarchart

Install dependencies (D3 js library in this case)

npm install d3

Run the project using the command

npm run dev

Figure out data

D3 charts are data-driven. Visualization of data, make comprehension of trends and patterns from users.
In our case, input values will come from the slider. The slider will simulate value changes based on the provided range.
React Js will keep the chart and slider value in sync. This is achieved by the useState hook to maintain the state.

Managing state

import { useEffect, useState, useRef } from react';

const [sliderValue, setSliderValue] = useState(80)

function handleChange(e){
      setSliderValue(e.target.value)
}

HTML Slider (input data)

  <div>
       <div>{sliderValue}</div>
        <div className="slidecontainer">
          <input 
          type="range" 
          min="0" 
          max="100"  
          value={sliderValue}  
          onChange={handleChange}/>
        </div>
    </div>

Handling re-rendering
The code for drawing the entire chart will be encapsulated in a single function named drawChart. The useEffect hook will help re-render that chart every time the sliderValue changes.

useEffect(() => {
    drawChart(sliderValue)
}, [sliderValue])

function drawChart(value){
  //code for drawing chart
}

Drawing and setting up SVG element

The height and width values will be used to set the size of the viewBox attribute on the SVG.
Tau represents the whole arc, a complete arc is 360 degrees which is equivalent to 2 * Math.PI
maxValue will prove useful when converting values to percentages

function drawChart(value){
     const height = 350, width=960;
     const tau = 2 * Math.PI;
     const maxValue = 100;
     const slice = value/maxValue

   //other code for drawing chart will go here
}

Prepare DOM element
The next step is selecting the element that we will hook our charts elements. React js provides useRef hook to attach the SVG element on the div. Note that we set height and width as 100% and make use of the viewBox property. This ensures that our SVG chart is responsive to different screen sizes.
We attach a g element which is equivalent to a div in HTML to group elements together. This way it is easier to move a group of elements on an SVG element. The g element is transformed to the center of the SVG element by the transform property.

const containerRef = useRef(null)

  <div className='container'>
    <div ref={containerRef}></div>
  <di>

select("svg").remove() 
const svg = select(containerRef.current)
           .append('svg')
           .attr('height', '60%')
           .attr('width', '100%')
           .attr("viewBox", `0 0 ${width} ${height}`)
           .append("g")
           .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

Before drawing the SVG chart, it is essential to remove any SVG element from the previous render. This is achieved by remove() function.

Drawing arcs

An arc is a curve, but in mathematics and computing an arc is a section of a circle. D3 provides utility functions to draw arcs commonly known as arc generators.
In this case, we have an arc generator called arcGen. It will handle the creation of arcs. The arcGen generates an SVG path based on the provided data value.
D3 library helps a developer make complex shapes through shape generators. The d3.arc() returns a function that generates arcs based on provided end angle. It takes input value from the slider and updates the chart.

const  innerRadius= 90, outerRadius= 120, 
startAngle= 0, cornerRadius= 40;

const arcGen = arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .startAngle(startAngle)
    .cornerRadius(cornerRadius)

This radial chart has two arcs namely arc1 and foreground.

   const arc1 = svg.append("path")
          .datum({endAngle: tau})
          .style("fill", "#ddd")
          .attr("d", arcGen);

   const foreground = svg.append("path")
          .datum({endAngle: slice * tau})
          .attr('fill', '#F57B21')
          .attr("d", arcGen);

The arc1 arc has a very light shade of gray and takes an object endAngle of 2*Math.PI.
The foreground arc is proportional to the input value of sales. Providing a value of 100% from the slider will be a donut chart. The foreground arc will have an orange color which is easily visible to users.

Adding text labels on the chart

Labels make charts easier to understand.

  svg.append("text")
          .attr("text-anchor", "middle")
          .text(`${value}%`)
          .style('font-size', '3.2em')
          .style('fill', '#A9BF51');

The text value is attached to the SVG element and styled using CSS. The text value also pumped up to have font-size of 3.2em and a color value of '#A9BF51'.
CSS style text-anchor with the value of middle will center text value horizontally. The chart will have text in the arc to show the value visualized by the arc.

   svg.append("text")
      .attr("text-anchor", "middle")
      .text("Sales")
      .attr('dy', '1.45em')
      .style('font-size', '1.75em');

The label value is moved horizontally using dy attribute by 1.45em and gets a smaller font-sizeof 1.75em.

Final Code

Code: CODE
Live chart: LIVE CHART

Here is the final code:

import { select, arc} from 'd3'
import './App.css';
import { useEffect, useState, useRef } from 'react';

function App() {
  const [sliderValue, setSliderValue] = useState(80)
  const containerRef = useRef(null)

  useEffect(() => {
    drawChart(sliderValue)
  }, [sliderValue])

    function handleChange(e){
      setSliderValue(e.target.value)
    }

    function drawChart(value){
      const height = 350, width=960;
      const tau = 2 * Math.PI;
      const maxValue = 100;
      const slice = value/maxValue
      const  innerRadius= 90, outerRadius= 120, startAngle= 0, cornerRadius= 40;

      select("svg").remove()

      const svg = select(containerRef.current)
                  .append('svg')
                  .attr('height', '60%')
                  .attr('width', '100%')
                  .attr("viewBox", `0 0 ${width} ${height}`)
                  .append("g")
                  .attr("transform", "translate(" + width / 2
                  + "," + height / 2 + ")")

        // An arc will be created
      const arcGen = arc()
          .innerRadius(innerRadius)
          .outerRadius(outerRadius)
          .startAngle(startAngle)
          .cornerRadius(cornerRadius)

      const arc1 = svg.append("path")
          .datum({endAngle: tau})
          .style("fill", "#ddd")
          .attr("d", arcGen);


      const foreground = svg.append("path")
          .datum({endAngle: slice * tau})
          .attr('fill', '#F57B21')
          .attr("d", arcGen);

      svg.append("text")
          .attr("text-anchor", "middle")
          .text(`${value}%`)
          .style('font-size', '3.2em')
          .style('fill', '#A9BF51');

      svg.append("text")
          .attr("text-anchor", "middle")
          .text("Sales")
          .attr('dy', '1.45em')
          .style('font-size', '1.75em');
      }


  return (
    <div className='container'>
        <div ref={containerRef}></div>
        <div className="slidecontainer"> 
          <div className='salesfigure'>{sliderValue}</div>
          <input 
            type="range" 
            min="0"
            max="100" 
            value={sliderValue} 
            onChange={handleChange}
          />
        </div>
    </div>
  );
}

export default App;

Conclusion

A radial chart is an interesting and useful chart. D3 js utilized d3.arc() to create the charts. This is a complex chart that is broken down into three parts, foreground, background, and slider.

I am open to freelancing work on D3 and data visualization. Contact me on X simbamkenya

Thank you for your time

HNGi8 x I4G internship program with https://zuri.team

simbamkenya — Mon, 16 Aug 2021 12:53:22 +0000

i am excited to join https://zuri.team internship programme that will run for about three months. within these three months i hope to go through successfully in their 8stages process.
i am a frontend developer who works with React js and javascript.
my goals

building more project with other developers around Africa.
Gaining more experience on building real world applications.
building may skillset as i met new friends around the continent There are a number of tutorials that i have made use of in my learning process
Figma tutorial https://www.youtube.com/watch?v=Gu1so3pz4bA Git tutorial https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners
javascript tutorial https://www.sohamkamani.com/blog/2016/04/30/oops-in-js/