DEV Community

loading...

Adding Graphics to a React App with D3 — Shapes and Colors

aumayeung profile image John Au-Yeung Originally published at thewebdev.info on ・3 min read

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

First, we create the arc by writing:

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

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

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>;
}

Enter fullscreen mode Exit fullscreen mode

to create the color.

Then color is:

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

Enter fullscreen mode Exit fullscreen mode

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>;
}

Enter fullscreen mode Exit fullscreen mode

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>;
}

Enter fullscreen mode Exit fullscreen mode

Then the console log would log:

rgb(0, 128, 0)

Enter fullscreen mode Exit fullscreen mode

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 appeared first on The Web Dev.

Discussion

pic
Editor guide