Info graph
Use svg
Prompt
Create an SVG infographic that shows a population pyramid for a fictional country in 2023. Use the following demo data for age groups (Male / Female in thousands): 0-14: 150 / 140 15-29: 120 / 130 30-44: 110 / 105 45-59: 90 / 95 60+: 60 / 70 The SVG should include clear axis labels, a legend for gender, and a title "Population Pyramid 2023". Output only the SVG code, no explanation.
Answer guidance
Demografie population
```html
<!DOCTYPE html>
<html>
<head>
<title>Population Pyramid</title>
<meta charset="utf-8">
</head>
<body>
<svg width="650" height="450" font-family="Arial, sans-serif" font-size="12px">
<style>
.title {
font-size: 20px;
font-weight: bold;
text-anchor: middle;
}
.axis-label {
font-size: 11px;
text-anchor: middle;
fill: #555;
}
.age-label {
font-size: 12px;
fill: #000;
text-anchor: middle;
dominant-baseline: middle;
font-weight: bold;
}
.male-bar {
fill: #3498db; /* Blue */
}
.female-bar {
fill: #e74c3c; /* Red */
}
.axis-line {
stroke: #333;
stroke-width: 1;
}
.tick-line {
stroke: #ccc;
stroke-width: 1;
}
.legend-text {
font-size: 12px;
dominant-baseline: middle;
}
</style>
<!-- Title -->
<text x="325" y="30" class="title">Population Pyramid 2023</text>
<!-- Legend -->
<g class="legend">
<rect x="480" y="45" width="15" height="15" class="male-bar"></rect>
<text x="500" y="53" class="legend-text">Male</text>
<rect x="560" y="45" width="15" height="15" class="female-bar"></rect>
<text x="580" y="53" class="legend-text">Female</text>
</g>
<!-- Chart Area -->
<g transform="translate(0, 80)">
<!-- Data: [age, male, female] -->
<!-- Constants -->
<!-- const data = [
{ age: "0-14", male: 150, female: 140 },
{ age: "15-29", male: 120, female: 130 },
{ age: "30-44", male: 110, female: 105 },
{ age: "45-59", male: 90, female: 95 },
{ age: "60+", male: 60, female: 70 },
];
-->
<!-- const centerX = 325;
const barHeight = 50;
const barPadding = 10;
const maxPopulation = 150;
const maxBarWidth = 250;
const scale = maxBarWidth / maxPopulation;
-->
<!-- Age Group: 0-14 -->
<g transform="translate(0, 0)">
<rect class="male-bar" x="75" y="0" width="250" height="50"></rect> <!-- 325 - (150 * 1.667) -->
<rect class="female-bar" x="325" y="0" width="233.33" height="50"></rect> <!-- 140 * 1.667 -->
<text class="age-label" x="325" y="25">0-14</text>
</g>
<!-- Age Group: 15-29 -->
<g transform="translate(0, 60)"> <!-- 50(height) + 10(padding) -->
<rect class="male-bar" x="125" y="0" width="200" height="50"></rect> <!-- 325 - (120 * 1.667) -->
<rect class="female-bar" x="325" y="0" width="216.67" height="50"></rect> <!-- 130 * 1.667 -->
<text class="age-label" x="325" y="25">15-29</text>
</g>
<!-- Age Group: 30-44 -->
<g transform="translate(0, 120)">
<rect class="male-bar" x="141.67" y="0" width="183.33" height="50"></rect> <!-- 325 - (110 * 1.667) -->
<rect class="female-bar" x="325" y="0" width="175" height="50"></rect> <!-- 105 * 1.667 -->
<text class="age-label" x="325" y="25">30-44</text>
</g>
<!-- Age Group: 45-59 -->
<g transform="translate(0, 180)">
<rect class="male-bar" x="175" y="0" width="150" height="50"></rect> <!-- 325 - (90 * 1.667) -->
<rect class="female-bar" x="325" y="0" width="158.33" height="50"></rect> <!-- 95 * 1.667 -->
<text class="age-label" x="325" y="25">45-59</text>
</g>
<!-- Age Group: 60+ -->
<g transform="translate(0, 240)">
<rect class="male-bar" x="225" y="0" width="100" height="50"></rect> <!-- 325 - (60 * 1.667) -->
<rect class="female-bar" x="325" y="0" width="116.67" height="50"></rect> <!-- 70 * 1.667 -->
<text class="age-label" x="325" y="25">60+</text>
</g>
<!-- Axes and Ticks -->
<g class="axes">
<!-- Center Y Axis -->
<line class="axis-line" x1="325" y1="-10" x2="325" y2="300"></line>
<!-- Bottom X Axis -->
<line class="axis-line" x1="75" y1="300" x2="575" y2="300"></line>
<!-- Ticks and Labels -->
<g class="axis-label">
<!-- Center 0 -->
<text x="325" y="315">0</text>
<!-- Male ticks (left) -->
<text x="241.67" y="315">50</text> <!-- 325 - 50*1.667 -->
<line class="tick-line" x1="241.67" y1="295" x2="241.67" y2="300"></line>
<text x="158.33" y="315">100</text> <!-- 325 - 100*1.667 -->
<line class="tick-line" x1="158.33" y1="295" x2="158.33" y2="300"></line>
<text x="75" y="315">150</text> <!-- 325 - 150*1.667 -->
<line class="tick-line" x1="75" y1="295" x2="75" y2="300"></line>
<!-- Female ticks (right) -->
<text x="408.33" y="315">50</text> <!-- 325 + 50*1.667 -->
<line class="tick-line" x1="408.33" y1="295" x2="408.33" y2="300"></line>
<text x="491.67" y="315">100</text> <!-- 325 + 100*1.667 -->
<line class="tick-line" x1="491.67" y1="295" x2="491.67" y2="300"></line>
<text x="575" y="315">150</text> <!-- 325 + 150*1.667 -->
<line class="tick-line" x1="575" y1="295" x2="575" y2="300"></line>
<!-- X Axis Title -->
<text x="325" y="335">Population (in thousands)</text>
</g>
</g>
</g>
</svg>
</body>
</html>
```Drag to resize
```svg
<svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" font-family="Arial, Helvetica, sans-serif">
<!-- Title -->
<text x="400" y="40" text-anchor="middle" font-size="24" font-weight="bold">
Population Pyramid 2023
</text>
<!-- Scale variables -->
<!-- 1 thousand people = 2 px -->
<!-- Center axis -->
<line x1="400" y1="60" x2="400" y2="380" stroke="#000" stroke-width="2"/>
<!-- X-axis tick marks and labels (both sides) -->
<g font-size="12" text-anchor="middle">
<!-- 50k -->
<line x1="300" y1="360" x2="300" y2="365" stroke="#000" />
<text x="300" y="380">50</text>
<line x1="500" y1="360" x2="500" y2="365" stroke="#000" />
<text x="500" y="380">50</text>
<!-- 100k -->
<line x1="200" y1="360" x2="200" y2="365" stroke="#000" />
<text x="200" y="380">100</text>
<line x1="600" y1="360" x2="600" y2="365" stroke="#000" />
<text x="600" y="380">100</text>
<!-- 150k -->
<line x1="100" y1="360" x2="100" y2="365" stroke="#000" />
<text x="100" y="380">150</text>
<line x1="700" y1="360" x2="700" y2="365" stroke="#000" />
<text x="700" y="380">150</text>
</g>
<!-- Axis label -->
<text x="400" y="400" text-anchor="middle" font-size="14">
Population (thousands)
</text>
<!-- Data bars -->
<!-- Bar height and spacing -->
<!-- bar height = 40, spacing = 10, top offset = 70 -->
<g font-size="14" dominant-baseline="middle">
<!-- Age group 0-14 -->
<text x="380" y="90" text-anchor="end">0-14</text>
<!-- Male -->
<rect x="100" y="70" width="300" height="40" fill="#4F8DF7" />
<!-- Female -->
<rect x="400" y="70" width="280" height="40" fill="#F78DB6" />
<!-- Age group 15-29 -->
<text x="380" y="140" text-anchor="end">15-29</text>
<rect x="160" y="120" width="240" height="40" fill="#4F8DF7" />
<rect x="400" y="120" width="260" height="40" fill="#F78DB6" />
<!-- Age group 30-44 -->
<text x="380" y="190" text-anchor="end">30-44</text>
<rect x="180" y="170" width="220" height="40" fill="#4F8DF7" />
<rect x="400" y="170" width="210" height="40" fill="#F78DB6" />
<!-- Age group 45-59 -->
<text x="380" y="240" text-anchor="end">45-59</text>
<rect x="220" y="220" width="180" height="40" fill="#4F8DF7" />
<rect x="400" y="220" width="190" height="40" fill="#F78DB6" />
<!-- Age group 60+ -->
<text x="380" y="290" text-anchor="end">60+</text>
<rect x="280" y="270" width="120" height="40" fill="#4F8DF7" />
<rect x="400" y="270" width="140" height="40" fill="#F78DB6" />
</g>
<!-- Legend -->
<g font-size="12">
<rect x="550" y="60" width="20" height="20" fill="#4F8DF7" />
<text x="575" y="75">Male</text>
<rect x="650" y="60" width="20" height="20" fill="#F78DB6" />
<text x="675" y="75">Female</text>
</g>
</svg>
```Drag to resize
```html
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="800" height="600" fill="#f8f9fa"/>
<!-- Title -->
<text x="400" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#333">
Population Pyramid 2023
</text>
<!-- Legend -->
<rect x="300" y="50" width="20" height="15" fill="#4A90E2"/>
<text x="325" y="62" font-family="Arial, sans-serif" font-size="14" fill="#333">Male</text>
<rect x="400" y="50" width="20" height="15" fill="#E24A90"/>
<text x="425" y="62" font-family="Arial, sans-serif" font-size="14" fill="#333">Female</text>
<!-- Central axis line -->
<line x1="400" y1="100" x2="400" y2="500" stroke="#666" stroke-width="2"/>
<!-- Age group labels -->
<text x="390" y="140" text-anchor="end" font-family="Arial, sans-serif" font-size="12" fill="#333">0-14</text>
<text x="390" y="220" text-anchor="end" font-family="Arial, sans-serif" font-size="12" fill="#333">15-29</text>
<text x="390" y="300" text-anchor="end" font-family="Arial, sans-serif" font-size="12" fill="#333">30-44</text>
<text x="390" y="380" text-anchor="end" font-family="Arial, sans-serif" font-size="12" fill="#333">45-59</text>
<text x="390" y="460" text-anchor="end" font-family="Arial, sans-serif" font-size="12" fill="#333">60+</text>
<!-- Population bars -->
<!-- Males (left side) -->
<!-- 0-14: 150k -->
<rect x="250" y="120" width="150" height="40" fill="#4A90E2" opacity="0.8"/>
<text x="245" y="142" text-anchor="end" font-family="Arial, sans-serif" font-size="11" fill="#333">150</text>
<!-- 15-29: 120k -->
<rect x="280" y="200" width="120" height="40" fill="#4A90E2" opacity="0.8"/>
<text x="275" y="222" text-anchor="end" font-family="Arial, sans-serif" font-size="11" fill="#333">120</text>
<!-- 30-44: 110k -->
<rect x="290" y="280" width="110" height="40" fill="#4A90E2" opacity="0.8"/>
<text x="285" y="302" text-anchor="end" font-family="Arial, sans-serif" font-size="11" fill="#333">110</text>
<!-- 45-59: 90k -->
<rect x="310" y="360" width="90" height="40" fill="#4A90E2" opacity="0.8"/>
<text x="305" y="382" text-anchor="end" font-family="Arial, sans-serif" font-size="11" fill="#333">90</text>
<!-- 60+: 60k -->
<rect x="340" y="440" width="60" height="40" fill="#4A90E2" opacity="0.8"/>
<text x="335" y="462" text-anchor="end" font-family="Arial, sans-serif" font-size="11" fill="#333">60</text>
<!-- Females (right side) -->
<!-- 0-14: 140k -->
<rect x="400" y="120" width="140" height="40" fill="#E24A90" opacity="0.8"/>
<text x="545" y="142" font-family="Arial, sans-serif" font-size="11" fill="#333">140</text>
<!-- 15-29: 130k -->
<rect x="400" y="200" width="130" height="40" fill="#E24A90" opacity="0.8"/>
<text x="535" y="222" font-family="Arial, sans-serif" font-size="11" fill="#333">130</text>
<!-- 30-44: 105k -->
<rect x="400" y="280" width="105" height="40" fill="#E24A90" opacity="0.8"/>
<text x="510" y="302" font-family="Arial, sans-serif" font-size="11" fill="#333">105</text>
<!-- 45-59: 95k -->
<rect x="400" y="360" width="95" height="40" fill="#E24A90" opacity="0.8"/>
<text x="500" y="382" font-family="Arial, sans-serif" font-size="11" fill="#333">95</text>
<!-- 60+: 70k -->
<rect x="400" y="440" width="70" height="40" fill="#E24A90" opacity="0.8"/>
<text x="475" y="462" font-family="Arial, sans-serif" font-size="11" fill="#333">70</text>
<!-- Axis labels -->
<text x="200" y="530" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#333">Male Population (thousands)</text>
<text x="600" y="530" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#333">Female Population (thousands)</text>
<!-- Scale indicators -->
<text x="250" y="550" font-family="Arial, sans-serif" font-size="10" fill="#666">0</text>
<text x="350" y="550" font-family="Arial, sans-serif" font-size="10" fill="#666">100</text>
<text x="450" y="550" font-family="Arial, sans-serif" font-size="10" fill="#666">100</text>
<text x="550" y="550" font-family="Arial, sans-serif" font-size="10" fill="#666">0</text>
</svg>
```Drag to resize
```svg
<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg" font-family="Helvetica, Arial, sans-serif">
<!-- Title -->
<text x="250" y="30" font-size="22" text-anchor="middle" font-weight="bold">
Population Pyramid 2023
</text>
<!-- Axis lines -->
<line x1="70" y1="60" x2="70" y2="330" stroke="#444" stroke-width="1"/>
<line x1="430" y1="60" x2="430" y2="330" stroke="#444" stroke-width="1"/>
<line x1="70" y1="330" x2="430" y2="330" stroke="#444" stroke-width="1"/>
<!-- Axis labels -->
<text x="70" y="350" font-size="13" text-anchor="end">-150</text>
<text x="110" y="350" font-size="13" text-anchor="middle">-100</text>
<text x="150" y="350" font-size="13" text-anchor="middle">-50</text>
<text x="250" y="350" font-size="13" text-anchor="middle">0</text>
<text x="350" y="350" font-size="13" text-anchor="middle">50</text>
<text x="390" y="350" font-size="13" text-anchor="middle">100</text>
<text x="430" y="350" font-size="13" text-anchor="start">150</text>
<text x="250" y="370" font-size="14" text-anchor="middle">Population (thousands)</text>
<!-- Age group labels -->
<text x="65" y="85" font-size="13" text-anchor="end">0-14</text>
<text x="65" y="125" font-size="13" text-anchor="end">15-29</text>
<text x="65" y="165" font-size="13" text-anchor="end">30-44</text>
<text x="65" y="205" font-size="13" text-anchor="end">45-59</text>
<text x="65" y="245" font-size="13" text-anchor="end">60+</text>
<!-- Pyramid Bars -->
<!-- Each bar: y= (60 + group*40), height=30, Male to left (mirror), Female to right-->
<!-- Scale: 1k = 1.2px, so 150 = 180px from center (250) -->
<!-- 0-14 -->
<rect x="70" y="70" width="180" height="30" fill="#4e79a7"/>
<rect x="250" y="70" width="168" height="30" fill="#f28e2b"/>
<!-- 15-29 -->
<rect x="70" y="110" width="144" height="30" fill="#4e79a7"/>
<rect x="250" y="110" width="156" height="30" fill="#f28e2b"/>
<!-- 30-44 -->
<rect x="70" y="150" width="132" height="30" fill="#4e79a7"/>
<rect x="250" y="150" width="126" height="30" fill="#f28e2b"/>
<!-- 45-59 -->
<rect x="70" y="190" width="108" height="30" fill="#4e79a7"/>
<rect x="250" y="190" width="114" height="30" fill="#f28e2b"/>
<!-- 60+ -->
<rect x="70" y="230" width="72" height="30" fill="#4e79a7"/>
<rect x="250" y="230" width="84" height="30" fill="#f28e2b"/>
<!-- Central Axis -->
<rect x="249" y="60" width="2" height="270" fill="#444"/>
<!-- Legend -->
<rect x="320" y="65" width="18" height="12" fill="#4e79a7"/>
<text x="345" y="75" font-size="13" alignment-baseline="middle" fill="#222">Male</text>
<rect x="320" y="85" width="18" height="12" fill="#f28e2b"/>
<text x="345" y="95" font-size="13" alignment-baseline="middle" fill="#222">Female</text>
</svg>
```Drag to resize
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<style>
.axis { stroke: #000; stroke-width: 1; }
.tick { stroke: #000; stroke-width: 1; }
.bar-male { fill: #3498db; }
.bar-female { fill: #e74c3c; }
.label { font-size: 12px; font-family: sans-serif; }
.title { font-size: 16px; font-weight: bold; text-anchor: middle; }
</style>
<!-- Title -->
<text x="300" y="25" class="title">Population Pyramid 2023</text>
<!-- Legend -->
<rect x="450" y="40" width="20" height="20" class="bar-male" />
<text x="475" y="55" class="label">Male</text>
<rect x="510" y="40" width="20" height="20" class="bar-female" />
<text x="535" y="55" class="label">Female</text>
<!-- Axis labels -->
<text x="170" y="370" class="label" text-anchor="middle">-150</text>
<text x="135" y="370" class="label" text-anchor="middle">-120</text>
<text x="100" y="370" class="label" text-anchor="middle">-90</text>
<text x="65" y="370" class="label" text-anchor="middle">-60</text>
<text x="30" y="370" class="label" text-anchor="middle">-30</text>
<text x="230" y="370" class="label">0</text>
<text x="265" y="370" class="label">30</text>
<text x="300" y="370" class="label">60</text>
<text x="335" y="370" class="label">90</text>
<text x="370" y="370" class="label">120</text>
<text x="405" y="370" class="label">150</text>
<line x1="230" y1="80" x2="230" y2="350" class="axis" />
<!-- Data bars -->
<!-- 0-14 -->
<rect class="bar-male" x="40" y="85" width="375" height="30" transform="translate(-375 0)" />
<rect class="bar-female" x="230" y="85" width="350" height="30" />
<text x="20" y="105" class="label">0-14</text>
<!-- 15-29 -->
<rect class="bar-male" x="40" y="130" width="300" height="30" transform="translate(-300 0)" />
<rect class="bar-female" x="230" y="130" width="325" height="30" />
<text x="20" y="150" class="label">15-29</text>
<!-- 30-44 -->
<rect class="bar-male" x="40" y="175" width="275" height="30" transform="translate(-275 0)" />
<rect class="bar-female" x="230" y="175" width="262.5" height="30" />
<text x="20" y="195" class="label">30-44</text>
<!-- 45-59 -->
<rect class="bar-male" x="40" y="220" width="225" height="30" transform="translate(-225 0)" />
<rect class="bar-female" x="230" y="220" width="237.5" height="30" />
<text x="20" y="240" class="label">45-59</text>
<!-- 60+ -->
<rect class="bar-male" x="40" y="265" width="150" height="30" transform="translate(-150 0)" />
<rect class="bar-female" x="230" y="265" width="175" height="30" />
<text x="20" y="285" class="label">60+</text>
</svg>Drag to resize
```html <svg width="600" height="500" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="white" /> <!-- Title --> <text x="300" y="30" font-size="20" text-anchor="middle" font-weight="bold">Population Pyramid 2023</text> <!-- Axes --> <line x1="300" y1="50" x2="300" y2="450" stroke="black" stroke-width="2" /> <line x1="100" y1="450" x2="500" y2="450" stroke="black" stroke-width="2" /> <!-- Age Group Labels --> <text x="50" y="80" text-anchor="end">0-14</text> <text x="50" y="140" text-anchor="end">15-29</text> <text x="50" y="200" text-anchor="end">30-44</text> <text x="50" y="260" text-anchor="end">45-59</text> <text x="50" y="320" text-anchor="end">60+</text> <!-- Population Labels --> <text x="150" y="470" text-anchor="middle">150</text> <text x="200" y="470" text-anchor="middle">100</text> <text x="250" y="470" text-anchor="middle">50</text> <text x="350" y="470" text-anchor="middle">50</text> <text x="400" y="470" text-anchor="middle">100</text> <text x="450" y="470" text-anchor="middle">150</text> <!-- Male Bars (left side) --> <rect x="300" y="60" width="-150" height="40" fill="#1f77b4" /> <rect x="300" y="120" width="-120" height="40" fill="#1f77b4" /> <rect x="300" y="180" width="-110" height="40" fill="#1f77b4" /> <rect x="300" y="240" width="-90" height="40" fill="#1f77b4" /> <rect x="300" y="300" width="-60" height="40" fill="#1f77b4" /> <!-- Female Bars (right side) --> <rect x="300" y="60" width="140" height="40" fill="#ff7f0e" /> <rect x="300" y="120" width="130" height="40" fill="#ff7f0e" /> <rect x="300" y="180" width="105" height="40" fill="#ff7f0e" /> <rect x="300" y="240" width="95" height="40" fill="#ff7f0e" /> <rect x="300" y="300" width="70" height="40" fill="#ff7f0e" /> <!-- Legend --> <rect x="400" y="400" width="20" height="20" fill="#1f77b4" /> <text x="425" y="415" font-size="12">Male</text> <rect x="400" y="430" width="20" height="20" fill="#ff7f0e" /> <text x="425" y="445" font-size="12">Female</text> <!-- Axis Labels --> <text x="300" y="480" text-anchor="middle">Population (thousands)</text> <text x="20" y="250" text-anchor="middle" transform="rotate(-90, 20, 250)">Age Groups</text> </svg> ```
Drag to resize
```svg
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="600" height="400" fill="#FFFFFF"/>
<text x="300" y="30" font-size="24" text-anchor="middle">Population Pyramid 2023</text>
<g transform="translate(50, 50)">
<rect x="0" y="0" width="250" height="300" fill="#FFFFFF" stroke="#000000"/>
<g transform="translate(125, 15)">
<text font-size="14" text-anchor="middle">Age Group</text>
</g>
<g transform="translate(-120, 150)">
<text font-size="14" text-anchor="middle" transform="rotate(-90)">Population (thousands)</text>
</g>
<g>
<rect x="20" y="280" width="80" height="20" fill="#0000FF"/>
<text x="110" y="295" font-size="14">Male</text>
<rect x="140" y="280" width="80" height="20" fill="#FF0000"/>
<text x="230" y="295" font-size="14">Female</text>
</g>
<g transform="translate(0, 40)">
<text x="-50" y="0" font-size="12" text-anchor="end">0-14</text>
<rect x="0" y="-10" width="150" height="20" fill="#0000FF"/>
<text x="160" y="0" font-size="12" text-anchor="start">140</text>
<rect x="0" y="-10" width="140" height="20" fill="#FF0000" x="-140"/>
<text x="-160" y="0" font-size="12" text-anchor="end">150</text>
</g>
<g transform="translate(0, 80)">
<text x="-50" y="0" font-size="12" text-anchor="end">15-29</text>
<rect x="0" y="-10" width="120" height="20" fill="#0000FF"/>
<text x="160" y="0" font-size="12" text-anchor="start">130</text>
<rect x="0" y="-10" width="130" height="20" fill="#FF0000" x="-130"/>
<text x="-160" y="0" font-size="12" text-anchor="end">120</text>
</g>
<g transform="translate(0, 120)">
<text x="-50" y="0" font-size="12" text-anchor="end">30-44</text>
<rect x="0" y="-10" width="110" height="20" fill="#0000FF"/>
<text x="160" y="0" font-size="12" text-anchor="start">105</text>
<rect x="0" y="-10" width="105" height="20" fill="#FF0000" x="-105"/>
<text x="-160" y="0" font-size="12" text-anchor="end">110</text>
</g>
<g transform="translate(0, 160)">
<text x="-50" y="0" font-size="12" text-anchor="end">45-59</text>
<rect x="0" y="-10" width="90" height="20" fill="#0000FF"/>
<text x="160" y="0" font-size="12" text-anchor="start">95</text>
<rect x="0" y="-10" width="95" height="20" fill="#FF0000" x="-95"/>
<text x="-160" y="0" font-size="12" text-anchor="end">90</text>
</g>
<g transform="translate(0, 200)">
<text x="-50" y="0" font-size="12" text-anchor="end">60+</text>
<rect x="0" y="-10" width="60" height="20" fill="#0000FF"/>
<text x="160" y="0" font-size="12" text-anchor="start">70</text>
<rect x="0" y="-10" width="70" height="20" fill="#FF0000" x="-70"/>
<text x="-160" y="0" font-size="12" text-anchor="end">60</text>
</g>
<line x1="0" y2="260" x2="250" y2="260" stroke="#000000"/>
<line x1="125" y1="40" x2="125" y2="260" stroke="#000000"/>
</g>
</svg>
```Drag to resize
```html <svg xmlns="http://www.w3.org/2000/svg" width="600" height="500" viewBox="0 0 600 500"> <rect width="100%" height="100%" fill="white"/> <!-- Title --> <text x="300" y="30" text-anchor="middle" font-size="20" font-weight="bold">Population Pyramid 2023</text> <!-- Axes --> <line x1="300" y1="50" x2="300" y2="450" stroke="black" stroke-width="1"/> <line x1="100" y1="450" x2="500" y2="450" stroke="black" stroke-width="1"/> <!-- Axis Labels --> <text x="300" y="480" text-anchor="middle">Population (thousands)</text> <text x="50" y="250" text-anchor="middle" transform="rotate(-90, 50, 250)">Age Groups</text> <!-- Age Group Labels --> <text x="290" y="80" text-anchor="end">0-14</text> <text x="290" y="140" text-anchor="end">15-29</text> <text x="290" y="200" text-anchor="end">30-44</text> <text x="290" y="260" text-anchor="end">45-59</text> <text x="290" y="320" text-anchor="end">60+</text> <!-- Population Ticks --> <line x1="250" y1="450" x2="250" y2="455" stroke="black"/> <text x="250" y="470" text-anchor="middle">50</text> <line x1="200" y1="450" x2="200" y2="455" stroke="black"/> <text x="200" y="470" text-anchor="middle">100</text> <line x1="150" y1="450" x2="150" y2="455" stroke="black"/> <text x="150" y="470" text-anchor="middle">150</text> <line x1="350" y1="450" x2="350" y2="455" stroke="black"/> <text x="350" y="470" text-anchor="middle">50</text> <line x1="400" y1="450" x2="400" y2="455" stroke="black"/> <text x="400" y="470" text-anchor="middle">100</text> <line x1="450" y1="450" x2="450" y2="455" stroke="black"/> <text x="450" y="470" text-anchor="middle">150</text> <!-- Male Bars --> <rect x="300" y="60" width="-150" height="40" fill="#1f77b4"/> <rect x="300" y="120" width="-120" height="40" fill="#1f77b4"/> <rect x="300" y="180" width="-110" height="40" fill="#1f77b4"/> <rect x="300" y="240" width="-90" height="40" fill="#1f77b4"/> <rect x="300" y="300" width="-60" height="40" fill="#1f77b4"/> <!-- Female Bars --> <rect x="300" y="60" width="140" height="40" fill="#ff7f0e"/> <rect x="300" y="120" width="130" height="40" fill="#ff7f0e"/> <rect x="300" y="180" width="105" height="40" fill="#ff7f0e"/> <rect x="300" y="240" width="95" height="40" fill="#ff7f0e"/> <rect x="300" y="300" width="70" height="40" fill="#ff7f0e"/> <!-- Value Labels --> <!-- Male --> <text x="280" y="85" text-anchor="end" fill="white">150</text> <text x="280" y="145" text-anchor="end" fill="white">120</text> <text x="280" y="205" text-anchor="end" fill="white">110</text> <text x="280" y="265" text-anchor="end" fill="white">90</text> <text x="280" y="325" text-anchor="end" fill="white">60</text> <!-- Female --> <text x="320" y="85" text-anchor="start" fill="black">140</text> <text x="320" y="145" text-anchor="start" fill="black">130</text> <text x="320" y="205" text-anchor="start" fill="black">105</text> <text x="320" y="265" text-anchor="start" fill="black">95</text> <text x="320" y="325" text-anchor="start" fill="black">70</text> <!-- Legend --> <rect x="100" y="20" width="20" height="20" fill="#1f77b4"/> <text x="125" y="35" text-anchor="start">Male</text> <rect x="200" y="20" width="20" height="20" fill="#ff7f0e"/> <text x="225" y="35" text-anchor="start">Female</text> </svg> ```
Drag to resize