Adding Graphics to a React App with D3 — Arrays, Collections, and Elements

Photo by Pierre Bamin on Unsplash

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.

Arrays

We can use D3 to manipulate arrays.

For example, we can write:

import React, { useEffect } from "react";
import * as d3 from "d3";
export default function App() {
  useEffect(() => {
    const data = [20, 40, 60, 80, 100];
    console.log(d3.min(data));
    console.log(d3.max(data));
    console.log(d3.extent(data));
    console.log(d3.sum(data));
    console.log(d3.mean(data));
    console.log(d3.quantile(data, 0.5));
    console.log(d3.variance(data));
    console.log(d3.deviation(data));
  }, []);
return <div className="App"></div>;
}

to computed various kinds of information with D3.

min returns the min value of the array.

max returns the max value of the array.

extent returns the min and max value of the array.

sum returns the sum of the array values.