Skip to content

Instantly share code, notes, and snippets.

@Rnhatch

Rnhatch/index.html

Last active April 12, 2017 01:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Rnhatch/1511583 to your computer and use it in GitHub Desktop.
Save Rnhatch/1511583 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Blocks: Play with transitions and color scales of 1000 blocks.
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://github.com/mbostock/d3/raw/v1.8.2/d3.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.js"></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>
</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([20,50]),
c = d3.scale.linear().domain([0,1]).range(["hsl(250, 50%, 50%)", "hsl(360, 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("rect")
.data(data)
.enter().append("svg:rect")
.attr("x", function(d) { return x(d.x) })
.attr("y", 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("width", function() { return r(Math.random()) })
.attr("height", function() { return r(Math.random()) })
.attr("rx", 3)
.on("mouseover", function() {
d3.select(this).transition()
.attr("x", function() { return y2(Math.random()) })
.attr("y", function() { return y2(Math.random()) })
.delay(0)
.duration(2000)
.ease("bounce")
//.ease("elastic", 10, .3)
})
//inital load of shapes to space
d3.selectAll("rect").transition()
.attr("x", function() { return x(Math.random()) })
.attr("y", function() { return y2(Math.random()) })
.attr("width", function() { return r(Math.random()) })
.attr("height",function() { return r(Math.random()) })
.attr("rx", 3)
.attr("visibility", "visible")
.delay(function(d,i) { return i * Math.random() })
.duration(2000)
.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