Adding Graphics to a Vue App with D3 — CSV and TSV

Photo by Sean Stratton 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 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";