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="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<style> | |
@import url(http://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> |
view on bl.ocks