Skip to content

Instantly share code, notes, and snippets.

@Rnhatch

Rnhatch/index.html

Last active April 12, 2017 01:03
Show Gist options
  • Save Rnhatch/1822982 to your computer and use it in GitHub Desktop.
Save Rnhatch/1822982 to your computer and use it in GitHub Desktop.
Download ZIP
Circle Fun
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!--<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />-->
<title>Tutorial: introduction to D3</title>
<script type="text/javascript" src="array.js"></script>
<script type="text/javascript" src="string.js"></script>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link type="text/css" rel="stylesheet" href="reset.css" media="all"></link>
<link type="text/css" rel="stylesheet" href="grid960.css" media="all"></link>
<style type="text/css">
body {
background-color: white;
vertical-align:text-top;
text-align:center
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
var h = 1000,
x = d3.scale.linear().domain([0,1]).range([screen.width / 2 - 700,screen.width / 2 + 500]),
y = d3.scale.linear().domain([0,1]).range([0,h]),
y2 = d3.scale.linear().domain([0,1]).range([h/2 - 500, h/2 + 300]),
r = d3.scale.linear().domain([0,1]).range([5,50]),
c = d3.scale.linear().domain([0,1]).range(["hsl(200, 50%, 50%)", "hsl(330, 100%, 50%)"]).interpolate(d3.interpolateHsl)
var data = []
for (i=0; i < 1000; i++) {
data.push({"x": Math.random(), "y": Math.random()})
}
var vis = d3.select("body")
.append("svg:svg")
.attr("class", "vis")
.attr("width", window.width)
.attr("height", window.innerHeight)
//mouseover effect
vis.selectAll("circle")
.data(data)
.enter().append("svg:circle")
.attr("cx", function(d) { return x(d.x) })
.attr("cy", function(d) { return y(d.y) })
.attr("stroke-width", "none")
.attr("fill", function() { return c(Math.random()) })
.attr("fill-opacity", .5)
.attr("visibility", "hidden")
.attr("r", function() { return r(Math.random()) })
.on("mouseover", function() {
d3.select(this).transition()
.attr("cx", function() { return y2(Math.random()) })
.attr("cy", function() { return y2(Math.random()) })
.delay(0)
.duration(2000)
.ease("bounce")
//.ease("elastic", 10, .3)
})
//inital load of shapes to space
d3.selectAll("circle").transition()
.attr("cx", function() { return x(Math.random()) })
.attr("cy", function() { return y2(Math.random()) })
.attr("visibility", "visible")
.delay(function(d,i) { return i * Math.random() })
.duration(10000)
.ease("elastic", 10, .45)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment