Skip to content

Instantly share code, notes, and snippets.

@Rnhatch

Rnhatch/index.html

Last active September 22, 2017 13:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Rnhatch/49d5a538dacb50dbeaa9d47ac6ebaf2d to your computer and use it in GitHub Desktop.
Save Rnhatch/49d5a538dacb50dbeaa9d47ac6ebaf2d to your computer and use it in GitHub Desktop.
Download ZIP
Fun with Squids
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>A Skool of Bouncing Skuid</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 = 1500,
// x = d3.scale.linear().domain([0,1]).range([window.innerWidth / 2 - 400, window.innerWidth / 2 + 400]),
x = d3.scale.linear().domain([0,1]).range([50, window.innerWidth - 50]),
y = d3.scale.linear().domain([0,1]).range([50, window.innerHeight - 50]),
// 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([25,200]),
c = d3.scale.linear().domain([0,1]).range(["hsl(200, 50%, 50%)", "hsl(330, 100%, 50%)"]).interpolate(d3.interpolateHsl),
num = window.innerHeight/4
var data = []
for (i=0; i < num; i++) {
data.push({"x": Math.random(), "y": Math.random()})
}
var vis = d3.select("body")
.append("svg:svg")
.attr("class", "vis")
.attr("width", window.innerWidth)
.attr("height", window.innerHeight)
// <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
//image example
vis.selectAll("image")
.data(data)
.enter().append("image")
.attr("xlink:href", "https://www.skuid.com/wp-content/themes/skuid/images/favicon/full/apple-icon-180x180.png")
.attr("width", function() { return r(Math.random()) })
.attr("x", function(d) { return x(d.x) })
.attr("y", function(d) { return y(d.y) })
.attr("opacity", function(d) { return y(d.y)/1000 } )
// .attr("background-color", function() { return c(Math.random()) })
.style('background-color', function() { return c(Math.random()) })
.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
.attr("visibility", "hidden")
.attr("r", function() { return r(Math.random()) })
.on("mouseover", function() {
d3.select(this).transition()
.attr("x", function() { return x(Math.random()) })
.attr("y", function() { return x(Math.random()) })
.delay(0)
.duration(2000)
// .ease("quad")
.ease("elastic", 1.15, .2);
})
//inital load of shapes to space
d3.selectAll("image").transition()
.attr("x", function() { return x(Math.random()) })
.attr("y", function() { return y2(Math.random()) })
.attr("visibility", "visible")
.delay(function(d,i) { return i * Math.random() })
.duration(10000)
.ease("elastic", 1.15, .2);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment