Adding Graphics to a React App with D3 — Lab Color, Drag and Drop, and Zoom

D3 lets us add graphics to a front-end web app easily.

Vue is a popular front end web framework.

They work great together. In this article, we’ll look at how to add graphics to a Vue app with D3.

Lab Color

The d3.lab method creates a new lab color.

To use it, we can write:

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

export default function App() {
  useEffect(() => {
    const lab = d3.lab("blue");
    console.log(lab);
  }, []);

  return <div className="App"></div>;
}

Then we see:

{l: 29.567572863553245, a: 68.29865326565671, b: -112.02942991288025, opacity: 1}

logged.

Transitions

We can add transitions with D3 into our React app.

To do this, we write:

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

export default function App() {
  useEffect(() => {
    d3.selectAll("body")
      .transition()
      .style("background-color", "yellow")
      .transition()
      .delay(5000)
      .style("background-color", "green")
      .delay(2000)
      .remove();
  }, []);

  return <div className="App"></div>;
}

We select the body element.

Then we call the transition method to create the transition.

The style method sets the style for the background color transition to yellow.

Then we have a delay of 5 seconds.

Then we set the background color to green.

And then we call delay to show the green background for 2 seconds.

Then finally we call remove to remove the transition.

Drag and Drop

With D3, we can add drag and drop into our React app.

For instance, we can write:

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

export default function App() {
  useEffect(() => {
    d3.select("g")
      .datum({
        x: 0,
        y: 0
      })
      .call(
        d3.drag().on("drag", function (d) {
          d3.select(this).attr("transform", `translate(${d.x} , ${d.y})`);
        })
      );
  }, []);

  return (
    <div className="App">
      <svg>
        <g>
          <rect x="40" y="10" width="50" height="50" fill="teal"></rect>
        </g>
      </svg>
    </div>
  );
}

to add a rectangle and enable drag and drop for it.

We get the g element.

Then we call the call method to watch for drag events on the g element to set the translate CSS property to move the rectangle’s position.

Zooming

We can add zoom to shapes.

Then we can use the mouse wheel to zoom in and out of an SVG.

For instance, we can write:

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

export default function App() {
  useEffect(() => {
    const svg = d3
      .select("#zoom")
      .append("svg")
      .attr("width", 460)
      .attr("height", 460)
      .call(
        d3.zoom().on("zoom", function (d) {
          svg.attr("transform", d.transform);
        })
      )
      .append("g");

    svg
      .append("circle")
      .attr("cx", 100)
      .attr("cy", 100)
      .attr("r", 40)
      .style("fill", "#68b2a1");
  }, []);

  return (
    <div className="App">
      <div id="zoom"></div>
    </div>
  );
}

We get the div with ID zoom , then we add the svg into it and set the width and height for the svg .

Then we call the call method to let us listen to the zoom event and apply the transform accordingly.

Next, we add the circle that with the cx and cy for x and y coordinates of the center of the circle.

The r has the radius, and the fill has the circle’s background color.

Now we can use the mouse wheel to zoom in and out.

Conclusion

We can create a lab color, add transitions, drag and drop, and zoom with D3 into a React app.