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

 

FillLabel
datatype: color
type: text
datatype: color
datatype: number
datatype: color
type: text
datatype: color
datatype: number
datatype: color
type: text
datatype: color
datatype: number
minOccurs: 1
datatype: color
px
type: number
°
datatype: color
px
FillLabel
datatype: color
type: text
datatype: color
type: text
datatype: color
type: text
minOccurs: 1
Declare the stack
type: number
px
type: number
px
type: number
px
datatype: color
px
datatype: integer
type: text
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
datatype: color
type: number
px
datatype: color
type: number
px
datatype: color
type: number
px
,px
datatype: color
type: number
px
,px

Buddhist
Christian
Hindu
Poverty
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Land
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Language
datatype: integer
datatype: integer
datatype: integer
datatype: integer
<?xml version="1.0" encoding="UTF-8"?>
<dia:data xmlns:ds="http://www.bootstrap-data.org" xmlns:dia="http://data-diagrams.com">
<row>
<cell value="34">
<sub>13</sub>
<sub>33</sub>
<sub>54</sub>
</cell>
[3 lines]
</row>
[4 lines]
<row>
<cell value="24">
<sub>20</sub>
<sub>30</sub>
<sub>50</sub>
</cell>
[3 lines]
</row>
[4 lines]
<row>
<cell value="54">
<sub>50</sub>
<sub>30</sub>
<sub>20</sub>
</cell>
[3 lines]
</row>
[4 lines]
</dia:data>
[15 lines]
type: file

 
 
 
<?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="55" width="20" height="20" fill="#0d6efd" y="52"/>
+
<text class="chart-labels" x="80" y="68" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Asian</tspan>
</text>
[1 lines]
<rect x="55" width="20" height="20" fill="#00fcff" y="74"/>
+
<text class="chart-labels" x="80" y="90" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>African</tspan>
</text>
[1 lines]
<rect x="55" width="20" height="20" fill="#00f900" y="96"/>
+
<text class="chart-labels" x="80" y="112" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>European</tspan>
</text>
[1 lines]
<circle cx="410" cy="250" r="200" fill-opacity="0.5" stroke="#000000" stroke-width="1" fill="whiteSmoke"/>
+
<path class="pie" fill="#ff40ff" fill-opacity="" stroke="#000000" stroke-width="1" stroke-dasharray="" d="M410,250 L410,50 A200,200 0 0,1 600.21,311.8 z">
<title>30%</title>
</path>
[1 lines]
+
<text x="592.025425" fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" y="117.7453675" text-anchor="start">
<tspan x="592.025425">Poverty</tspan>
</text>
[1 lines]
<text class="value" fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="547.53" y="150.08">30%</text>
+
<path class="subpie" fill="#0d6efd" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L410,130 A120,120 0 0,1 439.84,133.77 z">
<title>13%</title>
</path>
[1 lines]
<text fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="422.78" y="148.8">13%</text>
+
<path class="subpie" fill="#00fcff" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L439.84,133.77 A120,120 0 0,1 502.46,173.51 z">
<title>33%</title>
</path>
[1 lines]
<text fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="464.65" y="163.88">33%</text>
+
<path class="subpie" fill="#00f900" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L502.46,173.51 A120,120 0 0,1 524.13,287.08 z">
<title>54%</title>
</path>
[1 lines]
<text fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="510.19" y="230.89">54%</text>
+
<path class="pie" fill="#932092" fill-opacity="" stroke="#000000" stroke-width="1" stroke-dasharray="" d="M410,250 L600.21,311.8 A200,200 0 0,1 410,450 z">
<title>20%</title>
</path>
[1 lines]
+
<text x="542.2546325" fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" y="432.025425" text-anchor="start">
<tspan x="542.2546325">Land</tspan>
</text>
[1 lines]
<text class="value" fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="509.92" y="387.53">20%</text>
+
<path class="subpie" fill="#0d6efd" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L524.13,287.08 A120,120 0 0,1 511.32,314.3 z">
<title>20%</title>
</path>
[1 lines]
<text fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="502.29" y="293.43">20%</text>
+
<path class="subpie" fill="#00fcff" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L511.32,314.3 A120,120 0 0,1 480.53,347.08 z">
<title>30%</title>
</path>
[1 lines]
<text fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="484.35" y="319.82">30%</text>
+
<path class="subpie" fill="#00f900" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L480.53,347.08 A120,120 0 0,1 410,370 z">
<title>50%</title>
</path>
[1 lines]
<text fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="441.52" y="347.01">50%</text>
+
<path class="pie" fill="#6d0dfd" fill-opacity="" stroke="#000000" stroke-width="1" stroke-dasharray="" d="M410,250 L410,450 A200,200 0 0,1 410,50 z">
<title>50%</title>
</path>
[1 lines]
+
<text x="185" fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" y="250" text-anchor="end">
<tspan x="185">Language</tspan>
</text>
[1 lines]
<text class="value" fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="240" y="250">50%</text>
+
<path class="subpie" fill="#0d6efd" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L410,370 A120,120 0 0,1 289.999,250 z">
<title>50%</title>
</path>
[1 lines]
<text fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="335.65" y="319.82">50%</text>
+
<path class="subpie" fill="#00fcff" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L290,250 A120,120 0 0,1 339.469,152.92 z">
<title>30%</title>
</path>
[1 lines]
<text fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="320.62" y="200.86">30%</text>
+
<path class="subpie" fill="#00f900" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L339.47,152.92 A120,120 0 0,1 409.999,130 z">
<title>20%</title>
</path>
[1 lines]
<text fill="#000000" font-family="Arial" font-size="12" alignment-baseline="middle" text-anchor="middle" x="378.48" y="152.99">20%</text>
<circle cx="410" cy="250" r="40" fill="#f5f5f5" stroke="#000000" stroke-width="1"/>
+
<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>
[56 lines]
 
 
 



Oops

Your browser is not supported

A modern browser with Javascript ES6 is required

Any major browser from 2015 onwards will be suitable