NatasaPeic/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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


spin.js
Google Groups | wait till loading of json file
stackoverflow | D3.js - Adding a loading notification during AJAX request


## external_data.json
[
    {
        "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
    }
]

## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	[
	{
	"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>