Sheet 02.19 / Components · Data

CurveWindow

The only framed object: a chart in a window with three hollow controls. A graphite line over a dashed baseline, and the latest point in pineapple with an ink ring and a soft halo.

CLASSb-windowDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — curvewindowlive, from bundle.css

home / hero chart

Fig. 1

Fig. 1 — illustrative series44 pts

Anatomy

Parts

Part	Class	Notes
Window	`.b-window`	radius-md, the only rounded thing on the sheet.
Bar	`.b-window-bar`	Three hollow dots and a caption.
Curve	`.b-curve + .b-baseline`	1.6px graphite line over a dashed line-strong baseline.
Point	`.b-point + .b-point-halo`	The last value: pineapple, ink ring, halo.

Markup

Code

bundle.css

<div style="max-width:640px">
  <div class="b-window">
    <div class="b-window-bar"><span><i></i><i></i><i></i></span><span class="b-caption">Fig. 1</span></div>
    <div class="b-window-body">
      <svg viewBox="0 0 720 220" role="img" aria-label="An illustrative series rising over time">
        <path class="b-baseline" d="M18 179H702"/>
        <path class="b-curve" d="M18 179C29 180 39 178 50 173C60 182 71 176 82 153C92 156 103 158 113 160C124 163 135 170 145 182C156 185 166 183 177 176C188 195 198 193 209 168C219 177 230 174 241 160C251 145 262 134 273 126C283 100 294 92 304 100C315 101 326 97 336 88C347 83 357 72 368 55C379 74 389 70 400 41C410 53 421 62 432 69C442 71 453 80 463 94C474 91 485 97 495 111C506 113 516 105 527 84C538 57 548 51 559 65C569 51 580 46 591 49C601 30 612 25 622 35C633 23 644 21 654 29C665 32 675 35 686 37C691 37 699 33 702 32"/>
        <circle class="b-point-halo" cx="702" cy="32" r="9"/>
        <circle class="b-point" cx="702" cy="32" r="4"/>
      </svg>
    </div>
  </div>
  <div class="b-figcap"><span class="b-caption">Fig. 1 — illustrative series</span><span class="b-caption">44 pts</span></div>
</div>

Plot real numbers, or say it is illustrative.
Keep axes optional and in caption.

Don't

Add gridlines.
Frame anything else as a window.