Adding Graphics to a React App with D3 — Format TSVs and Load CSVs
Tags: react, javascript, webdev, beginners
Published: 2020-10-17 01:01:18

---
title: Adding Graphics to a React App with D3 — Format TSVs and Load CSVs
published: true
date: 2020-10-14 18:26:09 UTC
tags: React,javascript,webdev,beginner
canonical_url: https://thewebdev.info/2020/10/14/adding-graphics-to-a-react-app-with-d3%e2%80%8a-%e2%80%8aformat-tsvs-and-load-csvs/?utm_source=rss&utm_medium=rss&utm_campaign=adding-graphics-to-a-react-app-with-d3%25e2%2580%258a-%25e2%2580%258aformat-tsvs-and-load-csvs
---

**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.

### 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.

The post [Adding Graphics to a React App with D3 — Format TSVs and Load CSVs](https://thewebdev.info/2020/10/14/adding-graphics-to-a-react-app-with-d3%e2%80%8a-%e2%80%8aformat-tsvs-and-load-csvs/) appeared first on [The Web Dev](https://thewebdev.info).