Data Visualization Diagrams, Data Tableau, Bar Charts, Line Charts, Function Charts, Point Charts, Area Charts, Spider Webs, Radar Webs, Donut Charts, Pie Charts, Bubble Charts, Gauge Charts

Data Diagrams

 

Label
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number
minOccurs: 3
datatype: color
datatype: number
type: number
px
datatype: color
type: number
px
FillName
datatype: color
type: text
datatype: color
type: number
px
,px
datatype: color
type: text
datatype: color
type: number
px
,px
datatype: color
type: text
datatype: color
type: number
px
,px
minOccurs: 1
Declare the multiple sources
type: number
px
type: number
px
type: number
px
datatype: color
px
datatype: number
datatype: number
datatype: number
type: text
datatype: color
type: number
px
type: text
px
type: text
datatype: color
px
type: number
°
type: number
px

type: number
px
type: number
px
type: number
°
type: decimal
%

Stroke & fill
datatype: color
type: number
px
,px
datatype: color
Outer distance from frame to context
type: number
px
type: number
px
type: number
px
type: number
px
Inner distance from frame to diagram
type: number
px
type: number
px
type: number
px
type: number
px
type: number
px
datatype: color
datatype: color
type: number
px
,px
datatype: color
type: number
px
,px

AsiaEuropeAfrica
Poverty
datatype: integer
datatype: integer
datatype: integer
Land
datatype: integer
datatype: integer
datatype: integer
Language
datatype: integer
datatype: integer
datatype: integer
Education
datatype: integer
datatype: integer
datatype: integer
Health
datatype: integer
datatype: integer
datatype: integer
<?xml version="1.0" encoding="UTF-8"?>
<dia:data xmlns:dia="http://data-diagrams.com">
<row>
<cell>13</cell>
<cell>10</cell>
</row>
[2 lines]
<row>
<cell>23</cell>
<cell>34</cell>
</row>
[2 lines]
<row>
<cell>20</cell>
<cell>11</cell>
</row>
[2 lines]
<row>
<cell>44</cell>
<cell>45</cell>
</row>
[2 lines]
</dia:data>
[12 lines]

 
 
 
<?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 class="chart-frame" x="0" y="0" width="820" height="500" fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="5,5"/>
<rect x="135" width="20" height="20" fill="#0d6efd" y="2.5"/>
+
<text class="chart-labels" x="160" y="18.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Asia</tspan>
</text>
[1 lines]
<rect x="235" width="20" height="20" fill="#00fcff" y="2.5"/>
+
<text class="chart-labels" x="260" y="18.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Europe</tspan>
</text>
[1 lines]
<rect x="335" width="20" height="20" fill="#00f900" y="2.5"/>
+
<text class="chart-labels" x="360" y="18.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Africa</tspan>
</text>
[1 lines]
+
<polygon class="pie" fill="#0d6efd" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 410,99 0577.4,220.6">
<title>88%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#0d6efd" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 510.8,242.2 0472.3,360.8">
<title>53%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#0d6efd" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 480.5,372.1 0339.5,372.1">
<title>60%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#0d6efd" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 358.3,346.2 0326.3,247.8">
<title>44%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#0d6efd" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 383.4,266.3 0410,247">
<title>14%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#00fcff" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 410,255 0429,268.8">
<title>10%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#00fcff" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 474.7,254 0450,330">
<title>34%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#00fcff" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 493.5,389.9 0326.5,389.9">
<title>71%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#00fcff" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 321.8,396.4 0267.3,228.6">
<title>75%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#00fcff" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 324.4,247.2 0410,185">
<title>45%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#00f900" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 410,155 0524.1,237.9">
<title>60%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#00f900" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 531.7,235.4 0485.2,378.6">
<title>64%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#00f900" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 434.7,309 0385.3,309">
<title>21%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#00f900" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 368.9,331.6 0343.4,253.4">
<title>35%</title>
</polygon>
[1 lines]
+
<polygon class="pie" fill="#00f900" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 381.5,265.7 0410,245">
<title>15%</title>
</polygon>
[1 lines]
<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="14" font-family="Arial" x="406" y="236" text-anchor="end" alignment-baseline="auto">20%</text>
<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="14" font-family="Arial" x="406" y="196" text-anchor="end" alignment-baseline="auto">40%</text>
<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="14" font-family="Arial" x="406" y="156" text-anchor="end" alignment-baseline="auto">60%</text>
<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="14" font-family="Arial" x="406" y="116" text-anchor="end" alignment-baseline="auto">80%</text>
<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="14" font-family="Arial" x="406" y="76" text-anchor="end" alignment-baseline="auto">100%</text>
<line x1="410" y1="275" x2="600" y2="213" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="542.6946325" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="14" font-style="none" y="92.774575" text-anchor="start">
<tspan x="">Poverty</tspan>
</text>
[1 lines]
<line x1="410" y1="275" x2="528" y2="437" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="623.7764125" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="14" font-style="none" y="344.725425" text-anchor="start">
<tspan x="">Land</tspan>
</text>
[1 lines]
<line x1="410" y1="275" x2="292" y2="437" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="410" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="14" font-style="none" y="500" text-anchor="middle">
<tspan x="">Language</tspan>
</text>
[1 lines]
<line x1="410" y1="275" x2="220" y2="213" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="196.2235875" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="14" font-style="none" y="344.725425" text-anchor="end">
<tspan x="">Education</tspan>
</text>
[1 lines]
<line x1="410" y1="275" x2="410" y2="75" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="277.3053675" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="14" font-style="none" y="92.774575" text-anchor="end">
<tspan x="">Health</tspan>
</text>
[1 lines]
<circle cx="410" cy="275" r="5" stroke="" stroke-width="" fill="#000000"/>
+
<a target="_blank" xlink:href="https://data-diagrams.com">
<text x="20" y="495" fill="grey" font-size="10" font-family="arial">data-diagrams.com</text>
</a>
[1 lines]
</svg>
[88 lines]
 
 
 



Oops

Your browser is not supported

A modern browser with Javascript ES6 is required

Any major browser from 2015 onwards will be suitable