C3.js Starter Project on Glitch

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!

A white outline drawing of a synthesizer on a black background.
Yellow-tinted screenshot of my NYC Subway Artists map showing thumbnails of videos of some of the featured artists

NYC Subway Artists

Musicians playing at NYC subway stations.

#artists #dataviz #felt #map #music #nyc #performers

A white outline drawing of a drum on a black background.

Music Weeklies Challenge: Ominous

My submission to the Music Weeklies Challenge: Ominous.

#music #music-challenges-and-contests #music-production #music-weeklies-challenge

💻 Browse all