{{? it.infographic }}
	<div class='infographic'>
		<div class = 'infographicDef' style='display:none'>
			<svg>
				<defs>
					<g id="{{=it.infographic.svgId}}">
						{{=it.infographic.content}}
					</g>
				</defs>
			</svg>
		</div>

		{{ for(var i=0; i<it.infographic.scaleComponents.numShapes; i++) { }}
			<div class='infographic-content coloredShape {{=it.infographic.style.colorClass}}'>
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="staticContent" {{=it.infographic.style.coloredStyle}} height="100%" width="100%" preserveAspectRatio="none" viewBox="{{=it.infographic.viewBox}}">
					{{? it.infographic.doFillAnimation }}
						<use xlink:href="#{{=it.infographic.svgId}}" class="greyed{{=it.infographic.style.svgClass}}" />
					{{?}}
					<use xlink:href="#{{=it.infographic.svgId}}" {{? it.infographic.doFillAnimation }} class="animate" style="animation-delay: {{=i * it.infographic.fillDuration}}s; animation-duration: {{=it.infographic.fillDuration}}s" {{?}}/>
				</svg>
			</div>
		{{ } }}

		{{? it.infographic.scaleComponents.partialValue > 0 }}
			<div class='infographic-content {{=it.infographic.style.colorClass}}'>
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="staticContent" {{=it.infographic.style.coloredStyle}} height="100%" width="100%" preserveAspectRatio="none" viewBox="{{=it.infographic.viewBox}}">
					<clipPath id="fill_{{=it.infographic.svgId}}_partial">
						<rect x="0" y="{{=it.infographic.clipPathLastElement.y}}" width="{{=it.infographic.clipPathLastElement.width}}" height="100%" />
					</clipPath>
					<use xlink:href="#{{=it.infographic.svgId}}" class="greyed{{=it.infographic.style.svgClass}}" />
					<use xlink:href="#{{=it.infographic.svgId}}" clip-path="url(#fill_{{=it.infographic.svgId}}_partial)" {{? it.infographic.doFillAnimation }} class="animate" style="animation-delay: {{=i * it.infographic.fillDuration}}s; animation-duration: {{=it.infographic.fillDuration}}s" {{?}}/>
				</svg>
			</div>
		{{?}}

		{{ for(var i=0; i<it.infographic.scaleComponents.numGreyedShapes; i++) { }}
			<div class='infographic-content greyed{{=it.infographic.style.svgClass}}'>
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="staticContent" height="100%" width="100%" preserveAspectRatio="none" viewBox="{{=it.infographic.viewBox}}">
					 <use xlink:href="#{{=it.infographic.svgId}}"/>
				</svg>
			</div>
		{{ } }}
	</div>

	{{? it.showTitleString }}
	<div class='infographic-scale'>
		<div class='infographic-scale-wrapper'>
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100%" width="100%" preserveAspectRatio="none" viewBox="{{=it.infographic.viewBox}}">
				<use class='infographicLegend{{=it.infographic.style.svgClass}}' xlink:href="#{{=it.infographic.svgId}}"/>
			</svg>
			<span class='infographicLegendText'> = {{? it.infographic.percentageScaleValue}}{{=it.infographic.percentageScaleValue}}{{??}}{{=it.infographic.abbreviatedScale}}{{?}} {{=it.label}}</span>
		</div>
	</div>
	{{?}}
{{??}}
<div></div>
{{?}}