davo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset=utf-8 />
<title>puntos</title>
</head>
<body>
  <button id="up" type="button">Up</button>
  <button id="down" type="button">Down</button>
  <button id="left" type="button">Left</button>
  <button id="right" type="button">Right</button>
  <br>

  <button id="clear" type="button">Clear</button>
  <br>

  <button id="red" type="button">red</button>
  <button id="green" type="button">green</button>
  <button id="blue" type="button">blue</button>
  <button id="black" type="button">black</button>
  <br>

  radio: 5 <input id="radio" type="range" name="radio" min="5" max="25"> 25<br>


<script>

var puntos = [], width = 400, height = 400;

var MouseDown;
var MouseUp;
var MouseXY;

d3.select("svg")
    .on("click", function() {
        console.log("click");
    });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("click", click)
    .on("mousedown", md)
    .on("mouseup", mu)
    .on("mousemove", mm)
    .attr("style", "background-color: rgb(220,220,220);");

function draw() {
  svg.selectAll("circle")
     .data(puntos)
     .enter()
     .append("circle")
     .attr("cx", function(d) { return d[0]; })
     .attr("cy", function(d) { return d[1]; })
     .attr("r", radio.value);
}

function click() {
  // console.log(d3.mouse(this));
  puntos.push(d3.mouse(this));
  draw();
}

function md() {
  MouseDown = d3.mouse(this);
}

function mu() {
  MouseUp = d3.mouse(this);
}

function mm() {
  MouseXY = d3.mouse(this);
}

d3.select('#up').on('click', function() {
  svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cy", 10 );
});

d3.select('#down').on('click', function() {
  svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cy", height-10 );
});

d3.select('#left').on('click', function() {
  svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cx", 10 );
});

d3.select('#right').on('click', function() {
  svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cx", width-10 );
});

d3.select('#clear').on('click', function() {
  puntos = [];
  svg.selectAll("circle")
     .data(puntos)
     .exit()
     .transition().delay(function(d, i) { return i * 50; })
     .remove();
});

d3.select('#red').on('click', function() {
  svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "red");
});

d3.select('#green').on('click', function() {
  svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "green");
});

d3.select('#blue').on('click', function() {
  svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "blue");
});

d3.select('#black').on('click', function() {
  svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "black");
});

d3.select('#radio').on('change', function() {
  svg.selectAll("circle").attr("r", radio.value);
});


</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta charset=utf-8 />
	<title>puntos</title>
	</head>
	<body>
	<button id="up" type="button">Up</button>
	<button id="down" type="button">Down</button>
	<button id="left" type="button">Left</button>
	<button id="right" type="button">Right</button>
	<br>

	<button id="clear" type="button">Clear</button>
	<br>

	<button id="red" type="button">red</button>
	<button id="green" type="button">green</button>
	<button id="blue" type="button">blue</button>
	<button id="black" type="button">black</button>
	<br>

	radio: 5 <input id="radio" type="range" name="radio" min="5" max="25"> 25<br>


	<script>

	var puntos = [], width = 400, height = 400;

	var MouseDown;
	var MouseUp;
	var MouseXY;

	d3.select("svg")
	.on("click", function() {
	console.log("click");
	});

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.on("click", click)
	.on("mousedown", md)
	.on("mouseup", mu)
	.on("mousemove", mm)
	.attr("style", "background-color: rgb(220,220,220);");

	function draw() {
	svg.selectAll("circle")
	.data(puntos)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return d[0]; })
	.attr("cy", function(d) { return d[1]; })
	.attr("r", radio.value);
	}

	function click() {
	// console.log(d3.mouse(this));
	puntos.push(d3.mouse(this));
	draw();
	}

	function md() {
	MouseDown = d3.mouse(this);
	}

	function mu() {
	MouseUp = d3.mouse(this);
	}

	function mm() {
	MouseXY = d3.mouse(this);
	}

	d3.select('#up').on('click', function() {
	svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cy", 10 );
	});

	d3.select('#down').on('click', function() {
	svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cy", height-10 );
	});

	d3.select('#left').on('click', function() {
	svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cx", 10 );
	});

	d3.select('#right').on('click', function() {
	svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cx", width-10 );
	});

	d3.select('#clear').on('click', function() {
	puntos = [];
	svg.selectAll("circle")
	.data(puntos)
	.exit()
	.transition().delay(function(d, i) { return i * 50; })
	.remove();
	});

	d3.select('#red').on('click', function() {
	svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "red");
	});

	d3.select('#green').on('click', function() {
	svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "green");
	});

	d3.select('#blue').on('click', function() {
	svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "blue");
	});

	d3.select('#black').on('click', function() {
	svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "black");
	});

	d3.select('#radio').on('change', function() {
	svg.selectAll("circle").attr("r", radio.value);
	});


	</script>

	</body>
	</html>