wklchris/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    A quick guide to show how to multi-load files by D3.js v4.
d3.queue()
.defer(d3.csv, "file1.csv")
.defer(d3.csv, "file2.csv")
.await(function(error, data1, data2) {
  if (error) throw error;
  ...
});
Really straightforward.

  
## fruits.csv

          
            name
            number

            
              peaches
              2

            
              apples
              4

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
d3.queue()
.defer(d3.csv, "people.csv")
.defer(d3.csv, "fruits.csv")
.await(function(error, people, fruits) {
    if (error) throw error;

    var div = d3.select("body").append("div")
        .attr("width", 200)
        .attr("height", 400);
    var p = div.selectAll("p")
        .data(people).enter()
      .append("p")
        .text(function(d, i) {
            return d.name + " has " + fruits[i].number + " " + fruits[i].name;
        });

});
</script>

## people.csv

          
            name
            gender
            age

            
              Chris
              male
              3

            
              Monica
              female
              3
	<!DOCTYPE html>
	<meta charset="utf-8">

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	d3.queue()
	.defer(d3.csv, "people.csv")
	.defer(d3.csv, "fruits.csv")
	.await(function(error, people, fruits) {
	if (error) throw error;

	var div = d3.select("body").append("div")
	.attr("width", 200)
	.attr("height", 400);
	var p = div.selectAll("p")
	.data(people).enter()
	.append("p")
	.text(function(d, i) {
	return d.name + " has " + fruits[i].number + " " + fruits[i].name;
	});

	});
	</script>