Skip to content

Instantly share code, notes, and snippets.

@brendansudol

brendansudol/README.md

Last active October 24, 2016 00:41
Show Gist options
  • Save brendansudol/3160892 to your computer and use it in GitHub Desktop.
Save brendansudol/3160892 to your computer and use it in GitHub Desktop.
Download ZIP
circles and colors
Raw
README.md
Raw
index.html
<!doctype html>
<html>
<head>
<script src="http://d3js.org/d3.v2.min.js?2.3.0"></script>
<style type="text/css">
.container { width: 980px; margin: 0 auto 0 auto; }
</style>
</head>
<body>
<div class='container'></div>
<script type="text/javascript">
var width = 980,
height = 760;
var color = d3.scale.linear()
.domain([0, width])
.range(["red", "yellow"])
.interpolate(d3.interpolateHsl);
var svg = d3.select(".container").append("svg")
.attr("class", "chart")
.attr("width", width)
.attr("height", height)
.on("mousemove", mousemove);
var data = d3.range(320);
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d, i) { return (((i % 20) * 49) + 10); })
.attr("cy", function(d, i) { return ((Math.floor(i / 20) * 49) + 10); })
.attr("r", 3)
.style("fill", function(d, i) { return d3.rgb(color(((i % 20) * 49) + 10)).darker(Math.floor(i / 20)*(1/4)).toString(); })
.transition()
.duration(1500)
.attr("r", 22)
.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]) / 760) * 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", .00001);
}
);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment