This starter project hosted on Glitch comes with a few nice features that make it easy to start creating data visualization project with the C3.js library.
All your JavaScript code goes inside src/scripts/scripts.js. (And you can use ES6 here.)
Use the helper functions helpers.ready, which waits for the page to fully load, and helpers.loadData, which caches your data.
helpers.ready( function(){
// Wait for the page to be fully loaded.
helpers.loadData( {
url: 'https://cdn.glitch.com/3ceda85f-cb76-4cb2-a64b-a39da1ef5e42%2Fdata.csv', // URL to your dataset
type: 'csv' // json, csv, or whatever the format of your data is
}, function ( err, data ){
if ( data ){
// Your data is ready!
}
});
} );
The default caching time is 10 minutes, you can customize this inside helpers/general.js, look for the expirationMinutes variable (line 25).
This project comes with Bootstrap — yes, it’s an overkill if you just want to make a single page, so feel free to remove it from views/layouts/main.handlebars (line 37), but it’s here if you do want to use it. And you can use Sass to write your own styles, see the src/css/styles.scss file.
Your datasets should be uploaded either to the assets folder, or you can create a file inside the data folder, for example, data/my-data.json, and use the path as a URL with the helpers.loadData helper function.
The helpers/general.js file has some more useful functions, like randomFromArray( array ) or getRandomInt( min, max ). You can add your own functions here and they will be available both in the browser and in the node app powering your project.
And finally, you have Handlebars to organize your page templates.
If you make something with this template, be sure to share it with me!
