D3 Examples - d3 | Military Crosses

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Military Crosses | Sikhs WW1</title>
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
​
        <style>
        @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);
        body {font-family: "Source Code Pro", Consolas, monaco, monospace; line-height: 160%; font-size: 18px;  margin: 0; }
        header { padding: 20px; max-width : 680px;}
        .medals {width: 80px; height: 120px; display: inline-block;  margin: 10px;}
        /*#medalVis {}*/
        </style>
​
    </head>
    <body>
        <header>
            <h1>Military Crosses | Sikhs WW1</h1> 
​
            <p>Of the twenty-two Military Crosses awarded for conspicuous gallantry to Indians, the <span class="sikh">Sikhs</span> won fourteen. </p>
        </header>
        <div id="medalVis"></div>
​
        <script type="text/javascript">
​
            // width and height
            var w = 100;
            var h = 100;
​
            var max = 23, data = [];
            for (var i = 1; i < max; ++i) data.push(i);
            
            
            var container = d3.select("#medalVis")
                
                          
            var svgWrap = container.selectAll("svg")
                .data(data);
​
            svgWrap
                    .enter().append("svg")
                    .attr("class","medals")
        
            svgWrap
                    .append("svg:image")
                          .attr("xlink:href", function (d,i) {
                            if (i <= 14) { // number of medals
                              return "medal.svg";
                            } else {
                              return "medalv2.svg";
                            }
                          })
                          .style("opacity",0)
                          .transition()
                          .delay(function(d, i) { return i * 250; })
                          .style("opacity",1)
                          .attr("width", w)
                          .attr("height", h)
                          .attr("x", 0)
                          .attr("y",0)
                          .style("fill", "red");
​
            </script>
​
​
​
    </body>
</html>
    