Adding Graphics to a React App with D3 — Format TSVs and Load CSVs

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.

tsvFormat

We can use the tsvFormat method to convert an array of objects into a tab-separated string.

For example, we can write:

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

const data = [
  { year: 2011, population: 10 },
  { year: 2012, population: 20 },
  { year: 2013, population: 30 }
];
export default function App() {
  useEffect(() => {
    const string = d3.tsvFormat(data, ["year", "population"]);
    console.log(string);
  }, []);

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

Then the string is:

year population
2011 10
2012 20
2013 30

We pass in an array of objects as the first argument.

The 2nd argument has an array of the column heading strings.

tsvFormatRows

We can call the tsvFormatRows method to convert a nested array into a tab-separated string.

For example, we can write:

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

const data = [
  [2011, 10],
  [2012, 20],
  [2013, 30]
];
export default function App() {
  useEffect(() => {
    const string = d3.tsvFormatRows(data);
    console.log(string);
  }, []);

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

to use the tsvFormatRows method with the data .

Then we get:

2011 10
2012 20
2013 30

logged.

Timer

We can add timers that come with D3 to add animations to a React app.

We can call the d3.timer method to create a timer:

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

export default function App() {
  useEffect(() => {
    const timer = d3.timer(function (duration) {
      console.log(duration);
      if (duration > 150) {
        timer.stop();
      }
    }, 100);
  }, []);

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

We call timer with a callback that has the duration parameter with the callback in the duration.

Then if the duration is bigger than 150ms, then we call timer.stop to stop the timer.

Loading CSV

We can load CSVs in our React app with the d3.csv method.

For example, we can write:

public/data.csv

name,age
John,30
Jane,32

src/App.js

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

const readCsv = async () => {
  const data = await d3.csv("/data.csv");
  for (const { name, age } of data) {
    console.log(name, age);
  }
};

export default function App() {
  useEffect(() => {
    readCsv();
  }, []);

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

We have the readCsv function to read the data from public/data.csv .

Then we loop through the data array, which has the parsed CSV rows.

And we get:

John 30
Jane 32

Conclusion

We can read and create CSVs and TSVs with D3 in our React app.