Skip to content

Instantly share code, notes, and snippets.

@brendansudol
Created July 14, 2013 17:25
Show Gist options
  • Save brendansudol/5995005 to your computer and use it in GitHub Desktop.
Save brendansudol/5995005 to your computer and use it in GitHub Desktop.
A D3.js recreation of Etsy's shopping by color animation.
var width = 660,
height = 600;
var color = d3.scale.linear()
.domain([0, width/4, width/4 * 2, width/4 * 3, width])
.range(["#fb000f", "#6e00fb", "#00fbec", "#8dfb00", "#fb3c00"])
.interpolate(d3.interpolateHsl);
var svg = d3.select("#colorz").append("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", "0 0 660 600")
.attr("perserveAspectRatio", "xMinYMid")
.on("mousemove", mousemove);
var data = d3.range(320);
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d, i) { return (((i % 20) * 38) + 10); })
.attr("cy", function(d, i) { return ((Math.floor(i / 20) * 38) + 10); })
.attr("r", 3)
.style("fill", function(d, i) { return d3.rgb(color(((i % 20) * 38) + 10)).darker(Math.floor(i / 20)*(1/4)).toString(); })
.transition()
.duration(1500)
.attr("r", 18.5)
.each("end", function() {
d3.select(this)
.transition()
.duration(1500)
.attr("r", 3);
});
function mousemove() {
var m = d3.mouse(this),
x = m[0],
y = m[1];
svg.append("circle")
.transition()
.duration(0)
.attr("r", 10)
.attr("transform", "translate(" + x + "," + y + ")scale(2)")
.style("fill", d3.rgb(color(x)).darker((d3.max([0,y-10]) / width) * 3.75).toString())
.each("end", function() {
d3.select(this)
.transition()
.duration(1500)
.attr("transform", "translate(" + (x + ((Math.round(Math.random() * 1) * 2 - 1) *
Math.floor((Math.random()*60)+1))) + "," + (y + ((Math.round(Math.random()*1) * 2 - 1) *
Math.floor((Math.random()*60)+1))) + ")")
.attr("r", 1e-6)
.remove();
});
}
// making viz responsive for smaller windows
var chart = $("#colorz svg"),
aspect = chart.width() / chart.height(),
container = chart.parent();
$(window).on("resize", function() {
var targetWidth = container.width();
chart.attr("width", targetWidth);
chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment