d3 | Military Crosses | Sikhs WW1

Chart to show the twenty-two Military Crosses awarded for conspicuous gallantry to Indians, the Sikhs won fourteen.

d3 example shows the loading of external SVG into the viewport

<!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>

</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>

// 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>

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

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