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>
import * as d3 from "d3";
export default {
name: "App",
mounted() {
const color = d3.color("green");
console.log(color.toString());
},
};
</script>
We see:
rgb(0, 128, 0)
logged.
D3 also comes with the d3.rgb method to create an object with the RGB values:
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
export default {
name: "App",
mounted() {
console.log(d3.rgb("yellow"));
console.log(d3.rgb(200, 100, 0));
},
};
</script>
And we get:
{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}
The d3.hsl method creates a new HSL color:
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
export default {
name: "App",
mounted() {
const hsl = d3.hsl("blue");
console.log((hsl.h += 100));
console.log((hsl.opacity = 0.5));
},
};
</script>
d3.lab creates a new lab color:
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
export default {
name: "App",
mounted() {
const lab = d3.lab("blue");
console.log(lab);
},
};
</script>
Then we get:
{l: 29.567572863553245, a: 68.29865326565671, b: -112.02942991288025, opacity: 1}
logged.
The d3.hcl method creates a new HCL color.
For example, we can write:
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
export default {
name: "App",
mounted() {
const hcl = d3.hcl("blue");
console.log(hcl);
},
};
</script>
d3.cubehelix creates a new Cubehelix color:
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
export default {
name: "App",
mounted() {
const cubehelix = d3.cubehelix("blue");
console.log(cubehelix);
},
};
</script>
And we get:
{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}
Transitions
We can add transitions easily with D3 into our Vue app.
For example, we can write:
<template>
<div id="app"></div>
</template>
<script>
import * as d3 from "d3";
import Vue from "vue";
export default {
name: "App",
mounted() {
Vue.nextTick(() => {
d3.selectAll("body")
.transition()
.style("background-color", "yellow")
.transition()
.delay(5000)
.style("background-color", "blue")
.delay(2000)
.remove();
});
},
};
</script>
We call the transition method to create our transition.
Then we specify the styles to apply with the style method.
And we call delay to set the delay before the next transition is applied.
Conclusion
We can add colors and transitions with D3 into our Vue app.
