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 appeared first on The Web Dev.
Top comments (0)