Loading Data into a Vue App with D3

Photo by Walter Sepulveda on Unsplash

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.