<?xml version="1.0" encoding="UTF-8"?>
−
<svg version="1.1" preserveAspectRatio="xMinYMin meet" class="svg-chart" viewBox="0 0 820 500" id="svgz222_idm140149831982704" xmlns:ds="http://www.bootstrap-data.org">
<script type="application/javascript">(function () { const id = 'svgz222_idm140149831982704'; const doc = this.document; doc.addEventListener("DOMContentLoaded", (ev) => { const svg = document.getElementById(id); const growArr = svg.querySelectorAll("g.pie[data-transform]"); growArr.forEach(async (item) => { const svg = item.closest('svg'); await item.setAttribute('data-stroke-width', await item.style.strokeWidth); item.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); const obj = e.currentTarget; const transform = obj.getAttribute('data-transform'); if( obj.hasAttribute('data-transform') ) { obj.style.transition = 'transform 500ms ease-in-out'; obj.style.transform = transform; } }, false); item.addEventListener("mouseleave", (e) => { e.stopPropagation(); e.preventDefault(); const obj = e.currentTarget; obj.style.transform = 'translate(0,0)'; obj.style.strokeWidth = obj.getAttribute('data-stroke-width'); }, false); } ); const edgeArr = svg.querySelectorAll("path.edge"); edgeArr.forEach(async (item) => { const g = item.closest('g'); g.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); item.style.display = '' }, false); g.addEventListener("mouseleave", (e) => { e.stopPropagation(); e.preventDefault(); item.style.display = 'none'; }, false); } ); const toolArr = svg.querySelectorAll("foreignObject"); toolArr.forEach(async (foreign) => { const svg = foreign.closest('svg'); const g = foreign.closest('g'); var pt = svg.createSVGPoint(); g.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); svg.appendChild(foreign); }, false); g.addEventListener("mousemove", async (e) => { e.stopPropagation(); e.preventDefault(); const viewBox = svg.getAttribute('viewBox'); const vBArr = viewBox.split(' '); const vBWidth = vBArr[2]; foreign.style.display = ''; const W = foreign.clientWidth; const H = foreign.clientHeight; const inner = foreign.querySelector('div.tool-outer'); const w = inner.clientWidth; var loc = cursorPoint(e); const X = loc.x; const Y = loc.y; let cX = X - w / 2; let cY = Y - H - 2; if(Y < H + 10) { cY = Y + 10; foreign.querySelector('.arrow-up').style.display = ''; foreign.querySelector('.arrow-down').style.display = 'none'; } else { foreign.querySelector('.arrow-up').style.display = 'none'; foreign.querySelector('.arrow-down').style.display = ''; } if(X < w / 2) { } if(X < vBWidth - w / 2) { } foreign.setAttribute('x',parseInt(cX)); foreign.setAttribute('y',parseInt(cY)); function cursorPoint(e) { pt.x = e.clientX; pt.y = e.clientY; return pt.matrixTransform(svg.getScreenCTM().inverse()); } }, false); g.addEventListener("mouseleave", (e) => { e.stopPropagation(); e.preventDefault(); foreign.style.display = 'none'; }, false); }); }); })();</script>
<rect class="chart-frame" x="0" y="0" width="820" height="500" fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="5,5"/>
+
<g>
<rect x="100" width="20" height="20" fill="#0d6efd" y="34.5"/>
+
<text class="chart-labels" x="125" y="50.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 125 44.5)">
<tspan>Asia</tspan>
</text>
[1 lines]
<rect x="100" width="20" height="20" fill="#00fcff" y="56.5"/>
+
<text class="chart-labels" x="125" y="72.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 125 66.5)">
<tspan>Europe</tspan>
</text>
[1 lines]
<rect x="100" width="20" height="20" fill="#00f900" y="78.5"/>
+
<text class="chart-labels" x="125" y="94.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 125 88.5)">
<tspan>Africa</tspan>
</text>
[1 lines]
<rect x="100" width="20" height="20" fill="#ff1900" y="100.5"/>
+
<text class="chart-labels" x="125" y="116.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 125 110.5)">
<tspan>Russia</tspan>
</text>
[1 lines]
</g>
[12 lines]
+
<g>
+
<path stroke="#0d6efd" stroke-width="5" fill="transparent" d="M435,267 L472,361 L339,372 L326,248 L410,247 Z">
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Poverty</default:div>
<default:small>13%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Land</default:div>
<default:small>53%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="123" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Language</default:div>
<default:small>60%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="138" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Education</default:div>
<default:small>44%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Health</default:div>
<default:small>14%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
</path>
[55 lines]
</g>
[56 lines]
+
<g>
+
<path stroke="#00fcff" stroke-width="5" fill="transparent" d="M429,269 L450,330 L327,390 L267,229 L410,185 Z">
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Poverty</default:div>
<default:small>10%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Land</default:div>
<default:small>34%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="123" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Language</default:div>
<default:small>71%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="138" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Education</default:div>
<default:small>75%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Health</default:div>
<default:small>45%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
</path>
[55 lines]
</g>
[56 lines]
+
<g>
+
<path stroke="#00f900" stroke-width="5" fill="transparent" d="M524,238 L485,379 L385,309 L343,253 L410,245 Z">
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Poverty</default:div>
<default:small>60%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Land</default:div>
<default:small>64%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="123" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Language</default:div>
<default:small>21%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="138" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Education</default:div>
<default:small>35%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Health</default:div>
<default:small>15%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
</path>
[55 lines]
</g>
[56 lines]
+
<g>
+
<path stroke="#ff1900" stroke-width="5" fill="transparent" d="M505,244 L469,356 L351,356 L315,244 L410,175 Z">
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Poverty</default:div>
<default:small>50%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Land</default:div>
<default:small>50%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="123" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Language</default:div>
<default:small>50%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="138" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Education</default:div>
<default:small>50%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Health</default:div>
<default:small>50%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
</path>
[55 lines]
</g>
[56 lines]
+
<g>
+
<g>
<line x1="410" y1="235" x2="448" y2="263" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="448" y1="263" x2="434" y2="307" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="434" y1="307" x2="386" y2="307" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="386" y1="307" x2="372" y2="263" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="372" y1="263" x2="410" y2="235" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<text class="percent" fill="#000000" font-size="12" font-family="Arial" x="406" y="236" text-anchor="end" alignment-baseline="auto">20%</text>
</g>
[6 lines]
+
<g>
<line x1="410" y1="195" x2="486" y2="250" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="486" y1="250" x2="457" y2="340" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="457" y1="340" x2="363" y2="340" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="363" y1="340" x2="334" y2="250" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="334" y1="250" x2="410" y2="195" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<text class="percent" fill="#000000" font-size="12" font-family="Arial" x="406" y="196" text-anchor="end" alignment-baseline="auto">40%</text>
</g>
[6 lines]
+
<g>
<line x1="410" y1="155" x2="524" y2="238" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="524" y1="238" x2="481" y2="372" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="481" y1="372" x2="339" y2="372" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="339" y1="372" x2="296" y2="238" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="296" y1="238" x2="410" y2="155" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<text class="percent" fill="#000000" font-size="12" font-family="Arial" x="406" y="156" text-anchor="end" alignment-baseline="auto">60%</text>
</g>
[6 lines]
+
<g>
<line x1="410" y1="115" x2="562" y2="226" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="562" y1="226" x2="504" y2="404" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="504" y1="404" x2="316" y2="404" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="316" y1="404" x2="258" y2="226" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="258" y1="226" x2="410" y2="115" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<text class="percent" fill="#000000" font-size="12" font-family="Arial" x="406" y="116" text-anchor="end" alignment-baseline="auto">80%</text>
</g>
[6 lines]
+
<g>
<line x1="410" y1="75" x2="600" y2="213" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="600" y1="213" x2="528" y2="437" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="528" y1="437" x2="292" y2="437" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="292" y1="437" x2="220" y2="213" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="220" y1="213" x2="410" y2="75" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<text class="percent" fill="#000000" font-size="12" font-family="Arial" x="406" y="76" text-anchor="end" alignment-baseline="auto">100%</text>
</g>
[6 lines]
</g>
[35 lines]
+
<g>
+
<g>
<line x1="410" y1="275" x2="600" y2="213" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="619" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="20" font-style="none" y="207" text-anchor="start">
<tspan x="">Poverty</tspan>
</text>
[1 lines]
</g>
[3 lines]
+
<g>
<line x1="410" y1="275" x2="528" y2="437" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="540" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="20" font-style="none" y="453" text-anchor="start">
<tspan x="">Land</tspan>
</text>
[1 lines]
</g>
[3 lines]
+
<g>
<line x1="410" y1="275" x2="292" y2="437" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="280" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="20" font-style="none" y="453" text-anchor="end">
<tspan x="">Language</tspan>
</text>
[1 lines]
</g>
[3 lines]
+
<g>
<line x1="410" y1="275" x2="220" y2="213" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="201" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="20" font-style="none" y="207" text-anchor="end">
<tspan x="">Education</tspan>
</text>
[1 lines]
</g>
[3 lines]
+
<g>
<line x1="410" y1="275" x2="410" y2="75" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="410" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="20" font-style="none" y="55" text-anchor="middle">
<tspan x="">Health</tspan>
</text>
[1 lines]
</g>
[3 lines]
</g>
[20 lines]
<circle cx="410" cy="275" r="5" stroke="" stroke-width="" fill="#000000"/>
<style type="text/css" media="all">.svg-chart * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .svg-chart .bar { fill-opacity:1; } .svg-chart .bar:hover { fill-opacity:0.8; } .svg-chart .pie { fill-opacity:1; } /* .svg-chart .pie:hover { stroke: grey; stroke-width: 3px; } */ .pie:hover { fill-opacity:0.8; } .subpie:hover { fill-opacity:0.8; } foreignObject { /* position:relative; */ } foreignObject>div.tool-outer { /* float:left; */ min-width:120px; background-color:#212529;color:#ffffff;font-family:Arial;font-size:20px; padding:5px; border:1px solid grey; border-radius:3px; } foreignObject>div>div.tool-inner { text-align:center; } foreignObject>div>div.arrow-up { position:relative; top:2px; margin-left:auto; margin-right:auto; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #212529; } foreignObject>div.tool-hold { background-color: transparent; /* width:100%; height:100%; */ /* position:relative; */ /*top:-2px; */ } foreignObject>div>div.arrow-down { position:relative; top:-2px; margin-left:auto; margin-right:auto; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #212529; } foreignObject>div>div.arrow-right { position:absolute; margin-top:auto; margin-bottom:auto; margin-left:auto; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #212529; } foreignObject>div>div.arrow-left { position:absolute; left:-10px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #212529; }</style>
</svg>
[302 lines]
The link only works for 24 hours. Sign Up for permanent link.