Categories
Vue and D3

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

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *