Simple transitioning slides with SVG and D3 (from ZJONSSON)

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<script type="text/javascript" src="svg_slides.js"></script>

d3.xml("test.svg", "image/svg+xml", function(xml) {
        var importedNode = document.importNode(xml.documentElement, true);
        d3.select("body").node().appendChild(importedNode);
        
        svg=d3.select("body").select("svg")
            .attr("height","100%")
            .attr("width","100%");
        slides = svg_slides(svg,1500);
      
        // Lets test the slide scales - put a bouncing ball on slide id 3
        s = slides[3];
        circle = svg.append("svg:circle")
            .attr("cx",s.scale_x(500)).attr("cy",s.scale_y(500))
            .attr("r",20)
            .style("fill","steelblue");
        
        next = 500;                
        
        function bounce() {
            next = -next;
            circle.transition().duration(2500).attr("cx",s.scale_x(500+next))
            .each("end",bounce);
        }
        
        bounce();     
    });

</script>
</head>
<body></body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js