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

−

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

<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="200" width="20" height="20" fill="#0d6efd" y="15"/>

+

<text class="chart-labels" x="225" y="31" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 225 25)">

<tspan>Buddhist</tspan>

</text>

[1 lines]

<rect x="300" width="20" height="20" fill="#00fcff" y="15"/>

+

<text class="chart-labels" x="325" y="31" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 325 25)">

<tspan>Christian</tspan>

</text>

[1 lines]

<rect x="400" width="20" height="20" fill="#00f900" y="15"/>

+

<text class="chart-labels" x="425" y="31" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 425 25)">

<tspan>Hindu</tspan>

</text>

[1 lines]

</g>

[9 lines]

+

<g class="chart-grid chart-x">

<line x1="310" x2="310" y1="50" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>

<line x1="510" x2="510" y1="50" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>

<line x1="710" x2="710" y1="50" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>

</g>

[3 lines]

+

<g class="chart-grid chart-y">

<line x1="110" x2="710" y1="50" y2="50" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>

<line x1="110" x2="710" y1="183.3" y2="183.3" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>

<line x1="110" x2="710" y1="316.7" y2="316.7" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>

</g>

[3 lines]

+

<g class="chart-axis-x chart-markers">

<line x1="110" x2="110" y1="450.5" y2="454.5" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>

<line x1="310" x2="310" y1="450.5" y2="454.5" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>

<line x1="510" x2="510" y1="450.5" y2="454.5" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>

<line x1="710" x2="710" y1="450.5" y2="454.5" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>

</g>

[4 lines]

+

<g class="chart-axis-x">

<line x1="110" x2="710" y1="450.5" y2="450.5" shape-rendering="geometricPrecision" stroke="#000000" stroke-width="1" stroke-dasharray="" stroke-dashoffset=""/>

</g>

[1 lines]

+

<g class="chart-labels chart-labels-x">

+

<text class="chart-labels" x="210" y="464" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">

<tspan alignment-baseline="text-before-edge">Poverty</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="410" y="464" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">

<tspan alignment-baseline="text-before-edge">Land</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="610" y="464" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">

<tspan alignment-baseline="text-before-edge">Language</tspan>

</text>

[1 lines]

</g>

[6 lines]

+

<g class="chart-labels chart-title-x">

+

<text class="chart-labels" x="724" y="450" fill="#000000" font-family="Arial" font-size="20" text-anchor="start">

<tspan alignment-baseline="middle">Citizen</tspan>

</text>

[1 lines]

</g>

[2 lines]

+

<g class="chart-axis-y">

<line x1="110" x2="110" y1="450.5" y2="49.5" shape-rendering="geometricPrecision" stroke="#000000" stroke-width="1"/>

</g>

[1 lines]

+

<g class="chart-axis-y chart-markers">

<line x1="106.5" x2="109.5" y1="450" y2="450" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>

<line x1="106.5" x2="109.5" y1="50" y2="50" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>

<line x1="106.5" x2="109.5" y1="183.333" y2="183.333" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>

<line x1="106.5" x2="109.5" y1="316.667" y2="316.667" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>

</g>

[4 lines]

+

<g class="chart-labels chart-labels-y">

+

<text class="chart-labels" x="96" y="122.667" fill="#000000" font-family="Arial" font-size="14" text-anchor="end" transform="rotate(0 96 116.666666666667)">

<tspan>Asia</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="96" y="256" fill="#000000" font-family="Arial" font-size="14" text-anchor="end" transform="rotate(0 96 250)">

<tspan>Europe</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="96" y="389.333" fill="#000000" font-family="Arial" font-size="14" text-anchor="end" transform="rotate(0 96 383.333333333333)">

<tspan>Africa</tspan>

</text>

[1 lines]

</g>

[6 lines]

+

<g class="chart-labels chart-title-y">

+

<text class="chart-labels" x="110" y="30" fill="#000000" font-family="Arial" font-size="20" text-anchor="middle" transform="rotate(0 110 30)">

<tspan>Right</tspan>

</text>

[1 lines]

</g>

[2 lines]

+

<g>

+

<g>

+

<circle cx="210" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="22.44">

<title>33%</title>

</circle>

[1 lines]

+

<circle cx="210" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="14.96">

<title>33%</title>

</circle>

[1 lines]

+

<circle cx="210" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="7.48">

<title>33%</title>

</circle>

[1 lines]

</g>

[6 lines]

+

<g>

+

<circle cx="410" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="30">

<title>20%</title>

</circle>

[1 lines]

+

<circle cx="410" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="12">

<title>20%</title>

</circle>

[1 lines]

+

<circle cx="410" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="6">

<title>60%</title>

</circle>

[1 lines]

</g>

[6 lines]

+

<g>

+

<circle cx="610" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="22">

<title>30%</title>

</circle>

[1 lines]

+

<circle cx="610" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="17.6">

<title>50%</title>

</circle>

[1 lines]

+

<circle cx="610" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="6.6">

<title>20%</title>

</circle>

[1 lines]

</g>

[6 lines]

</g>

[21 lines]

+

<g>

+

<g>

+

<circle cx="210" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="8.67">

<title>10%</title>

</circle>

[1 lines]

+

<circle cx="210" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="3.47">

<title>30%</title>

</circle>

[1 lines]

+

<circle cx="210" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="0.87">

<title>60%</title>

</circle>

[1 lines]

</g>

[6 lines]

+

<g>

+

<circle cx="410" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="44.67">

<title>30%</title>

</circle>

[1 lines]

+

<circle cx="410" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="17.87">

<title>10%</title>

</circle>

[1 lines]

+

<circle cx="410" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="13.4">

<title>60%</title>

</circle>

[1 lines]

</g>

[6 lines]

+

<g>

+

<circle cx="610" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="64.67">

<title>40%</title>

</circle>

[1 lines]

+

<circle cx="610" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="51.73">

<title>40%</title>

</circle>

[1 lines]

+

<circle cx="610" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="25.87">

<title>20%</title>

</circle>

[1 lines]

</g>

[6 lines]

</g>

[21 lines]

+

<g>

+

<g>

+

<circle cx="210" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="16">

<title>33%</title>

</circle>

[1 lines]

+

<circle cx="210" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="10.56">

<title>33%</title>

</circle>

[1 lines]

+

<circle cx="210" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="5.28">

<title>34%</title>

</circle>

[1 lines]

</g>

[6 lines]

+

<g>

+

<circle cx="410" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="16">

<title>30%</title>

</circle>

[1 lines]

+

<circle cx="410" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="8">

<title>20%</title>

</circle>

[1 lines]

+

<circle cx="410" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="4.8">

<title>50%</title>

</circle>

[1 lines]

</g>

[6 lines]

+

<g>

+

<circle cx="610" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="16">

<title>50%</title>

</circle>

[1 lines]

+

<circle cx="610" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="9.6">

<title>10%</title>

</circle>

[1 lines]

+

<circle cx="610" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="8">

<title>40%</title>

</circle>

[1 lines]

</g>

[6 lines]

</g>

[21 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:rgb(33,37,41);color:white;font-family:Arial;font-size:14px; 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 rgb(33,37,41); } 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 rgb(33,37,41); } 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 rgb(33,37,41); } 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 rgb(33,37,41); } </style>

</svg>

[120 lines]