aaizemberg/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="remove" type="button">remove</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 src="puntos.js"></script>

</body>
</html>

## puntos.js
var puntos = [], width = 600, height = 400, MouseDown, MouseUp, 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 Math.log(i+1)*100; })
     .attr("cy", 10 );
});

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

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

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

// antes eliminaba a todos los puntos
// ahora los voy sacando de a uno

/*
d3.select('#remove').on('click', function() {
  puntos = [];
  svg.selectAll("circle")
     .data(puntos)
     .exit()
     .remove();
});
*/

function removeOnePoint() {
  puntos.pop();
  svg.selectAll("circle")
     .data(puntos)
     .exit()
     .remove();
}

d3.select('#remove').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("r", 0)
     .each("end", removeOnePoint); // llamo a removeOnePoint cada vez que termina la transición
                                   // http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/
});

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

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

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

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

d3.select('#radio').on('change', function() {
  svg.selectAll("circle").attr("r", radio.value);
});
	<!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="remove" type="button">remove</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 src="puntos.js"></script>

	</body>
	</html>
	var puntos = [], width = 600, height = 400, MouseDown, MouseUp, 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 Math.log(i+1)*100; })
	.attr("cy", 10 );
	});

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

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

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

	// antes eliminaba a todos los puntos
	// ahora los voy sacando de a uno

	/*
	d3.select('#remove').on('click', function() {
	puntos = [];
	svg.selectAll("circle")
	.data(puntos)
	.exit()
	.remove();
	});
	*/

	function removeOnePoint() {
	puntos.pop();
	svg.selectAll("circle")
	.data(puntos)
	.exit()
	.remove();
	}

	d3.select('#remove').on('click', function() {
	svg.selectAll("circle")
	.transition()
	.delay(function(d, i) { return Math.log(i+1)*100; })
	.attr("r", 0)
	.each("end", removeOnePoint); // llamo a removeOnePoint cada vez que termina la transición
	// http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/
	});

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

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

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

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

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