plot/test/output/integerIntervalAreaZ.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
<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="#a6cee3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>P</span><span class="plot-swatch"><svg width="15" height="15" fill="#1f78b4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>R</span><span class="plot-swatch"><svg width="15" height="15" fill="#b2df8a" 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="#33a02c" 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="plot-swatch"><svg width="15" height="15" fill="#fb9a99" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="100%" height="100%"></rect>
      </svg>c</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,328.824)" d="M0,0L-6,0"></path>
      <path transform="translate(40,287.647)" d="M0,0L-6,0"></path>
      <path transform="translate(40,246.471)" d="M0,0L-6,0"></path>
      <path transform="translate(40,205.294)" d="M0,0L-6,0"></path>
      <path transform="translate(40,164.118)" d="M0,0L-6,0"></path>
      <path transform="translate(40,122.941)" d="M0,0L-6,0"></path>
      <path transform="translate(40,81.765)" d="M0,0L-6,0"></path>
      <path transform="translate(40,40.588)" 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,328.824)">2</text>
      <text y="0.32em" transform="translate(40,287.647)">4</text>
      <text y="0.32em" transform="translate(40,246.471)">6</text>
      <text y="0.32em" transform="translate(40,205.294)">8</text>
      <text y="0.32em" transform="translate(40,164.118)">10</text>
      <text y="0.32em" transform="translate(40,122.941)">12</text>
      <text y="0.32em" transform="translate(40,81.765)">14</text>
      <text y="0.32em" transform="translate(40,40.588)">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(40,370)" d="M0,0L0,6"></path>
      <path transform="translate(233.333,370)" d="M0,0L0,6"></path>
      <path transform="translate(426.667,370)" d="M0,0L0,6"></path>
      <path transform="translate(620,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(40,370)">0.0</text>
      <text y="0.71em" transform="translate(233.333,370)">1.0</text>
      <text y="0.71em" transform="translate(426.667,370)">2.0</text>
      <text y="0.71em" transform="translate(620,370)">3.0</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="#b2df8a" stroke="#a6cee3" d="M40,267.059L233.333,225.882L233.333,370L40,370Z"></path>
      <path fill="#33a02c" stroke="#a6cee3" d="M233.333,40.588L426.667,287.647L426.667,370L233.333,225.882Z"></path>
      <path fill="#fb9a99" stroke="#1f78b4" d="M233.333,20L233.333,40.588ZM620,225.882L620,370Z"></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>