Pre-loading using spin.js with d3

Example using spin.js during load of JSON data for a D3 chart

Showing the spinner/loader being triggered before the JSON callback, and stopped within the JSON callback (hence after the JSON data has been loaded):

// loader settings
var target = document.getElementById('#chart-id');

function init() {

    // trigger loader
    var spinner = new Spinner(opts).spin(target);

    // load json data 
    data.loadJson(chartConfig.data_url, function(data) {

        // stop the loader
        spinner.stop();

        // code to execute within callback

    });
}

init();

Related links/discussions

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>Loading spin.js in d3.js chart</title> 
  <meta name='author' content='Sundar Singh | eesur.com'>

// config references
var chartConfig = {
    target : 'chart',
    data_url : 'external_data.json',
    width: 900,
    height: 450,
    val: 90
};

// loader settings
var opts = {
  lines: 9, // The number of lines to draw
  length: 9, // The length of each line
  width: 5, // The line thickness
  radius: 14, // The radius of the inner circle
  color: '#EE3124', // #rgb or #rrggbb or array of colors
  speed: 1.9, // Rounds per second
  trail: 40, // Afterglow percentage
  className: 'spinner', // The CSS class to assign to the spinner
};

var target = document.getElementById(chartConfig.target);

// callback function wrapped for loader in 'init' function
function init() {

// trigger loader
    var spinner = new Spinner(opts).spin(target);

// slow the json load intentionally, so we can see it every load
    setTimeout(function() {

// load json data and trigger callback
        d3.json(chartConfig.data_url, function(data) {

// stop spin.js loader
            spinner.stop();

// instantiate chart within callback
            chart(data);

});

}, 1500);
}

init();

function chart(data) {

// sample bar chart showing ancient name occurrences in SGGS

var w = chartConfig.width;
    var h = chartConfig.height;

var xScale = d3.scale.linear()
        .domain([0, d3.max(data, function(d) { return d.value; })])
        .range([0, w-100]);

var canvas = d3.select('#' + chartConfig.target)
        .append('svg')
            .attr('width', w)
            .attr('height', h);

var rects = canvas.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
            .attr('width', 0)
            .attr('height', h/10 - 2)
            .attr('y', function (d, i) { return i * 50; })
            .attr('fill', '#FDBB30');

rects.transition()
        .duration(1000)
        .delay(100)
        .ease('linear')
        .attr('width', function (d) { return xScale(d.value); });

canvas.selectAll('text')
          .data(data)
          .enter()
          .append('text')
              .attr('y', function (d, i) { return (i * 50) +30; })
              .attr('x', function (d) { return xScale(d.value) + 10; })
              .attr('fill', '#130C0E')
              .text(function (d) { return d.name; });
}

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js