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
Invalid:
Minimum number of rows: 2
Maximum number of rows: 20
Names must be unique: text()
datatype: color
px
type: number
°
type: number
px
type: boolean
type: boolean
type: text
datatype: color
px
type: number
°
datatype: color
type: number
px
,px
datatype: color
type: number
px
type: number
px
type: boolean
px
datatype: color
datatype: color
type: number
px
datatype: color
datatype: color
type: number
px

ColorNameWeightDashCurve
datatype: color
type: text
datatype: number
type: text
type: boolean
datatype: color
type: text
datatype: number
type: text
type: boolean
datatype: color
type: text
datatype: number
type: text
type: boolean
minOccurs: 1
Declare the sources
type: number
px
type: number
px
type: number
px
datatype: color
px
Label
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number
datatype: color
px
type: number
°
datatype: color
type: number
px
,px

Calculate
datatype: number
default: 0
datatype: number
default: 100
datatype: number
default: 5
datatype: color
px
type: number
°
type: text
type: text
type: text
datatype: color
px
type: number
°
type: number
px
datatype: color
type: number
px
,px
datatype: color
type: number
px
type: number
px
Calculate
datatype: number
default: 0
datatype: number
default: 100
datatype: number
default: 5
datatype: color
px
type: number
°
type: text
type: text
type: boolean
type: boolean
type: text
datatype: color
px
type: number
°
type: number
px
datatype: color
type: number
px
,px
datatype: color
type: number
px
type: number
px

type: number
px
type: number
px
type: number
%

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
Appearance
Stroke & fill
datatype: color
type: number
px
,px
pattern: \d+\,\d+
datatype: color

AsiaEuropeAfrica
Male
Female
Male
Female
Male
Female
Poverty
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Land
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Language
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
<?xml version="1.0" encoding="UTF-8"?>
<dia:data xmlns:dia="http://data-diagrams.com">
<dir id="1">
<row id="1">
<cell id="1">34</cell>
<cell id="2">45</cell>
</row>
[2 lines]
<row id="2">
<cell id="1">13</cell>
<cell id="2">67</cell>
</row>
[2 lines]
<row id="3">
<cell id="1">90</cell>
<cell id="2">34</cell>
</row>
[2 lines]
</dir>
[9 lines]
<dir id="2">
<row id="1">
<cell id="1">14</cell>
<cell id="2">15</cell>
</row>
[2 lines]
<row id="2">
<cell id="1">33</cell>
<cell id="2">47</cell>
</row>
[2 lines]
<row id="3">
<cell id="1">60</cell>
<cell id="2">64</cell>
</row>
[2 lines]
</dir>
[9 lines]
</dia:data>
[20 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 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]
 
 
 



Oops

Your browser is not supported

A modern browser with Javascript ES6 is required

Any major browser from 2015 onwards will be suitable