curran/.block

## .block
license: mit

## data.csv

          
            country
            population

            
              China
              1376048943

            
              India
              1311050527

            
              USA
              321773631

            
              Indonesia
              257563815

            
              Brazil
              207847528

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Rendering Rectangles</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const svg = d3.select("svg");

      function render(data){
        svg.selectAll("rect").data(data)
          .enter().append("rect")
            .attr("x", (d, i) => i * 30)
            .attr("y", (d, i) => i * 30)
            .attr("width", (d, i) => i * 30)
            .attr("height", (d, i) => i * 30)
      }

      function type(d){
        d.population = +d.population;
        return d;
      }

      d3.csv("data.csv", type, render);
    </script>
  </body>
</html>
	country	population
	China	1376048943
	India	1311050527
	USA	321773631
	Indonesia	257563815
	Brazil	207847528
	<!DOCTYPE html>
	<html>
	<head>
	<title>Rendering Rectangles</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<svg width="960" height="500"></svg>
	<script>
	const svg = d3.select("svg");

	function render(data){
	svg.selectAll("rect").data(data)
	.enter().append("rect")
	.attr("x", (d, i) => i * 30)
	.attr("y", (d, i) => i * 30)
	.attr("width", (d, i) => i * 30)
	.attr("height", (d, i) => i * 30)
	}

	function type(d){
	d.population = +d.population;
	return d;
	}

	d3.csv("data.csv", type, render);
	</script>
	</body>
	</html>