Skip to content

Instantly share code, notes, and snippets.

@emeeks

emeeks/index.html

Last active August 29, 2015 14:05
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 emeeks/665ed7590d7f48cd408d to your computer and use it in GitHub Desktop.
Save emeeks/665ed7590d7f48cd408d to your computer and use it in GitHub Desktop.
Download ZIP
Graphical Transition + Zoom Test
Raw
readme.md

A test to see if transitions and zooming cause problems in Safari.

Spoiler: No it doesn't seem like they do.

Raw
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Transition Test</title>
<meta charset="utf-8" />
</head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<style>
body, html {
width:100%;
height:100%;
}
#vizcontainer {
width:100%;
height:100%;
}
svg {
width: 100%;
height: 100%;
}
</style>
<body onload="tTest();">
<div id="vizcontainer">
<svg></svg>
</div>
<footer>
<script>
function tTest() {
var testData = d3.range(3000).map(function() {
return {x: Math.random(), y: Math.random()}
})
d3.select("svg")
.append("g")
.attr("class", "zoom")
.selectAll("circle.test")
.data(testData)
.enter()
.append("circle")
.attr("cx", function(d) {return d.x * 500})
.attr("cy", function(d) {return d.y * 500})
var zoom = d3.behavior.zoom().on("zoom", zoomed);
d3.select("svg").call(zoom);
function zoomed() {
d3.select("g.zoom")
.attr("transform", "translate(" + zoom.translate() + ")")
}
d3.selectAll("circle")
.attr("r", 3)
.style("fill", "black")
.transition()
.delay(function(d,i) {return i * 3})
.duration(1000)
.style("fill", "blue")
.attr("r", 6)
.transition()
.duration(1000)
.style("fill", "red")
.attr("r", 1)
}
</script>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment