plot/test/output/integerIntervalArea.html at ff6f7958c52acef4aa2d2ebfad38e22e018fdba9 · 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
101
102
103
104
105
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
  <div class="plot-swatches plot-swatches-wrap">
    <style>
      :where(.plot-swatches) {
        font-family: system-ui, sans-serif;
        font-size: 10px;
        margin-bottom: 0.5em;
      }

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

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

      :where(.plot-swatches-wrap .plot-swatch) {
        display: inline-flex;
        align-items: center;
        margin-right: 1em;
      }
    </style><span class="plot-swatch"><svg width="15" height="15" fill="#4269d0" 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="plot-swatch"><svg width="15" height="15" fill="#efb118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>b</span>
  </div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" 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="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
      <path transform="translate(40,370)" d="M0,0L-6,0"></path>
      <path transform="translate(40,326.25)" d="M0,0L-6,0"></path>
      <path transform="translate(40,282.5)" d="M0,0L-6,0"></path>
      <path transform="translate(40,238.75)" d="M0,0L-6,0"></path>
      <path transform="translate(40,195)" d="M0,0L-6,0"></path>
      <path transform="translate(40,151.25)" d="M0,0L-6,0"></path>
      <path transform="translate(40,107.5)" d="M0,0L-6,0"></path>
      <path transform="translate(40,63.75)" d="M0,0L-6,0"></path>
      <path transform="translate(40,20)" d="M0,0L-6,0"></path>
    </g>
    <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
      <text y="0.32em" transform="translate(40,370)">0</text>
      <text y="0.32em" transform="translate(40,326.25)">2</text>
      <text y="0.32em" transform="translate(40,282.5)">4</text>
      <text y="0.32em" transform="translate(40,238.75)">6</text>
      <text y="0.32em" transform="translate(40,195)">8</text>
      <text y="0.32em" transform="translate(40,151.25)">10</text>
      <text y="0.32em" transform="translate(40,107.5)">12</text>
      <text y="0.32em" transform="translate(40,63.75)">14</text>
      <text y="0.32em" transform="translate(40,20)">16</text>
    </g>
    <g aria-label="y-axis label" text-anchor="start" transform="translate(-36.5,-16.5)">
      <text y="0.71em" transform="translate(40,20)">↑ y</text>
    </g>
    <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0.5,0)">
      <path transform="translate(69,370)" d="M0,0L0,6"></path>
      <path transform="translate(127,370)" d="M0,0L0,6"></path>
      <path transform="translate(185,370)" d="M0,0L0,6"></path>
      <path transform="translate(243,370)" d="M0,0L0,6"></path>
      <path transform="translate(301,370)" d="M0,0L0,6"></path>
      <path transform="translate(359,370)" d="M0,0L0,6"></path>
      <path transform="translate(417,370)" d="M0,0L0,6"></path>
      <path transform="translate(475,370)" d="M0,0L0,6"></path>
      <path transform="translate(533,370)" d="M0,0L0,6"></path>
      <path transform="translate(591,370)" d="M0,0L0,6"></path>
    </g>
    <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
      <text y="0.71em" transform="translate(69,370)">3</text>
      <text y="0.71em" transform="translate(127,370)">4</text>
      <text y="0.71em" transform="translate(185,370)">5</text>
      <text y="0.71em" transform="translate(243,370)">6</text>
      <text y="0.71em" transform="translate(301,370)">7</text>
      <text y="0.71em" transform="translate(359,370)">8</text>
      <text y="0.71em" transform="translate(417,370)">9</text>
      <text y="0.71em" transform="translate(475,370)">10</text>
      <text y="0.71em" transform="translate(533,370)">11</text>
      <text y="0.71em" transform="translate(591,370)">12</text>
    </g>
    <g aria-label="x-axis label" text-anchor="end" transform="translate(17.5,27.5)">
      <text transform="translate(620,370)">x →</text>
    </g>
    <g aria-label="area" fill-opacity="0.7" stroke-width="2" stroke-linejoin="round" stroke-linecap="round">
      <path fill="#4269d0" stroke="#4269d0" d="M40,260.625L330,216.875L330,370L40,370Z"></path>
      <path fill="#efb118" stroke="#efb118" d="M330,20L620,282.5L620,370L330,216.875Z"></path>
    </g>
    <g aria-label="tip" fill="var(--plot-background)" stroke="currentColor" pointer-events="none" text-anchor="start" transform="translate(0.5,0.5)"></g>
  </svg>
</figure>