Adding Graphics to a React App with D3 — Shapes and Colors
Tags: react, javascript, webdev, beginners
Published: 2020-10-17 01:01:12

---
title: Adding Graphics to a React App with D3 — Shapes and Colors
published: true
date: 2020-10-13 23:03:33 UTC
tags: React,javascript,webdev,beginner
canonical_url: https://thewebdev.info/2020/10/13/adding-graphics-to-a-react-app-with-d3%e2%80%8a-%e2%80%8ashapes-and-colors/?utm_source=rss&utm_medium=rss&utm_campaign=adding-graphics-to-a-react-app-with-d3%25e2%2580%258a-%25e2%2580%258ashapes-and-colors
---

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

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.

### Shapes

We can add shapes with D3 into our React app.

For example, we can use the `d3.arc` method to create an arc.

We can write:

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

export default function App() {
  useEffect(() => {
    const arc = d3.arc().innerRadius(50).outerRadius(40).cornerRadius(15);

    const svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height"),
      g = svg
        .append("g")
        .attr("transform", `translate(${width / 2} , ${height / 2})`);

    const data = [1, 1, 2, 3, 5, 8, 63, 31];
    const arcs = d3.pie()(data);
    g.selectAll("path")
      .data(arcs)
      .enter()
      .append("path")
      .style("fill", function (d, i) {
        return d3.color(`hsl(120, 50%, ${d.value}%)`);
      })
      .attr("d", arc);
  }, []);

  return (
    <div className="App">
      <svg width="400" height="300"></svg>
    </div>
  );
}

```

First, we create the arc by writing:

```
const arc = d3.arc().innerRadius(50).outerRadius(40).cornerRadius(15);

```

We specify the inner radius, outer radius, and corner radius respectively.

Then we get the `svg` element om our `App` component.

We get the width and height of it.

Next, we create our `g` element so we can add the arcs into our SVG.

Then we add the arcs with various shades by writing:

```
const data = [1, 1, 2, 3, 5, 8, 63, 31];
const arcs = d3.pie()(data);
g.selectAll("path")
  .data(arcs)
  .enter()
  .append("path")
  .style("fill", function(d, i) {
    return d3.color(`hsl(120, 50%, ${d.value}%)`);
  })
  .attr("d", arc);

```

`data` has the data we want to add.

The `path` element will have the arcs.

We add the arcs by appending another `path` element inside it.

Then we call `style` to change the fill color of each arc.

And then we call `attr` to set the `d` attribute to the arc to add them.

### Colors

We can create a color with the `d3.color` method.

For example, we can write:

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

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

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

```

to create the color.

Then `color` is:

```
{r: 0, g: 128, b: 0, opacity: 1}

```

We get the same thing with the `color.rgb()` method:

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

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

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

```

We can get the string representation of the color with `toString` :

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

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

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

```

Then the console log would log:

```
rgb(0, 128, 0)

```

### Conclusion

We can add shapes and create colors in our React app with D3.

The post [Adding Graphics to a React App with D3 — Shapes and Colors](https://thewebdev.info/2020/10/13/adding-graphics-to-a-react-app-with-d3%e2%80%8a-%e2%80%8ashapes-and-colors/) appeared first on [The Web Dev](https://thewebdev.info).