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 load data into a Vue app with D3.
Loading CSV
We can load CSV data into our Vue app with the d3.csv method.
For example, we can write:
public/data.csv
name,age
John,30
Jane,32
App.vue
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
export default {
name: "App",
async mounted() {
const data = await d3.csv("/data.csv");
for (const { name, age } of data) {
console.log(name, age);
}
},
};
</script>
to load data from public/data.csv into our Vue app.
The public folder is served statically, so we can read data from there.
We just call d3.csv with the path to the CSV file.
Then it’ll parsed automatically into an array of objects.
Therefore, we get:
John 30
Jane 32
logged when we loop through the data array.
Loading JSON
We can load JSON into our app with the d3.json method.
For example, we can write:
public/data.json
[
{
"name": "John",
"age": 30,
"city": "New York"
},
{
"name": "Jane",
"age": 20,
"city": "San Francisco"
}
]
App.vue
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
export default {
name: "App",
async mounted() {
const data = await d3.json("/data.json");
for (const { name, age } of data) {
console.log(name, age);
}
},
};
</script>
We call d3.json to get the data.
Then we loop through the data array which has the parsed JSON array.
So we get the same result as we did in the previous example.
Loading XML File
We can load XML files with the d3.xml method.
To use it, we can write:
public/data.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<row>
<name>John</name>
<age>30</age>
</row>
<row>
<name>Jane</name>
<age>32</age>
</row>
</root>
App.vue
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
export default {
name: "App",
async mounted() {
const data = await d3.xml("/data.xml");
for (const n of data.documentElement.getElementsByTagName("name")) {
console.log(n.textContent);
}
},
};
</script>
We call d3.xml to read the data.xml file.
The method returns the parsed XML DOM object.
Therefore, we can use the documentElement.getElementByTagName method to get the name elements by their tag name.
And then we can log the textContent to log the content.
Loading Tab Separated Files
We can read tab-separated files with the d3.tsv method.
For example, we can write:
public/data.tsv
name age city
John 30 New York
Jane 20 San Francisco
App.vue
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
export default {
name: "App",
async mounted() {
const data = await d3.tsv("/data.tsv");
for (const { name, age, city } of data) {
console.log(name, age, city);
}
},
};
</script>
to call the d3.tsv method to load data.tsv .
It returns a promise with an array of data.
Then we can loop through the data entry and log them.
Conclusion
We can load CSV, TSV, XML, and JSON files with D3 in our Vue app.
