Skip to content

Commit

Permalink
📝 Update monochromatic sequences to SVG
Browse files Browse the repository at this point in the history
  • Loading branch information
@rekognizecode
rekognizecode committed Nov 25, 2024
1 parent c4f149c commit 7a59c61
Show file tree
Hide file tree
Showing 2 changed files with 206 additions and 2 deletions.
4 changes: 2 additions & 2 deletions docs/viz/diagram-anatomy/colors.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,8 +132,8 @@ Monochromatische Paletten eignen sich gut für Beziehungs- und Trenddiagramme.
Beim hellen Theme bezeichnet die dunkelste Farbe die größten Werte. In dunklen
Themes bezeichnet die hellste Farbe die größten Werte.

.. figure:: palettes-mono-1.png
.. figure:: palettes-mono-2.png
.. raw:: html
:file: sequence-mono-purple-blue.html

Warm-Kalt
~~~~~~~~~
Expand Down
204 changes: 204 additions & 0 deletions docs/viz/diagram-anatomy/sequence-mono-purple-blue.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1360 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="sequence-purple-group">
<g id="Purple-100" serif:id="Purple 100" transform="matrix(1,0,0,1,-193,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(117,59,189);"/>
</g>
<g id="Purple-90" serif:id="Purple 90" transform="matrix(1,0,0,1,-73,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(131,78,195);"/>
</g>
<g id="Purple-80" serif:id="Purple 80" transform="matrix(1,0,0,1,47,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(145,98,202);"/>
</g>
<g id="Purple-70" serif:id="Purple 70" transform="matrix(1,0,0,1,167,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(158,117,209);"/>
</g>
<g id="Purple-60" serif:id="Purple 60" transform="matrix(1,0,0,1,287,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(172,137,215);"/>
</g>
<g id="Purple-50" serif:id="Purple 50" transform="matrix(1,0,0,1,407,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(186,157,222);"/>
</g>
<g id="Purple-40" serif:id="Purple 40" transform="matrix(1,0,0,1,527,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(200,177,229);"/>
</g>
<g id="Purple-30" serif:id="Purple 30" transform="matrix(1,0,0,1,647,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(213,196,235);"/>
</g>
<g id="Purple-20" serif:id="Purple 20" transform="matrix(1,0,0,1,767,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(227,216,242);"/>
</g>
<g id="Purple-10" serif:id="Purple 10" transform="matrix(1,0,0,1,887,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(241,235,248);"/>
</g>
<g transform="matrix(1,0,0,1,-165.176,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:white;">90</text>
</g>
<g transform="matrix(1,0,0,1,-45.1354,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:white;">80</text>
</g>
<g transform="matrix(1,0,0,1,74.824,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:white;">70</text>
</g>
<g transform="matrix(1,0,0,1,314.865,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:black;">50</text>
</g>
<g transform="matrix(1,0,0,1,434.824,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:black;">40</text>
</g>
<g transform="matrix(1,0,0,1,554.865,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:black;">30</text>
</g>
<g transform="matrix(1,0,0,1,674.824,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:black;">20</text>
</g>
<g transform="matrix(1,0,0,1,794.865,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:black;">10</text>
</g>
<g transform="matrix(1,0,0,1,-285.135,-789.19)">
<text x="377.539px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">753bbd</text>
</g>
<g transform="matrix(1,0,0,1,-165.176,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">834ec3</text>
</g>
<g transform="matrix(1,0,0,1,-45.1354,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">9162ca</text>
</g>
<g transform="matrix(1,0,0,1,74.824,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">9e75d1</text>
</g>
<g transform="matrix(1,0,0,1,314.865,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">ba9dde</text>
</g>
<g transform="matrix(1,0,0,1,194.865,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:white;">60</text>
</g>
<g transform="matrix(1,0,0,1,194.865,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">ac89d7</text>
</g>
<g transform="matrix(1,0,0,1,434.824,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">c8b1e5</text>
</g>
<g transform="matrix(1,0,0,1,554.865,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">d5c4eb</text>
</g>
<g transform="matrix(1,0,0,1,674.824,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">e3d8f2</text>
</g>
<g transform="matrix(1,0,0,1,794.865,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">f1ebf8</text>
</g>
<g id="no-cursor" transform="matrix(0.833333,0,0,0.930233,-220,-688.188)">
<rect x="360" y="940" width="1440" height="43" style="fill:url(#_Sequence-Mono-Linear1);"/>
</g>
<g transform="matrix(1,0,0,1,-41.9102,-734.648)">
<text x="119px" y="1010px" style="font-family:'Arial-BoldMT', 'Arial';font-weight:700;font-size:40px;">Purple</text>
</g>
<g transform="matrix(1,0,0,1,-285.135,-743.876)">
<text x="377.539px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:white;">100</text>
</g>
</g>
<g id="sequence-blue-group" transform="matrix(1,0,0,1,-280,319.97)">
<g id="Blue-100" serif:id="Blue 100" transform="matrix(1,0,0,1,87,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(6,99,181);"/>
</g>
<g id="Blue-90" serif:id="Blue 90" transform="matrix(1,0,0,1,207,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(30,114,188);"/>
</g>
<g id="Blue-80" serif:id="Blue 80" transform="matrix(1,0,0,1,327,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(56,130,196);"/>
</g>
<g id="Blue-70" serif:id="Blue 70" transform="matrix(1,0,0,1,447,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(80,145,203);"/>
</g>
<g id="Blue-60" serif:id="Blue 60" transform="matrix(1,0,0,1,567,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(106,161,211);"/>
</g>
<g id="Blue-50" serif:id="Blue 50" transform="matrix(1,0,0,1,687,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(130,177,218);"/>
</g>
<g id="Blue-40" serif:id="Blue 40" transform="matrix(1,0,0,1,807,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(155,193,225);"/>
</g>
<g id="Blue-30" serif:id="Blue 30" transform="matrix(1,0,0,1,927,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(180,208,233);"/>
</g>
<g id="Blue-20" serif:id="Blue 20" transform="matrix(1,0,0,1,1047,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(205,224,240);"/>
</g>
<g id="Blue-10" serif:id="Blue 10" transform="matrix(1,0,0,1,1167,-196.77)">
<rect x="273" y="263" width="120" height="120" style="fill:rgb(230,239,247);"/>
</g>
<g transform="matrix(1,0,0,1,114.824,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:white;">90</text>
</g>
<g transform="matrix(1,0,0,1,234.865,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:white;">80</text>
</g>
<g transform="matrix(1,0,0,1,354.824,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:white;">70</text>
</g>
<g transform="matrix(1,0,0,1,594.865,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:black;">50</text>
</g>
<g transform="matrix(1,0,0,1,714.824,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:black;">40</text>
</g>
<g transform="matrix(1,0,0,1,834.865,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:black;">30</text>
</g>
<g transform="matrix(1,0,0,1,954.824,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:black;">20</text>
</g>
<g transform="matrix(1,0,0,1,1074.86,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:black;">10</text>
</g>
<g transform="matrix(1,0,0,1,-5.13535,-789.19)">
<text x="377.539px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">0663b5</text>
</g>
<g transform="matrix(1,0,0,1,114.824,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">1e72bc</text>
</g>
<g transform="matrix(1,0,0,1,234.865,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">3882c4</text>
</g>
<g transform="matrix(1,0,0,1,354.824,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">5091cb</text>
</g>
<g transform="matrix(1,0,0,1,594.865,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">82b1da</text>
</g>
<g transform="matrix(1,0,0,1,474.865,-744.384)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:white;">60</text>
</g>
<g transform="matrix(1,0,0,1,474.865,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">6aa1d3</text>
</g>
<g transform="matrix(1,0,0,1,714.824,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">9bc1e1</text>
</g>
<g transform="matrix(1,0,0,1,834.865,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">b4d0e9</text>
</g>
<g transform="matrix(1,0,0,1,954.824,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">cde0f0</text>
</g>
<g transform="matrix(1,0,0,1,1074.86,-789.19)">
<text x="384.213px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;">e6eef7</text>
</g>
<g id="no-cursor1" serif:id="no-cursor" transform="matrix(0.833333,0,0,0.930233,60,-688.188)">
<rect x="360" y="940" width="1440" height="43" style="fill:url(#_Sequence-Mono-Linear2);"/>
</g>
<g transform="matrix(1,0,0,1,238.09,-734.648)">
<text x="119px" y="1010px" style="font-family:'Arial-BoldMT', 'Arial';font-weight:700;font-size:40px;">Blue</text>
</g>
<g transform="matrix(1,0,0,1,-5.13535,-743.876)">
<text x="377.539px" y="842.893px" style="font-family:'ArialMT', 'Arial';font-size:24px;fill:white;">100</text>
</g>
</g>
<defs>
<linearGradient id="_Sequence-Mono-Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1440,0,0,43,360,961.5)"><stop offset="0" style="stop-color:rgb(117,59,189);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(241,235,248);stop-opacity:1"/></linearGradient>
<linearGradient id="_Sequence-Mono-Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1440,0,0,43,360,961.5)"><stop offset="0" style="stop-color:rgb(6,99,181);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(230,238,247);stop-opacity:1"/></linearGradient>
</defs>
</svg>

0 comments on commit 7a59c61

Please sign in to comment.