cjhin/index.html

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

<style>
.bird {
  stroke: grey;
  stroke-width: 2;
  fill: none;
}
</style>

<body>
  <svg id='main' width=960 height=500></svg>
</body>

<script src="//d3js.org/d3.v3.min.js"></script>
<script>

  /*
    Playing with d3 paths to make a scene of birds,
    the kind I used to draw in preschool

        /``\_/``\
  */

  // generate birds
  var birds = [];
  for(var i = 0; i < 50; i++) {
    var b = { x: Math.random() * 900, y: Math.random() * 500, size: Math.random() * 20 + 10 };

    b.points = [
      { x: b.x - b.size, y: b.y + (b.size * 0.05) }, // left wing tip
      { x: b.x - (b.size * 0.2), y: b.y - (b.size * 0.3) },
      { x: b.x, y: b.y }, // center
      { x: b.x, y: b.y }, // duplicate center so point is sharp rather than round
      { x: b.x + (b.size * 0.2), y: b.y - (b.size * 0.3) },
      { x: b.x + b.size, y: b.y + (b.size * 0.05) } // right wing tip
    ];
    birds.push(b);
  }

  var lineFunction = d3.svg.line()
      .x(function(d) { return d.x })
      .y(function(d) { return d.y })
      .interpolate("basis"); // "curve" the wings

  var bird = d3.select("#main")
      .selectAll(".bird")
      .data(birds)
      .enter().append("path")
      .attr("class", "bird")
      .attr("d", function(d) { return lineFunction(d.points) });
</script>

## thumbnail.png

      
        

                Raw

        
        
          
            
          
          
            
              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	.bird {
	stroke: grey;
	stroke-width: 2;
	fill: none;
	}
	</style>

	<body>
	<svg id='main' width=960 height=500></svg>
	</body>

	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	/*
	Playing with d3 paths to make a scene of birds,
	the kind I used to draw in preschool

	/``\_/``\
	*/

	// generate birds
	var birds = [];
	for(var i = 0; i < 50; i++) {
	var b = { x: Math.random() * 900, y: Math.random() * 500, size: Math.random() * 20 + 10 };

	b.points = [
	{ x: b.x - b.size, y: b.y + (b.size * 0.05) }, // left wing tip
	{ x: b.x - (b.size * 0.2), y: b.y - (b.size * 0.3) },
	{ x: b.x, y: b.y }, // center
	{ x: b.x, y: b.y }, // duplicate center so point is sharp rather than round
	{ x: b.x + (b.size * 0.2), y: b.y - (b.size * 0.3) },
	{ x: b.x + b.size, y: b.y + (b.size * 0.05) } // right wing tip
	];
	birds.push(b);
	}

	var lineFunction = d3.svg.line()
	.x(function(d) { return d.x })
	.y(function(d) { return d.y })
	.interpolate("basis"); // "curve" the wings

	var bird = d3.select("#main")
	.selectAll(".bird")
	.data(birds)
	.enter().append("path")
	.attr("class", "bird")
	.attr("d", function(d) { return lineFunction(d.points) });
	</script>