Adding Graphics to a Vue App with D3 — Colors and Transitions

Photo by Robert Katzki 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.

Colors

We can create color objects with the d3.color method.

For example, we can write:

<template>
  <div id="app"></div>
</template>
<script>
import * as d3 from "d3";
export default {
  name: "App",
  mounted() {
    const color = d3.color("green");
    console.log(color);
  },
};
</script>

to call d3.color .

Then color is:

{r: 0, g: 128, b: 0, opacity: 1}

We get the r, g, and b values and the opacity.

We get the same thing with the color.rgb() method:

<template>
  <div id="app"></div>
</template>
<script>
import * as d3 from "d3";
export default {
  name: "App",
  mounted() {
    const color = d3.color("green");
    console.log(color.rgb());
  },
};
</script>

The color object also has the toString method:

<template>
  <div id="app"></div>
</template>
<script>…