<?xml version="1.0" encoding="UTF-8"?>

−

<svg version="1.1" preserveAspectRatio="xMinYMin meet" class="svg-chart" viewBox="0 0 820 500" xmlns:ds="http://www.bootstrap-data.org">

<script type="application/javascript">const doc = this.document; doc.addEventListener("DOMContentLoaded", (ev) => { const svg = ev.currentTarget; 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"/>

<ellipse cx="410" cy="250" rx="200" ry="200" stroke="#000000" stroke-width="1" stroke-dasharray="" fill="whiteSmoke"/>

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(8.76px,-4.82px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M410,50 A200,200 0 0,1 578.87,357.17"/>

<path class="pie" fill="#0d6efd" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="1" d="M410,250 L410,50 A200,200 0 0,1 578.87,357.17 z"/>

+

<text fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" x="607.168" y="141.606" text-anchor="start">

<tspan x="607.17">Poverty</tspan>

</text>

[1 lines]

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="563.35" y="165.69">34%</text>

+

<foreignObject style="display:none;" width="120" height="90">

+

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

<g/>

</g>

[17 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(5.36px,8.44px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M578.87,357.17 A200,200 0 0,1 447.48,446.46"/>

<path class="pie" fill="#00fcff" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="1" d="M410,250 L578.87,357.17 A200,200 0 0,1 447.48,446.46 z"/>

+

<text fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" x="530.566" y="439.978" text-anchor="start">

<tspan x="530.57">Land</tspan>

</text>

[1 lines]

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="503.77" y="397.76">13%</text>

+

<foreignObject style="display:none;" width="120" height="90">

+

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

<g/>

</g>

[17 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(-9.3px,3.68px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M447.48,446.46 A200,200 0 0,1 292.44,88.2"/>

<path class="pie" fill="#00f900" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="1" d="M410,250 L447.48,446.46 A200,200 0 0,1 292.44,88.2 z"/>

+

<text fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" x="200.796" y="332.823" text-anchor="end">

<tspan x="200.8">Language</tspan>

</text>

[1 lines]

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="247.29" y="314.42">43%</text>

+

<foreignObject style="display:none;" width="120" height="90">

+

<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>43%</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]

<g/>

</g>

[17 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(-3.09px,-9.51px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M292.44,88.2 A200,200 0 0,1 410,50"/>

<path class="pie" fill="#fd0dbd" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="1" d="M410,250 L292.44,88.2 A200,200 0 0,1 410,50 z"/>

+

<text fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" x="340.475" y="36.014" text-anchor="end">

<tspan x="340.47">Education</tspan>

</text>

[1 lines]

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="355.92" y="83.57">10%</text>

+

<foreignObject style="display:none;" width="120" height="90">

+

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

<g/>

</g>

[17 lines]

<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 white; 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>

[76 lines]