SVG Treemap Generator

Generate treemap visualizations from data using area-proportional rectangles

Input

Data (Name Value per line)

Width (px)

Height (px)

About Treemaps

Treemaps display hierarchical data as nested rectangles. Each rectangle's area is proportional to its value, making it easy to compare sizes at a glance.

Preview

SVG Code

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
  <rect x="0.00" y="0.00" width="200.00" height="600.00" fill="hsl(0, 70%, 60%)" stroke="#000" stroke-width="2"/>
  <text x="100.00" y="300.00" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-family="sans-serif" font-size="14">Sales</text>
  <text x="100.00" y="318.00" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-family="sans-serif" font-size="12">120</text>
  <rect x="200.00" y="0.00" width="133.33" height="600.00" fill="hsl(137.5, 70%, 60%)" stroke="#000" stroke-width="2"/>
  <text x="266.67" y="300.00" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-family="sans-serif" font-size="14">Marketing</text>
  <text x="266.67" y="318.00" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-family="sans-serif" font-size="12">80</text>
  <rect x="333.33" y="0.00" width="466.67" height="428.57" fill="hsl(275, 70%, 60%)" stroke="#000" stroke-width="2"/>
  <text x="566.67" y="214.29" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-family="sans-serif" font-size="14">Engineering</text>
  <text x="566.67" y="232.29" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-family="sans-serif" font-size="12">200</text>
  <rect x="333.33" y="428.57" width="291.67" height="171.43" fill="hsl(52.5, 70%, 60%)" stroke="#000" stroke-width="2"/>
  <text x="479.17" y="514.29" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-family="sans-serif" font-size="14">Support</text>
  <text x="479.17" y="532.29" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-family="sans-serif" font-size="12">50</text>
  <rect x="625.00" y="428.57" width="175.00" height="171.43" fill="hsl(190, 70%, 60%)" stroke="#000" stroke-width="2"/>
  <text x="712.50" y="514.29" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-family="sans-serif" font-size="14">Other</text>
  <text x="712.50" y="532.29" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-family="sans-serif" font-size="12">30</text>
</svg>