How to Build Interactive Data Vizualizations in React with D3.js

Home
How to Build Interactive Data Vizualizations in React with D3.js

How to Build Interactive Data Vizualizations in React with D3.js

October 21, 2022

Data vizualizations are incredibly powerful tools that allow developers and users to better understand complex data sets. In this tutorial, we'll explore how to create interactive data vizualizations in your React app using D3.js.

Why D3.js?

D3.js is a JavaScript library for manipulating documents based on data. It allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. It's incredibly flexible, and can be used for a wide variety of tasks, from creating simple line charts to building complex data dashboards.

Getting started

First, we need to install D3.js:

npm install d3

Next, we can import it in our React component:

import * as d3 from "d3";

Creating a basic line chart

Let's start with a basic line chart. We'll create a component that renders an SVG element, and then use D3.js to create scales for our X and Y axes, as well as a generator function for drawing the line:

import React, { useRef, useEffect } from "react";
import * as d3 from "d3";

const LineChart = ({ data, width, height }) => {
  const svgRef = useRef(null);

  useEffect(() => {
    const svg = d3.select(svgRef.current);

    const x = d3
      .scaleLinear()
      .domain(d3.extent(data, (d) => d.x))
      .range([0, width]);

    const y = d3
      .scaleLinear()
      .domain(d3.extent(data, (d) => d.y))
      .range([height, 0]);

    const line = d3
      .line()
      .x((d) => x(d.x))
      .y((d) => y(d.y));

    svg
      .append("path")
      .datum(data)
      .attr("d", line)
      .attr("stroke", "black")
      .attr("fill", "none");
  }, [data, height, width]);

  return (
    <svg ref={svgRef} width={width} height={height}>
      // Axis and labels can be added here
    </svg>
  );
};

export default LineChart;

Making it interactive

Now that we have a basic line chart, let's make it interactive. We can do this by adding mouseover and mouseout events to our line, and then displaying a tooltip when the user hovers over a data point:

import React, { useRef, useEffect } from "react";
import * as d3 from "d3";

const LineChart = ({ data, width, height }) => {
  const svgRef = useRef(null);

  useEffect(() => {
    const svg = d3.select(svgRef.current);

    const x = d3
      .scaleLinear()
      .domain(d3.extent(data, (d) => d.x))
      .range([0, width]);

    const y = d3
      .scaleLinear()
      .domain(d3.extent(data, (d) => d.y))
      .range([height, 0]);

    const line = d3
      .line()
      .x((d) => x(d.x))
      .y((d) => y(d.y));

    svg
      .append("path")
      .datum(data)
      .attr("d", line)
      .attr("stroke", "black")
      .attr("fill", "none")
      .on("mouseover", (event, d) => {
        d3.select(event.currentTarget).attr("stroke", "blue");
        const x = event.pageX;
        const y = event.pageY;
        tooltip.current.style.display = "block";
        tooltip.current.style.left = `${x}px`;
        tooltip.current.style.top = `${y}px`;
        tooltip.current.innerHTML = `X: ${d.x} Y: ${d.y}`;
      })
      .on("mouseout", (event, d) => {
        d3.select(event.currentTarget).attr("stroke", "black");
        tooltip.current.style.display = "none";
      });
  }, [data, height, width]);

  const tooltip = useRef(null);

  return (
    <>
      <svg ref={svgRef} width={width} height={height}>
        // Axis and labels can be added here
      </svg>
      <div ref={tooltip} style=\{\{ display: "none" \}\}></div>
    </>
  );
};

export default LineChart;

Conclusion

Data vizualizations are incredibly powerful tools for understanding complex data sets, and D3.js is one of the most popular libraries for building them. In this tutorial, we've explored how to create a basic line chart using D3.js in React, and then how to make it interactive. With these skills, you can create a wide variety of data vizualizations to help your users better understand your app's data.