<?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">

<rect x="135" width="20" height="20" fill="#0d6efd" y="13"/>

+

<text class="chart-labels" x="160" y="29" fill="#000000" font-family="Arial" font-size="14" text-anchor="" transform=" rotate(0 160 23)">

<tspan>Asia</tspan>

</text>

[1 lines]

<rect x="235" width="20" height="20" fill="#00fcff" y="13"/>

+

<text class="chart-labels" x="260" y="29" fill="#000000" font-family="Arial" font-size="14" text-anchor="" transform=" rotate(0 260 23)">

<tspan>Europe</tspan>

</text>

[1 lines]

<rect x="335" width="20" height="20" fill="#00f900" y="13"/>

+

<text class="chart-labels" x="360" y="29" fill="#000000" font-family="Arial" font-size="14" text-anchor="" transform=" rotate(0 360 23)">

<tspan>Africa</tspan>

</text>

[1 lines]

<rect class="chart" x="110" y="60" width="600" height="390" fill="#ffffff"/>

+

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

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

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

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

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

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

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

</g>

[6 lines]

+

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

+

<text class="chart-labels" x="98" y="260" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 255)">

<tspan>0</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="98" y="299" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 294)">

<tspan>20</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="98" y="338" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 333)">

<tspan>40</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="98" y="377" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 372)">

<tspan>60</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="98" y="416" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 411)">

<tspan>80</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="98" y="455" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 450)">

<tspan>100</tspan>

</text>

[1 lines]

</g>

[12 lines]

+

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

+

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

<tspan>%</tspan>

</text>

[1 lines]

</g>

[2 lines]

+

<g class="chart-labels chart-double-y" transform="rotate(-90) translate(-390,60)">

+

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

<tspan>Female</tspan>

</text>

[1 lines]

+

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

<tspan>Male</tspan>

</text>

[1 lines]

</g>

[4 lines]

+

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

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

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

</g>

[2 lines]

+

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

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

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

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

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

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

</g>

[5 lines]

+

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

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

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

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

</g>

[3 lines]

+

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

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

</g>

[1 lines]

+

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

+

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

<tspan alignment-baseline="hanging">Poverty</tspan>

</text>

[1 lines]

+

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

<tspan alignment-baseline="hanging">Land</tspan>

</text>

[1 lines]

+

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

<tspan alignment-baseline="hanging">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="12" text-anchor="start">

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

</text>

[1 lines]

</g>

[2 lines]

+

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

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

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

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

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

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

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

</g>

[6 lines]

+

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

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

</g>

[1 lines]

+

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

+

<text class="chart-labels" x="98" y="260" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 255)">

<tspan>0</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="98" y="221" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 216)">

<tspan>20</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="98" y="182" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 177)">

<tspan>40</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="98" y="143" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 138)">

<tspan>60</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="98" y="104" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 99)">

<tspan>80</tspan>

</text>

[1 lines]

+

<text class="chart-labels" x="98" y="65" fill="#000000" font-family="Arial" font-size="12" text-anchor="end" transform=" rotate(0 98 60)">

<tspan>100</tspan>

</text>

[1 lines]

</g>

[12 lines]

+

<g transform="translate(0, 253.5) scale(1, -1)">

+

<path stroke-width="3" fill="none" stroke="#0d6efd" stroke-dasharray="" shape-rendering="geometricPrecision" d="M110,175.5 C155,159.12 320,88.8225 410,66.3 C500,43.7775 665,31.4925 710,25.35">

<animateTransform attributeName="transform" type="scale" from="1 0" to="1 1" begin="0s" dur="1s"/>

</path>

[1 lines]

+

<circle cx="110" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="175">

<title>90%</title>

</circle>

[1 lines]

+

<circle cx="410" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="65.8">

<title>34%</title>

</circle>

[1 lines]

+

<circle cx="710" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="24.85">

<title>13%</title>

</circle>

[1 lines]

</g>

[8 lines]

+

<g transform="translate(0, 253.5)">

+

<path stroke-width="3" fill="none" stroke="#0d6efd" stroke-dasharray="" shape-rendering="geometricPrecision" d="M110,117 C155,103.545 320,35.1975 410,27.3 C500,19.4025 665,58.7925 710,64.35">

<animateTransform attributeName="transform" type="scale" from="1 0" to="1 1" begin="0s" dur="1s"/>

</path>

[1 lines]

+

<circle cx="110" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="116.5">

<title>60%</title>

</circle>

[1 lines]

+

<circle cx="410" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="26.8">

<title>14%</title>

</circle>

[1 lines]

+

<circle cx="710" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="63.85">

<title>33%</title>

</circle>

[1 lines]

</g>

[8 lines]

+

<g transform="translate(0, 253.5) scale(1, -1)">

+

<path stroke-width="3" fill="none" stroke="#00fcff" stroke-dasharray="" shape-rendering="geometricPrecision" d="M110,66.3 C155,69.5175 320,78.0975 410,87.75 C500,97.4025 665,124.215 710,130.65">

<animateTransform attributeName="transform" type="scale" from="1 0" to="1 1" begin="0s" dur="1s"/>

</path>

[1 lines]

+

<circle cx="110" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="65.8">

<title>34%</title>

</circle>

[1 lines]

+

<circle cx="410" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="87.25">

<title>45%</title>

</circle>

[1 lines]

+

<circle cx="710" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="130.15">

<title>67%</title>

</circle>

[1 lines]

</g>

[8 lines]

+

<g transform="translate(0, 253.5)">

+

<path stroke-width="3" fill="none" stroke="#00fcff" stroke-dasharray="" shape-rendering="geometricPrecision" d="M110,124.8 C155,122.1675 320,112.2225 410,107.25 C500,102.2775 665,93.99 710,91.65">

<animateTransform attributeName="transform" type="scale" from="1 0" to="1 1" begin="0s" dur="1s"/>

</path>

[1 lines]

+

<circle cx="110" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="124.3">

<title>64%</title>

</circle>

[1 lines]

+

<circle cx="410" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="106.75">

<title>55%</title>

</circle>

[1 lines]

+

<circle cx="710" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="91.15">

<title>47%</title>

</circle>

[1 lines]

</g>

[8 lines]

+

<g transform="translate(0, 253.5) scale(1, -1)">

+

<path stroke-width="3" fill="none" stroke="#00f900" stroke-dasharray="" shape-rendering="geometricPrecision" d="M110,85.8 C155,77.3175 320,31.2975 410,29.25 C500,27.2025 665,65.715 710,72.15">

<animateTransform attributeName="transform" type="scale" from="1 0" to="1 1" begin="0s" dur="1s"/>

</path>

[1 lines]

+

<circle cx="110" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="85.3">

<title>44%</title>

</circle>

[1 lines]

+

<circle cx="410" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="28.75">

<title>15%</title>

</circle>

[1 lines]

+

<circle cx="710" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="71.65">

<title>37%</title>

</circle>

[1 lines]

</g>

[8 lines]

+

<g transform="translate(0, 253.5)">

+

<path stroke-width="3" fill="none" stroke="#00f900" stroke-dasharray="" shape-rendering="geometricPrecision" d="M110,163.8 C155,161.1675 320,151.2225 410,146.25 C500,141.2775 665,132.99 710,130.65">

<animateTransform attributeName="transform" type="scale" from="1 0" to="1 1" begin="0s" dur="1s"/>

</path>

[1 lines]

+

<circle cx="110" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="163.3">

<title>84%</title>

</circle>

[1 lines]

+

<circle cx="410" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="145.75">

<title>75%</title>

</circle>

[1 lines]

+

<circle cx="710" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" cy="130.15">

<title>67%</title>

</circle>

[1 lines]

</g>

[8 lines]

+

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

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

</g>

[1 lines]

</svg>

[141 lines]