Adding Graphics to a React App with D3

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.

Getting Started

We install D3 by running npm i d3 .

Then we can use it in our Vue app.

Data Join

Now that we installed D3, we can use it in our app.

D3 lets us render an array of items into a list easily.

To do this, we write:

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

const arr = [10, 20, 30, 25, 15];

export default function App() {
  useEffect(() => {
    d3.select("#list")
      .selectAll("li")
      .data(arr)
      .text((d) => d);
  }, []);

  return (
    <div className="App">
      <ul id="list">
        {arr.map(() => (
          <li></li>
        ))}
      </ul>
    </div>
  );
}

We put our D3 code into the useEffect callback to get the list and then select all the li elements.

Then we put the numbers in the li elements.

SVG

We can use D3 to add SVGs into our components.

To do this, we write:

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

export default function App() {
  useEffect(() => {
    const width = 300;
    const height = 300;
    const svg = d3
      .select("#svgcontainer")
      .append("svg")
      .attr("width", width)
      .attr("height", height);
    svg
      .append("line")
      .attr("x1", 100)
      .attr("y1", 100)
      .attr("x2", 200)
      .attr("y2", 200)
      .style("stroke", "rgb(255,0,0)")
      .style("stroke-width", 2);
  }, []);

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

to add a line.

We have:

const svg = d3
  .select("#svgcontainer")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

to add the svg into the div with ID svgcontainer .

And we set the width and the height of the svg with the attr methods.

Then we add the line by writing:

svg
  .append("line")
  .attr("x1", 100)
  .attr("y1", 100)
  .attr("x2", 200)
  .attr("y2", 200)
  .style("stroke", "rgb(255,0,0)")
  .style("stroke-width", 2);

We call append with 'line' to add the line.

Then we add the x1 and y1 attributes to add the coordinates of the start of the line.

And we add the x2 and y2 attributes to add the coordinates of the end of the line.

Also, we set the stroke color of the line.

And we set the stroke width to set the line thickness.

Rectangle

We can add a rectangle with the append method with 'rect' as the argument.

For instance, we can write:

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

export default function App() {
  useEffect(() => {
    const width = 300;
    const height = 300;
    const svg = d3
      .select("#svgcontainer")
      .append("svg")
      .attr("width", width)
      .attr("height", height);
    svg
      .append("rect")
      .attr("x", 20)
      .attr("y", 20)
      .attr("width", 200)
      .attr("height", 100)
      .attr("fill", "green");
  }, []);

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

We add the svg the same way as the previous example.

Then we add the rectangle with the append method.

The x and y attributes are the x and y coordinates of the top left corner of the circle.

The width and height attributes are the width and height of the rectangle.

And the fill is the background color of the rectangle.

Conclusion

We can add basic shapes to our React app with D3.