Skip to content

Instantly share code, notes, and snippets.

@aaizemberg
Last active January 3, 2016 03:39
Show Gist options
  • Save aaizemberg/8403408 to your computer and use it in GitHub Desktop.
Save aaizemberg/8403408 to your computer and use it in GitHub Desktop.
puntos
<!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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment