Vue.js 2.x by Example

Loading a CSV with d3

Both plugins load the data in a very similar way, but the data returned varies somewhat – however, we'll deal with that once we have loaded our data.

Load the d3 library – if you want to try it out, you can use the hosted version:

<script src="https://d3js.org/d3.v4.min.js"></script>

Using d3, we use a function on the d3 object of csv(), which accepts one parameter – the path to the CSV file. Add the created() function to your Vue instance and initialize the CSV loader:

new Vue({  el: '#app',  store,  router,    created() {    d3.csv('./data/csv-files/bicycles.csv', (error, data) => {      console.log(data);    });  }});

Remember the path to your file is relative to the HTML file which is including your JavaScript file – in this case, ...