bellentuck/.block

## .block
copyright: mit

## index.html
<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>Simple Circles</title>
   <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
   <!-- <link rel="stylesheet" type="text/css" href="index.css"> -->
 </head>
 <body>
   <h1>Circles</h1>
   <script type="text/javascript" src="index.js"></script>
 </body>
</html>

## index.js
// Via https://bost.ocks.org/mike/join/
// Also https://www.dashingd3js.com/adding-an-svg-element

// d3.select("body")
//   .selectAll("p")
//   .data([2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 39, 41, 43, 47, 53, 59, 61, 67])
//   .enter().append("p")
//     .text(function(d) { return "I'm number " + d + "!"; });


// Set up SVG
d3.select("body")
  .append("svg")
    .attr("width", 500)
    .attr("height", 500);
// // Single Circle
//     .append("circle")
//       .attr("cx", 80)
//       .attr("cy", 40)
//       .attr("r", 25)
//       .style("fill", "steelblue");

// Multiple Circles
var data = [
  {"x": 40, "y": 80},
  {"x": 48, "y": 83},
  {"x": 76, "y": 88},
  {"x": 85, "y": 102},
  {"x": 99, "y": 107},
  {"x": 100, "y": 109},
  {"x": 104, "y": 113},
  {"x": 140, "y": 122},
  {"x": 160, "y": 140},
  {"x": 172, "y": 144},
  {"x": 188, "y": 149},
  {"x": 193, "y": 180},
];
//
// var circle = svg.selectAll("circle")
//   .data(data)
//
// circle.exit().remove();
//
// circle.enter().append("circle")
//     .attr("r", 2.5)
//   .merge(circle)
//     .attr("cx", function(d) { return d.x; })
//     .attr("cy", function(d) { return d.y; })

d3.select("svg")
  .selectAll("circle")
  .data(data)
  .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5);


// Not sure how this works yet:
// d3.select("svg").selectAll("circle").transition()
//   .duration(2000)
//   .delay(function(d, i) { return i * 10; })
//   .attr("r", function(d) { return Math.sqrt(d * scale); });
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Simple Circles</title>
	<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
	<!-- <link rel="stylesheet" type="text/css" href="index.css"> -->
	</head>
	<body>
	<h1>Circles</h1>
	<script type="text/javascript" src="index.js"></script>
	</body>
	</html>
	// Via https://bost.ocks.org/mike/join/
	// Also https://www.dashingd3js.com/adding-an-svg-element

	// d3.select("body")
	// .selectAll("p")
	// .data([2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 39, 41, 43, 47, 53, 59, 61, 67])
	// .enter().append("p")
	// .text(function(d) { return "I'm number " + d + "!"; });


	// Set up SVG
	d3.select("body")
	.append("svg")
	.attr("width", 500)
	.attr("height", 500);
	// // Single Circle
	// .append("circle")
	// .attr("cx", 80)
	// .attr("cy", 40)
	// .attr("r", 25)
	// .style("fill", "steelblue");

	// Multiple Circles
	var data = [
	{"x": 40, "y": 80},
	{"x": 48, "y": 83},
	{"x": 76, "y": 88},
	{"x": 85, "y": 102},
	{"x": 99, "y": 107},
	{"x": 100, "y": 109},
	{"x": 104, "y": 113},
	{"x": 140, "y": 122},
	{"x": 160, "y": 140},
	{"x": 172, "y": 144},
	{"x": 188, "y": 149},
	{"x": 193, "y": 180},
	];
	//
	// var circle = svg.selectAll("circle")
	// .data(data)
	//
	// circle.exit().remove();
	//
	// circle.enter().append("circle")
	// .attr("r", 2.5)
	// .merge(circle)
	// .attr("cx", function(d) { return d.x; })
	// .attr("cy", function(d) { return d.y; })

	d3.select("svg")
	.selectAll("circle")
	.data(data)
	.enter().append("circle")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", 2.5);



	// Not sure how this works yet:
	// d3.select("svg").selectAll("circle").transition()
	// .duration(2000)
	// .delay(function(d, i) { return i * 10; })
	// .attr("r", function(d) { return Math.sqrt(d * scale); });