simplecharts

SVG charts without dependencies
git clone https://git.ce9e.org/simplecharts.git

commit
af4521ab27add94c79a1d894ebf4b5e8a206c823
parent
ff10e7b661e16a2feaa189f40a33300a66817b48
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2019-06-04 18:37
restructure column renderers into rows

Diffstat

M simplecharts.py 31 +++++++++++++++++++------------
M tests/no-legend_ColumnRenderer.svg 46 ++++++++++++++++++++++------------------------
M tests/no-legend_StackedColumnRenderer.svg 46 ++++++++++++++++++++++------------------------
M tests/simple_ColumnRenderer.svg 46 ++++++++++++++++++++++------------------------
M tests/simple_StackedColumnRenderer.svg 46 ++++++++++++++++++++++------------------------
M tests/single_ColumnRenderer.svg 16 +++++-----------
M tests/single_StackedColumnRenderer.svg 16 +++++-----------

7 files changed, 117 insertions, 130 deletions


diff --git a/simplecharts.py b/simplecharts.py

@@ -184,9 +184,10 @@ class ColumnRenderer(BaseRenderer):
  184   184         n = len(rows)
  185   185         k = len(rows[0]['values'])
  186   186         width = self.width / n / (k + 2)
  187    -1         for i, row in enumerate(rows):
   -1   187         for j in range(k):
  188   188             group = ''
  189    -1             for j, value in enumerate(row['values']):
   -1   189             for i in range(n):
   -1   190                 value = rows[i]['values'][j]
  190   191                 height = self.height * value / max_value
  191   192                 x = width * (i * (k + 2) + j + 1)
  192   193                 group += self.rect(
@@ -194,11 +195,11 @@ class ColumnRenderer(BaseRenderer):
  194   195                     self.height - height - 1,
  195   196                     width,
  196   197                     height,
  197    -1                     fill=self.get_color(j),
  198    -1                     stroke='white',
  199   198                     title=self.get_title(rows, legend, i, j),
  200   199                 )
  201    -1             s += self.element('g', group)
   -1   200             s += self.element(
   -1   201                 'g', group, fill=self.get_color(j), stroke='white'
   -1   202             )
  202   203         return s
  203   204 
  204   205 
@@ -208,20 +209,26 @@ class StackedColumnRenderer(BaseRenderer):
  208   209     def render_rows(self, rows, legend, max_value):
  209   210         s = ''
  210   211         n = len(rows)
   -1   212         k = len(rows[0]['values'])
   -1   213         groups = ['' for j in range(k)]
  211   214         width = self.width / n
  212   215         for i, row in enumerate(rows):
  213    -1             group = ''
  214   216             y = self.height - 1
  215   217             for j, value in enumerate(row['values']):
  216   218                 height = self.height * value / max_value
  217   219                 x = width * (i + 0.5)
  218   220                 y -= height
  219    -1                 group += self.rect(x - width / 6, y, width / 3, height, **{
  220    -1                     'fill': self.get_color(j),
  221    -1                     'stroke': 'white',
  222    -1                     'title': self.get_title(rows, legend, i, j),
  223    -1                 })
  224    -1             s += self.element('g', group)
   -1   221                 groups[j] += self.rect(
   -1   222                     x - width / 6,
   -1   223                     y,
   -1   224                     width / 3,
   -1   225                     height,
   -1   226                     title=self.get_title(rows, legend, i, j),
   -1   227                 )
   -1   228         for j, group in enumerate(groups):
   -1   229             s += self.element(
   -1   230                 'g', group, fill=self.get_color(j), stroke='white'
   -1   231             )
  225   232         return s
  226   233 
  227   234 

diff --git a/tests/no-legend_ColumnRenderer.svg b/tests/no-legend_ColumnRenderer.svg

@@ -8,47 +8,45 @@
    8     8 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="240.0" y="490.0">Oranges</text>
    9     9 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="400.0" y="490.0">Pears</text>
   10    10 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="560.0" y="490.0">Bananas</text>
   11    -1 	<g>
   12    -1 		<rect fill="#e41a1c" height="240.0" stroke="white" width="32.0" x="32.0" y="239.0">
   -1    11 	<g fill="#e41a1c" stroke="white">
   -1    12 		<rect height="240.0" width="32.0" x="32.0" y="239.0">
   13    13 			<title>3</title>
   14    14 		</rect>
   15    -1 		<rect fill="#377eb8" height="160.0" stroke="white" width="32.0" x="64.0" y="319.0">
   16    -1 			<title>2</title>
   -1    15 		<rect height="320.0" width="32.0" x="192.0" y="159.0">
   -1    16 			<title>4</title>
   -1    17 		</rect>
   -1    18 		<rect height="320.0" width="32.0" x="352.0" y="159.0">
   -1    19 			<title>4</title>
   17    20 		</rect>
   18    -1 		<rect fill="#4daf4a" height="400.0" stroke="white" width="32.0" x="96.0" y="79.0">
   -1    21 		<rect height="400.0" width="32.0" x="512.0" y="79.0">
   19    22 			<title>5</title>
   20    23 		</rect>
   21    24 	</g>
   22    -1 	<g>
   23    -1 		<rect fill="#e41a1c" height="320.0" stroke="white" width="32.0" x="192.0" y="159.0">
   24    -1 			<title>4</title>
   -1    25 	<g fill="#377eb8" stroke="white">
   -1    26 		<rect height="160.0" width="32.0" x="64.0" y="319.0">
   -1    27 			<title>2</title>
   25    28 		</rect>
   26    -1 		<rect fill="#377eb8" height="160.0" stroke="white" width="32.0" x="224.0" y="319.0">
   -1    29 		<rect height="160.0" width="32.0" x="224.0" y="319.0">
   27    30 			<title>2</title>
   28    31 		</rect>
   29    -1 		<rect fill="#4daf4a" height="240.0" stroke="white" width="32.0" x="256.0" y="239.0">
   -1    32 		<rect height="240.0" width="32.0" x="384.0" y="239.0">
   30    33 			<title>3</title>
   31    34 		</rect>
   -1    35 		<rect height="80.0" width="32.0" x="544.0" y="399.0">
   -1    36 			<title>1</title>
   -1    37 		</rect>
   32    38 	</g>
   33    -1 	<g>
   34    -1 		<rect fill="#e41a1c" height="320.0" stroke="white" width="32.0" x="352.0" y="159.0">
   35    -1 			<title>4</title>
   -1    39 	<g fill="#4daf4a" stroke="white">
   -1    40 		<rect height="400.0" width="32.0" x="96.0" y="79.0">
   -1    41 			<title>5</title>
   36    42 		</rect>
   37    -1 		<rect fill="#377eb8" height="240.0" stroke="white" width="32.0" x="384.0" y="239.0">
   -1    43 		<rect height="240.0" width="32.0" x="256.0" y="239.0">
   38    44 			<title>3</title>
   39    45 		</rect>
   40    -1 		<rect fill="#4daf4a" height="320.0" stroke="white" width="32.0" x="416.0" y="159.0">
   -1    46 		<rect height="320.0" width="32.0" x="416.0" y="159.0">
   41    47 			<title>4</title>
   42    48 		</rect>
   43    -1 	</g>
   44    -1 	<g>
   45    -1 		<rect fill="#e41a1c" height="400.0" stroke="white" width="32.0" x="512.0" y="79.0">
   46    -1 			<title>5</title>
   47    -1 		</rect>
   48    -1 		<rect fill="#377eb8" height="80.0" stroke="white" width="32.0" x="544.0" y="399.0">
   49    -1 			<title>1</title>
   50    -1 		</rect>
   51    -1 		<rect fill="#4daf4a" height="160.0" stroke="white" width="32.0" x="576.0" y="319.0">
   -1    49 		<rect height="160.0" width="32.0" x="576.0" y="319.0">
   52    50 			<title>2</title>
   53    51 		</rect>
   54    52 	</g>

diff --git a/tests/no-legend_StackedColumnRenderer.svg b/tests/no-legend_StackedColumnRenderer.svg

@@ -8,47 +8,45 @@
    8     8 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="240.0" y="490.0">Oranges</text>
    9     9 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="400.0" y="490.0">Pears</text>
   10    10 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="560.0" y="490.0">Bananas</text>
   11    -1 	<g>
   12    -1 		<rect fill="#e41a1c" height="72.0" stroke="white" width="53.333333333333336" x="53.33333333333333" y="407.0">
   -1    11 	<g fill="#e41a1c" stroke="white">
   -1    12 		<rect height="72.0" width="53.333333333333336" x="53.33333333333333" y="407.0">
   13    13 			<title>3</title>
   14    14 		</rect>
   15    -1 		<rect fill="#377eb8" height="48.0" stroke="white" width="53.333333333333336" x="53.33333333333333" y="359.0">
   16    -1 			<title>2</title>
   -1    15 		<rect height="96.0" width="53.333333333333336" x="213.33333333333334" y="383.0">
   -1    16 			<title>4</title>
   -1    17 		</rect>
   -1    18 		<rect height="96.0" width="53.333333333333336" x="373.3333333333333" y="383.0">
   -1    19 			<title>4</title>
   17    20 		</rect>
   18    -1 		<rect fill="#4daf4a" height="120.0" stroke="white" width="53.333333333333336" x="53.33333333333333" y="239.0">
   -1    21 		<rect height="120.0" width="53.333333333333336" x="533.3333333333334" y="359.0">
   19    22 			<title>5</title>
   20    23 		</rect>
   21    24 	</g>
   22    -1 	<g>
   23    -1 		<rect fill="#e41a1c" height="96.0" stroke="white" width="53.333333333333336" x="213.33333333333334" y="383.0">
   24    -1 			<title>4</title>
   -1    25 	<g fill="#377eb8" stroke="white">
   -1    26 		<rect height="48.0" width="53.333333333333336" x="53.33333333333333" y="359.0">
   -1    27 			<title>2</title>
   25    28 		</rect>
   26    -1 		<rect fill="#377eb8" height="48.0" stroke="white" width="53.333333333333336" x="213.33333333333334" y="335.0">
   -1    29 		<rect height="48.0" width="53.333333333333336" x="213.33333333333334" y="335.0">
   27    30 			<title>2</title>
   28    31 		</rect>
   29    -1 		<rect fill="#4daf4a" height="72.0" stroke="white" width="53.333333333333336" x="213.33333333333334" y="263.0">
   -1    32 		<rect height="72.0" width="53.333333333333336" x="373.3333333333333" y="311.0">
   30    33 			<title>3</title>
   31    34 		</rect>
   -1    35 		<rect height="24.0" width="53.333333333333336" x="533.3333333333334" y="335.0">
   -1    36 			<title>1</title>
   -1    37 		</rect>
   32    38 	</g>
   33    -1 	<g>
   34    -1 		<rect fill="#e41a1c" height="96.0" stroke="white" width="53.333333333333336" x="373.3333333333333" y="383.0">
   35    -1 			<title>4</title>
   -1    39 	<g fill="#4daf4a" stroke="white">
   -1    40 		<rect height="120.0" width="53.333333333333336" x="53.33333333333333" y="239.0">
   -1    41 			<title>5</title>
   36    42 		</rect>
   37    -1 		<rect fill="#377eb8" height="72.0" stroke="white" width="53.333333333333336" x="373.3333333333333" y="311.0">
   -1    43 		<rect height="72.0" width="53.333333333333336" x="213.33333333333334" y="263.0">
   38    44 			<title>3</title>
   39    45 		</rect>
   40    -1 		<rect fill="#4daf4a" height="96.0" stroke="white" width="53.333333333333336" x="373.3333333333333" y="215.0">
   -1    46 		<rect height="96.0" width="53.333333333333336" x="373.3333333333333" y="215.0">
   41    47 			<title>4</title>
   42    48 		</rect>
   43    -1 	</g>
   44    -1 	<g>
   45    -1 		<rect fill="#e41a1c" height="120.0" stroke="white" width="53.333333333333336" x="533.3333333333334" y="359.0">
   46    -1 			<title>5</title>
   47    -1 		</rect>
   48    -1 		<rect fill="#377eb8" height="24.0" stroke="white" width="53.333333333333336" x="533.3333333333334" y="335.0">
   49    -1 			<title>1</title>
   50    -1 		</rect>
   51    -1 		<rect fill="#4daf4a" height="48.0" stroke="white" width="53.333333333333336" x="533.3333333333334" y="287.0">
   -1    49 		<rect height="48.0" width="53.333333333333336" x="533.3333333333334" y="287.0">
   52    50 			<title>2</title>
   53    51 		</rect>
   54    52 	</g>

diff --git a/tests/simple_ColumnRenderer.svg b/tests/simple_ColumnRenderer.svg

@@ -17,47 +17,45 @@
   17    17 		<rect fill="#4daf4a" height="10" width="10" x="592" y="-15.0" />
   18    18 		<text dominant-baseline="middle" fill="#333" x="606" y="-10.0">Joe</text>
   19    19 	</g>
   20    -1 	<g>
   21    -1 		<rect fill="#e41a1c" height="240.0" stroke="white" width="32.0" x="32.0" y="239.0">
   -1    20 	<g fill="#e41a1c" stroke="white">
   -1    21 		<rect height="240.0" width="32.0" x="32.0" y="239.0">
   22    22 			<title>3</title>
   23    23 		</rect>
   24    -1 		<rect fill="#377eb8" height="160.0" stroke="white" width="32.0" x="64.0" y="319.0">
   25    -1 			<title>2</title>
   -1    24 		<rect height="320.0" width="32.0" x="192.0" y="159.0">
   -1    25 			<title>4</title>
   -1    26 		</rect>
   -1    27 		<rect height="320.0" width="32.0" x="352.0" y="159.0">
   -1    28 			<title>4</title>
   26    29 		</rect>
   27    -1 		<rect fill="#4daf4a" height="400.0" stroke="white" width="32.0" x="96.0" y="79.0">
   -1    30 		<rect height="400.0" width="32.0" x="512.0" y="79.0">
   28    31 			<title>5</title>
   29    32 		</rect>
   30    33 	</g>
   31    -1 	<g>
   32    -1 		<rect fill="#e41a1c" height="320.0" stroke="white" width="32.0" x="192.0" y="159.0">
   33    -1 			<title>4</title>
   -1    34 	<g fill="#377eb8" stroke="white">
   -1    35 		<rect height="160.0" width="32.0" x="64.0" y="319.0">
   -1    36 			<title>2</title>
   34    37 		</rect>
   35    -1 		<rect fill="#377eb8" height="160.0" stroke="white" width="32.0" x="224.0" y="319.0">
   -1    38 		<rect height="160.0" width="32.0" x="224.0" y="319.0">
   36    39 			<title>2</title>
   37    40 		</rect>
   38    -1 		<rect fill="#4daf4a" height="240.0" stroke="white" width="32.0" x="256.0" y="239.0">
   -1    41 		<rect height="240.0" width="32.0" x="384.0" y="239.0">
   39    42 			<title>3</title>
   40    43 		</rect>
   -1    44 		<rect height="80.0" width="32.0" x="544.0" y="399.0">
   -1    45 			<title>1</title>
   -1    46 		</rect>
   41    47 	</g>
   42    -1 	<g>
   43    -1 		<rect fill="#e41a1c" height="320.0" stroke="white" width="32.0" x="352.0" y="159.0">
   44    -1 			<title>4</title>
   -1    48 	<g fill="#4daf4a" stroke="white">
   -1    49 		<rect height="400.0" width="32.0" x="96.0" y="79.0">
   -1    50 			<title>5</title>
   45    51 		</rect>
   46    -1 		<rect fill="#377eb8" height="240.0" stroke="white" width="32.0" x="384.0" y="239.0">
   -1    52 		<rect height="240.0" width="32.0" x="256.0" y="239.0">
   47    53 			<title>3</title>
   48    54 		</rect>
   49    -1 		<rect fill="#4daf4a" height="320.0" stroke="white" width="32.0" x="416.0" y="159.0">
   -1    55 		<rect height="320.0" width="32.0" x="416.0" y="159.0">
   50    56 			<title>4</title>
   51    57 		</rect>
   52    -1 	</g>
   53    -1 	<g>
   54    -1 		<rect fill="#e41a1c" height="400.0" stroke="white" width="32.0" x="512.0" y="79.0">
   55    -1 			<title>5</title>
   56    -1 		</rect>
   57    -1 		<rect fill="#377eb8" height="80.0" stroke="white" width="32.0" x="544.0" y="399.0">
   58    -1 			<title>1</title>
   59    -1 		</rect>
   60    -1 		<rect fill="#4daf4a" height="160.0" stroke="white" width="32.0" x="576.0" y="319.0">
   -1    58 		<rect height="160.0" width="32.0" x="576.0" y="319.0">
   61    59 			<title>2</title>
   62    60 		</rect>
   63    61 	</g>

diff --git a/tests/simple_StackedColumnRenderer.svg b/tests/simple_StackedColumnRenderer.svg

@@ -17,47 +17,45 @@
   17    17 		<rect fill="#4daf4a" height="10" width="10" x="592" y="-15.0" />
   18    18 		<text dominant-baseline="middle" fill="#333" x="606" y="-10.0">Joe</text>
   19    19 	</g>
   20    -1 	<g>
   21    -1 		<rect fill="#e41a1c" height="72.0" stroke="white" width="53.333333333333336" x="53.33333333333333" y="407.0">
   -1    20 	<g fill="#e41a1c" stroke="white">
   -1    21 		<rect height="72.0" width="53.333333333333336" x="53.33333333333333" y="407.0">
   22    22 			<title>3</title>
   23    23 		</rect>
   24    -1 		<rect fill="#377eb8" height="48.0" stroke="white" width="53.333333333333336" x="53.33333333333333" y="359.0">
   25    -1 			<title>2</title>
   -1    24 		<rect height="96.0" width="53.333333333333336" x="213.33333333333334" y="383.0">
   -1    25 			<title>4</title>
   -1    26 		</rect>
   -1    27 		<rect height="96.0" width="53.333333333333336" x="373.3333333333333" y="383.0">
   -1    28 			<title>4</title>
   26    29 		</rect>
   27    -1 		<rect fill="#4daf4a" height="120.0" stroke="white" width="53.333333333333336" x="53.33333333333333" y="239.0">
   -1    30 		<rect height="120.0" width="53.333333333333336" x="533.3333333333334" y="359.0">
   28    31 			<title>5</title>
   29    32 		</rect>
   30    33 	</g>
   31    -1 	<g>
   32    -1 		<rect fill="#e41a1c" height="96.0" stroke="white" width="53.333333333333336" x="213.33333333333334" y="383.0">
   33    -1 			<title>4</title>
   -1    34 	<g fill="#377eb8" stroke="white">
   -1    35 		<rect height="48.0" width="53.333333333333336" x="53.33333333333333" y="359.0">
   -1    36 			<title>2</title>
   34    37 		</rect>
   35    -1 		<rect fill="#377eb8" height="48.0" stroke="white" width="53.333333333333336" x="213.33333333333334" y="335.0">
   -1    38 		<rect height="48.0" width="53.333333333333336" x="213.33333333333334" y="335.0">
   36    39 			<title>2</title>
   37    40 		</rect>
   38    -1 		<rect fill="#4daf4a" height="72.0" stroke="white" width="53.333333333333336" x="213.33333333333334" y="263.0">
   -1    41 		<rect height="72.0" width="53.333333333333336" x="373.3333333333333" y="311.0">
   39    42 			<title>3</title>
   40    43 		</rect>
   -1    44 		<rect height="24.0" width="53.333333333333336" x="533.3333333333334" y="335.0">
   -1    45 			<title>1</title>
   -1    46 		</rect>
   41    47 	</g>
   42    -1 	<g>
   43    -1 		<rect fill="#e41a1c" height="96.0" stroke="white" width="53.333333333333336" x="373.3333333333333" y="383.0">
   44    -1 			<title>4</title>
   -1    48 	<g fill="#4daf4a" stroke="white">
   -1    49 		<rect height="120.0" width="53.333333333333336" x="53.33333333333333" y="239.0">
   -1    50 			<title>5</title>
   45    51 		</rect>
   46    -1 		<rect fill="#377eb8" height="72.0" stroke="white" width="53.333333333333336" x="373.3333333333333" y="311.0">
   -1    52 		<rect height="72.0" width="53.333333333333336" x="213.33333333333334" y="263.0">
   47    53 			<title>3</title>
   48    54 		</rect>
   49    -1 		<rect fill="#4daf4a" height="96.0" stroke="white" width="53.333333333333336" x="373.3333333333333" y="215.0">
   -1    55 		<rect height="96.0" width="53.333333333333336" x="373.3333333333333" y="215.0">
   50    56 			<title>4</title>
   51    57 		</rect>
   52    -1 	</g>
   53    -1 	<g>
   54    -1 		<rect fill="#e41a1c" height="120.0" stroke="white" width="53.333333333333336" x="533.3333333333334" y="359.0">
   55    -1 			<title>5</title>
   56    -1 		</rect>
   57    -1 		<rect fill="#377eb8" height="24.0" stroke="white" width="53.333333333333336" x="533.3333333333334" y="335.0">
   58    -1 			<title>1</title>
   59    -1 		</rect>
   60    -1 		<rect fill="#4daf4a" height="48.0" stroke="white" width="53.333333333333336" x="533.3333333333334" y="287.0">
   -1    58 		<rect height="48.0" width="53.333333333333336" x="533.3333333333334" y="287.0">
   61    59 			<title>2</title>
   62    60 		</rect>
   63    61 	</g>

diff --git a/tests/single_ColumnRenderer.svg b/tests/single_ColumnRenderer.svg

@@ -8,23 +8,17 @@
    8     8 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="240.0" y="490.0">Oranges</text>
    9     9 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="400.0" y="490.0">Pears</text>
   10    10 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="560.0" y="490.0">Bananas</text>
   11    -1 	<g>
   12    -1 		<rect fill="#e41a1c" height="240.0" stroke="white" width="53.333333333333336" x="53.333333333333336" y="239.0">
   -1    11 	<g fill="#e41a1c" stroke="white">
   -1    12 		<rect height="240.0" width="53.333333333333336" x="53.333333333333336" y="239.0">
   13    13 			<title>3</title>
   14    14 		</rect>
   15    -1 	</g>
   16    -1 	<g>
   17    -1 		<rect fill="#e41a1c" height="320.0" stroke="white" width="53.333333333333336" x="213.33333333333334" y="159.0">
   -1    15 		<rect height="320.0" width="53.333333333333336" x="213.33333333333334" y="159.0">
   18    16 			<title>4</title>
   19    17 		</rect>
   20    -1 	</g>
   21    -1 	<g>
   22    -1 		<rect fill="#e41a1c" height="320.0" stroke="white" width="53.333333333333336" x="373.33333333333337" y="159.0">
   -1    18 		<rect height="320.0" width="53.333333333333336" x="373.33333333333337" y="159.0">
   23    19 			<title>4</title>
   24    20 		</rect>
   25    -1 	</g>
   26    -1 	<g>
   27    -1 		<rect fill="#e41a1c" height="400.0" stroke="white" width="53.333333333333336" x="533.3333333333334" y="79.0">
   -1    21 		<rect height="400.0" width="53.333333333333336" x="533.3333333333334" y="79.0">
   28    22 			<title>5</title>
   29    23 		</rect>
   30    24 	</g>

diff --git a/tests/single_StackedColumnRenderer.svg b/tests/single_StackedColumnRenderer.svg

@@ -8,23 +8,17 @@
    8     8 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="240.0" y="490.0">Oranges</text>
    9     9 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="400.0" y="490.0">Pears</text>
   10    10 	<text dominant-baseline="middle" fill="#333" text-anchor="middle" x="560.0" y="490.0">Bananas</text>
   11    -1 	<g>
   12    -1 		<rect fill="#e41a1c" height="240.0" stroke="white" width="53.333333333333336" x="53.33333333333333" y="239.0">
   -1    11 	<g fill="#e41a1c" stroke="white">
   -1    12 		<rect height="240.0" width="53.333333333333336" x="53.33333333333333" y="239.0">
   13    13 			<title>3</title>
   14    14 		</rect>
   15    -1 	</g>
   16    -1 	<g>
   17    -1 		<rect fill="#e41a1c" height="320.0" stroke="white" width="53.333333333333336" x="213.33333333333334" y="159.0">
   -1    15 		<rect height="320.0" width="53.333333333333336" x="213.33333333333334" y="159.0">
   18    16 			<title>4</title>
   19    17 		</rect>
   20    -1 	</g>
   21    -1 	<g>
   22    -1 		<rect fill="#e41a1c" height="320.0" stroke="white" width="53.333333333333336" x="373.3333333333333" y="159.0">
   -1    18 		<rect height="320.0" width="53.333333333333336" x="373.3333333333333" y="159.0">
   23    19 			<title>4</title>
   24    20 		</rect>
   25    -1 	</g>
   26    -1 	<g>
   27    -1 		<rect fill="#e41a1c" height="400.0" stroke="white" width="53.333333333333336" x="533.3333333333334" y="79.0">
   -1    21 		<rect height="400.0" width="53.333333333333336" x="533.3333333333334" y="79.0">
   28    22 			<title>5</title>
   29    23 		</rect>
   30    24 	</g>