D3 Examples - Simple transitioning slides with SVG and D3 (from ZJONSSON)

xxxxxxxxxx
 
<!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>
​
<script type="text/javascript">
    
    // There are probably better ways of loading the SVG, but this is one example I found
​
    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>
    