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> |
<?xml version="1.0" encoding="utf-8"?> | |
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In --> | |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ | |
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"> | |
]> | |
<svg version="1.1" | |
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" | |
x="0px" y="0px" width="100px" height="200px" viewBox="-6.301 -2.684 100 200" | |
overflow="visible" enable-background="new -6.301 -2.684 100 200" xml:space="preserve"> | |
<defs> | |
</defs> | |
<path fill="#FF4611" d="M26.022,107h0.15c-0.128-0.071-0.214-0.114-0.214-0.114L26.022,107z"/> | |
<path fill="#FF4611" d="M0.114,167.834v-0.152C0.042,167.811,0,167.897,0,167.897L0.114,167.834z"/> | |
<path fill="#FF4611" d="M61.114,106.965c0,0-0.028,0.011-0.08,0.035h0.08V106.965z"/> | |
<path fill="#FF4611" d="M87.228,167.897c0,0-0.042-0.086-0.113-0.213v0.15L87.228,167.897z"/> | |
<path fill="#FF4611" d="M87.02,132.559c0,0-2.933,6.441-15.322,6.441H54.114v-16.844c0-11.61,6.147-14.801,6.92-15.156H48.051 | |
c-0.37-1-0.724-1.573-1.049-2.42c0.818-0.993,1.31-2.302,1.31-3.689c0-2.215-1.285-4.154-3.12-5.115 | |
c-0.029-0.584-0.078-1.202-0.078-1.819c0-0.215,0-0.424,0-0.629c2-0.951,3.166-3.167,3.166-5.401c0-0.955-0.201-1.927-0.613-2.927 | |
h37.447V73h-3V1.742c0-0.962-0.937-1.742-1.9-1.742H6.655C5.692,0,5.114,0.78,5.114,1.742V73h-3v12h35.345 | |
c-0.411,1-0.646,1.972-0.646,2.927c0,3.095,2.447,5.759,5.513,5.884c-0.023,0.38-0.056,0.838-0.096,1.234 | |
c-3.02,0.172-5.417,2.711-5.417,5.774c0,1.962,0.984,3.784,2.484,4.821c-0.203,0.422-0.421,0.36-0.649,1.36H26.172 | |
c1.122,0.626,6.942,4.227,6.942,15v17H15.172c-12.39,0-15.143-6.441-15.143-6.441l0.085,0.431c0,0,0,34.672,0,34.693 | |
c0-0.351,0.802-1.132,1.02-1.387c0.607-0.713,1.305-1.347,2.058-1.903c4.637-3.423,10.759-3.476,16.269-3.398L33.114,161v17 | |
c0,13-6.982,15.614-6.982,15.614L26.022,194h35.092v-0.045c0,0-7-2.884-7-15.273V161c4.299,0,8.598-0.002,12.897,0 | |
c5.414,0.002,11.271-0.237,16.062,2.719c1.183,0.73,2.314,1.717,3.184,2.805c0.291,0.364,0.629,0.751,0.856,1.16v-34.695 | |
L87.02,132.559z M40.589,102.491c-0.369-0.444-0.591-1.014-0.591-1.637c0-1.122,0.722-2.072,1.725-2.42 | |
C41.451,99.74,41.083,101.099,40.589,102.491z M6.114,82v-4.282C6.114,77.782,6.451,78,6.655,78h73.459v4H6.114z M39.999,88.208 | |
c0-1.135,0.738-2.097,1.761-2.435c0.189,0.835,0.523,2.604,0.61,4.99C41.044,90.663,39.999,89.558,39.999,88.208z"/> | |
</svg> |
view on bl.ocks