Skip to content

Instantly share code, notes, and snippets.

@eesur
Last active August 8, 2019 14:06
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save eesur/cf81a5ea738f85732707 to your computer and use it in GitHub Desktop.
Save eesur/cf81a5ea738f85732707 to your computer and use it in GitHub Desktop.
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

[
{
"name": "Har",
"value": 8433
},
{
"name": "Ram",
"value": 2543
},
{
"name": "Gopal",
"value": 491
},
{
"name": "Gobind",
"value": 475
},
{
"name": "Prabhu",
"value": 1371
},
{
"name": "Murari",
"value": 97
},
{
"name": "Narayan",
"value": 85
},
{
"name": "Allah",
"value": 46
},
{
"name": "Bhagwan",
"value": 30
},
{
"name": "Madhav",
"value": 27
},
{
"name": "Rab",
"value": 17
},
{
"name": "Narsingh",
"value": 16
},
{
"name": "Damodar",
"value": 15
},
{
"name": "Banwari",
"value": 15
},
{
"name": "Krishna",
"value": 22
},
{
"name": "Madhu Sudan",
"value": 9
},
{
"name": "Wahi Guru",
"value": 13
}
]
<!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'>
<script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js'></script>
<style>
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);
body {
font-family: "Source Code Pro", Consolas, monaco, monospace;
font-size: 18px;
line-height: 1.5;
font-weight: 400;
}
</style>
</head>
<body>
<section id='chart'></section>
<script>
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment