Graphical Transition + Zoom Test

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

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

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Transition Test</title>
  <meta charset="utf-8" />
</head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/colorbrewer.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/colorbrewer.v1.min.js