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.
csvParseRows
We can use the csvParseRows method to parse CSV strings into rows.
For example, we can write:
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
const string = `2011,10\n2012,20\n2013,30\n`;
export default {
name: "App",
mounted() {
const data = d3.csvParseRows(string, function ([year, population]) {
return {
year: new Date(+year, 0, 1),
population,
};
});
console.log(data);
},
};
</script>
We parse the CSV rows into an array with the csvParseRows method into a nested array.
The year and population are destructured from the parameter and we return them after parsing them.
csvFormat
We can use the csvFormat method to format the CSV rows and columns.
For example, we can write:
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
const data = [
{ year: 2011, population: 10 },
{ year: 2012, population: 20 },
{ year: 2013, population: 30 },
];
export default {
name: "App",
mounted() {
const string = d3.csvFormat(data, ["year", "population"]);
console.log(string);
},
};
</script>
We pass in an array of objects into the csvFormat method.
The 2nd argument is the column headings.
And then we get back:
year,population
2011,10
2012,20
2013,30
as the value of string .
tsvParse
We can use the tsvParse method to parse tab-separated strings.
For instance, we can write:
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
const string = `yeartpopulation\n2011\t10\n2012\t20\n2013\t30\n`;
export default {
name: "App",
mounted() {
const data = d3.tsvParse(string, function ({ year, population }) {
return {
year: new Date(+year, 0, 1),
population,
};
});
console.log(data);
},
};
</script>
We have a string that has the columns separated by tabs.
And rows separated by a new line.
Then we call tsvParse to parse the string.
And we get the year and population in the parameter.
tsvParseRows
We can use the tsvParseRows to parse the rows in a tabbed separated string.
For example, we can write:
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
const string = `2011\t10\n2012\t20\n2013\t30\n`;
export default {
name: "App",
mounted() {
const data = d3.tsvParseRows(string, function ([year, population]) {
return {
year: new Date(+year, 0, 1),
population,
};
});
console.log(data);
},
};
</script>
We parse the string and destructure the year and population from the parameter.
tsvFormat
We can call the tsvFormat method to convert an array of data to a tabbed separated string.
For instance, we can write:
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
const data = [
{ year: 2011, population: 10 },
{ year: 2012, population: 20 },
{ year: 2013, population: 30 },
];
export default {
name: "App",
mounted() {
const string = d3.tsvFormat(data, ["year", "population"]);
console.log(string);
},
};
</script>
We pass in the array in the first argument and an array of column names in the 2nd argument.
Then string is:
year population
2011 10
2012 20
2013 30
Conclusion
We can parse and create CSV and TSV files with D3 in a Vue app.
