plot/test/output/colorLegendLargeChart.html at 205d6540d312f9cb8a7f99d3de05a8490d2f1e1f · observablehq/plot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
  <div class="legend-swatches legend-swatches-wrap" style="font-size: 16px;">
    <style>
      :where(.legend-swatches) {
        font-family: system-ui, sans-serif;
        font-size: 10px;
        margin-bottom: 0.5em;
      }

      :where(.legend-swatch > svg) {
        margin-right: 0.5em;
        overflow: visible;
      }

      :where(.legend-swatches-wrap) {
        display: flex;
        align-items: center;
        min-height: 33px;
        flex-wrap: wrap;
      }

      :where(.legend-swatches-wrap .legend-swatch) {
        display: inline-flex;
        align-items: center;
        margin-right: 1em;
      }
    </style><span class="legend-swatch"><svg width="15" height="15" fill="rgb(110, 64, 170)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>A</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(191, 60, 175)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>B</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(254, 75, 131)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>C</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(255, 120, 71)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>D</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(226, 183, 47)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>E</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(175, 240, 91)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>F</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(82, 246, 103)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>G</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(29, 223, 163)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>H</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(35, 171, 216)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>I</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(76, 110, 219)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>J</span>
  </div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" style="font-size: 7px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style>
      :where(.plot) {
        --plot-background: white;
        display: block;
        height: auto;
        height: intrinsic;
        max-width: 100%;
      }

      :where(.plot text),
      :where(.plot tspan) {
        white-space: pre;
      }
    </style>
    <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(27,0)">
      <path transform="translate(28,30)" d="M0,0L0,6"></path>
      <path transform="translate(87,30)" d="M0,0L0,6"></path>
      <path transform="translate(146,30)" d="M0,0L0,6"></path>
      <path transform="translate(205,30)" d="M0,0L0,6"></path>
      <path transform="translate(264,30)" d="M0,0L0,6"></path>
      <path transform="translate(323,30)" d="M0,0L0,6"></path>
      <path transform="translate(382,30)" d="M0,0L0,6"></path>
      <path transform="translate(441,30)" d="M0,0L0,6"></path>
      <path transform="translate(500,30)" d="M0,0L0,6"></path>
      <path transform="translate(559,30)" d="M0,0L0,6"></path>
    </g>
    <g aria-label="x-axis tick label" transform="translate(27,9.5)">
      <text y="0.71em" transform="translate(28,30)">A</text>
      <text y="0.71em" transform="translate(87,30)">B</text>
      <text y="0.71em" transform="translate(146,30)">C</text>
      <text y="0.71em" transform="translate(205,30)">D</text>
      <text y="0.71em" transform="translate(264,30)">E</text>
      <text y="0.71em" transform="translate(323,30)">F</text>
      <text y="0.71em" transform="translate(382,30)">G</text>
      <text y="0.71em" transform="translate(441,30)">H</text>
      <text y="0.71em" transform="translate(500,30)">I</text>
      <text y="0.71em" transform="translate(559,30)">J</text>
    </g>
    <g aria-label="cell">
      <rect x="28" width="53" y="0" height="30" fill="rgb(110, 64, 170)"></rect>
      <rect x="87" width="53" y="0" height="30" fill="rgb(191, 60, 175)"></rect>
      <rect x="146" width="53" y="0" height="30" fill="rgb(254, 75, 131)"></rect>
      <rect x="205" width="53" y="0" height="30" fill="rgb(255, 120, 71)"></rect>
      <rect x="264" width="53" y="0" height="30" fill="rgb(226, 183, 47)"></rect>
      <rect x="323" width="53" y="0" height="30" fill="rgb(175, 240, 91)"></rect>
      <rect x="382" width="53" y="0" height="30" fill="rgb(82, 246, 103)"></rect>
      <rect x="441" width="53" y="0" height="30" fill="rgb(29, 223, 163)"></rect>
      <rect x="500" width="53" y="0" height="30" fill="rgb(35, 171, 216)"></rect>
      <rect x="559" width="53" y="0" height="30" fill="rgb(76, 110, 219)"></rect>
    </g>
  </svg>
</figure>