Data Visualization Diagrams, 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
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
FillNameDiameterStrokeWeight
datatype: color
type: text
datatype: number
datatype: color
datatype: number
datatype: color
type: text
datatype: number
datatype: color
datatype: number
datatype: color
type: text
datatype: number
datatype: color
datatype: number
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="15"/>
+
<text class="chart-labels" x="160" y="31" 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="15"/>
+
<text class="chart-labels" x="260" y="31" 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="15"/>
+
<text class="chart-labels" x="360" y="31" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Africa</tspan>
</text>
[1 lines]
<rect class="chart" x="110" y="50" width="600" height="400" fill="#ffffff"/>
+
<g class="chart-grid chart-x">
<line x1="310" x2="310" y1="250" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="510" x2="510" y1="250" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="710" x2="710" y1="250" 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="290" y2="290" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="330" y2="330" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="370" y2="370" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="410" y2="410" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="450" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[5 lines]
+
<g class="chart-axis-y chart-markers">
<line x1="105" x2="109" y1="250" y2="250" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="290" y2="290" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="330" y2="330" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="370" y2="370" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="410" y2="410" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" 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="95.5" y="256" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>0</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="95.5" y="296" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>20</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="95.5" y="336" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>40</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="95.5" y="376" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>60</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="95.5" y="416" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>80</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="95.5" y="456" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>100</tspan>
</text>
[1 lines]
</g>
[12 lines]
+
<g class="chart-labels chart-title-y">
+
<text class="chart-labels" x="109.5" y="35" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<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="50" y="10" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<tspan>Female</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="250" y="10" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<tspan>Male</tspan>
</text>
[1 lines]
</g>
[4 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="90" y2="90" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="130" y2="130" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="170" y2="170" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="210" y2="210" 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="310" x2="310" y1="450" y2="454" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="510" x2="510" 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>
[4 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="210" y="474" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<tspan>Poverty</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="410" y="474" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<tspan>Land</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="610" y="474" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<tspan>Language</tspan>
</text>
[1 lines]
</g>
[6 lines]
+
<g class="chart-labels chart-title-x">
+
<text class="chart-labels" x="724" y="456" fill="#000000" font-family="Arial" font-size="14" text-anchor="start">
<tspan>Title</tspan>
</text>
[1 lines]
</g>
[2 lines]
+
<g class="chart-axis-y chart-markers">
<line x1="105" x2="109" y1="250" y2="250" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="210" y2="210" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="170" y2="170" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="130" y2="130" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="90" y2="90" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="50" y2="50" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[6 lines]
+
<g class="chart-axis-y">
<line x1="109.5" x2="109.5" y1="450.5" y2="49.5" shape-rendering="geometricPrecision" stroke="#000000" stroke-width="1"/>
</g>
[1 lines]
+
<g class="chart-labels chart-labels-y">
+
<text class="chart-labels" x="95.5" y="256" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>0</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="95.5" y="216" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>20</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="95.5" y="176" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>40</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="95.5" y="136" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>60</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="95.5" y="96" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>80</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="95.5" y="56" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>100</tspan>
</text>
[1 lines]
</g>
[12 lines]
+
<g transform="translate(0, 250)">
+
<circle cx="210" r="5" fill="#0d6efd" stroke="" stroke-width="0" cy="119.5">
<title>60%</title>
</circle>
[1 lines]
+
<circle cx="410" r="5" fill="#0d6efd" stroke="" stroke-width="0" cy="27.5">
<title>14%</title>
</circle>
[1 lines]
+
<circle cx="610" r="5" fill="#0d6efd" stroke="" stroke-width="0" cy="65.5">
<title>33%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g transform="translate(0, 250) scale(1, -1)">
+
<circle cx="210" r="5" fill="#0d6efd" stroke="" stroke-width="0" cy="179.5">
<title>90%</title>
</circle>
[1 lines]
+
<circle cx="410" r="5" fill="#0d6efd" stroke="" stroke-width="0" cy="67.5">
<title>34%</title>
</circle>
[1 lines]
+
<circle cx="610" r="5" fill="#0d6efd" stroke="" stroke-width="0" cy="25.5">
<title>13%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g transform="translate(0, 250)">
+
<circle cx="210" r="5" fill="#00fcff" stroke="" stroke-width="0" cy="127.5">
<title>64%</title>
</circle>
[1 lines]
+
<circle cx="410" r="5" fill="#00fcff" stroke="" stroke-width="0" cy="109.5">
<title>55%</title>
</circle>
[1 lines]
+
<circle cx="610" r="5" fill="#00fcff" stroke="" stroke-width="0" cy="93.5">
<title>47%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g transform="translate(0, 250) scale(1, -1)">
+
<circle cx="210" r="5" fill="#00fcff" stroke="" stroke-width="0" cy="67.5">
<title>34%</title>
</circle>
[1 lines]
+
<circle cx="410" r="5" fill="#00fcff" stroke="" stroke-width="0" cy="89.5">
<title>45%</title>
</circle>
[1 lines]
+
<circle cx="610" r="5" fill="#00fcff" stroke="" stroke-width="0" cy="133.5">
<title>67%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g transform="translate(0, 250)">
+
<circle cx="210" r="5" fill="#00f900" stroke="" stroke-width="0" cy="127.5">
<title>64%</title>
</circle>
[1 lines]
+
<circle cx="410" r="5" fill="#00f900" stroke="" stroke-width="0" cy="109.5">
<title>55%</title>
</circle>
[1 lines]
+
<circle cx="610" r="5" fill="#00f900" stroke="" stroke-width="0" cy="93.5">
<title>47%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g transform="translate(0, 250) scale(1, -1)">
+
<circle cx="210" r="5" fill="#00f900" stroke="" stroke-width="0" cy="67.5">
<title>34%</title>
</circle>
[1 lines]
+
<circle cx="410" r="5" fill="#00f900" stroke="" stroke-width="0" cy="89.5">
<title>45%</title>
</circle>
[1 lines]
+
<circle cx="610" r="5" fill="#00f900" stroke="" stroke-width="0" cy="133.5">
<title>67%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g class="chart-axis-x">
<line x1="109" x2="710" y1="250" y2="250" shape-rendering="geometricPrecision" stroke="#000000" stroke-width="1" stroke-dasharray=""/>
</g>
[1 lines]
+
<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>
[143 lines]
 
 
 



Oops

Your browser is not supported

A modern browser with Javascript ES6 is required

Any major browser from 2015 onwards will be suitable