Tutorials / Vue /

How to Use D3.js in Your Vue Projects

Feb 19, 2021

D3.js is a great library for visualizing data and displaying it in your projects. This library gives you the building blocks to make cool charts in projects.

Here is an example of using D3.js in Vue2 to create a bar graph. Below is the code:

<script src="https://d3js.org/d3.v6.js"></script>
<script src="https://unpkg.com/vue"></script>
<div class = "app">
  <bargraph></bargraph>
</div>
<script type = "text/javascript">
const info = [
  {Country: "United States", Value: "12394"},
  {Country: "Russia",Value: "6148"},
  {Country: "Germany (FRG)",Value: "1653"},
  {Country: "France",Value: "2162"},
  {Country: "United Kingdom",Value: "1214"},
  {Country: "China",Value: "1131"},
  {Country: "Spain",Value: "814"},
  {Country: "Netherlands",Value: "1167"},
  {Country: "Italy",Value: "660"},
  {Country: "Israel",Value: "1263"}
];

Vue.component('bargraph', {
  mounted() {
    this.retrieveGraph();
  },
  methods: {
    retrieveGraph: function() {
      let margin = ({top: 30, right: 30, bottom: 70, left: 60});
      let width = 460 - margin.left - margin.right;
      let height = 400 - margin.top - margin.bottom;
      const svg = d3.select(this.$refs.example).
        append("svg").
        attr("width", width + margin.left + margin.right).
        attr("height", height + margin.top + margin.bottom).
        append("g").
        attr("transform", `translate( ${margin.left} , ${margin.top} )`);
      // Add X axis
      const x = d3.scaleBand().
        range([ 0, width ]).
        domain(info.map(function(d) { return d.Country; })).
        padding(0.2);
      svg.append("g").
        attr("transform", "translate(0," + height + ")").
        call(d3.axisBottom(x)).
        selectAll("text").
        attr("transform", "translate(-10,0)rotate(-45)").
        style("text-anchor", "end");
      // Add Y axis
      const y = d3.scaleLinear().
        domain([0, 13000]).
        range([ height, 0]);
      svg.append("g").call(d3.axisLeft(y));
      // Bars
      svg.selectAll("mybar").
        data(info).
        enter().
        append("rect").
        attr("x", function(d) { return x(d.Country); }).
        attr("y", function(d) { return y(d.Value); }).
        attr("width", x.bandwidth()).
        attr("height", function(d) { return height - y(d.Value); }).
        attr("fill", "#69b3a2");
    }
  },
  template: '<div ref="example"></div>'
});
const vm = new Vue({
  el: '.app'
});

Note that the template uses Vue refs rather than referencing the element by id. Here's a live example of the above code.

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

How to Use D3.js in Your Vue Projects

More Vue Tutorials