Overscan histogram

OVERSCANUI KIT

Counts in bins, and nothing between them. An empty bin stays empty, marked on the baseline and counted, and there is no smoothing curve at all: a line through the bins is a distribution nobody measured. Values past the axis are counted in their own bins, set apart at each end, never dropped and never piled into the last bin, and a value that is not a number is counted as no value. Bins of unequal width are drawn as density, because the eye reads area. The bin width and who chose it are stated. Below twenty samples the bars are refused: the values are drawn where they fell, one tick each, because a handful of points has no shape.

demo/histogram.html, from this page

import 'overscan'
import 'overscan/overscan.css'

<ov-histogram
  id="live-histogram"
  min="0"
  max="100"
  bins="20"
  unit="ms"
></ov-histogram>

import { OvHistogram } from 'overscan/react'

<OvHistogram
  id="live-histogram"
  min="0"
  max="100"
  bins="20"
  unit="ms"
/>

import { OvHistogram } from 'overscan/vue'

<OvHistogram
  id="live-histogram"
  min="0"
  max="100"
  bins="20"
  unit="ms"
/>

import OvHistogram from 'overscan/svelte/OvHistogram.svelte'

<OvHistogram
  id="live-histogram"
  min="0"
  max="100"
  bins="20"
  unit="ms"
/>

live: samples arriving, from none

variation: src="models/histogram-latency.json"

import 'overscan'
import 'overscan/overscan.css'

<ov-histogram
  src="models/histogram-latency.json"
  min="0"
  max="100"
  bins="20"
  unit="ms"
></ov-histogram>

import { OvHistogram } from 'overscan/react'

<OvHistogram
  src="models/histogram-latency.json"
  min="0"
  max="100"
  bins="20"
  unit="ms"
/>

import { OvHistogram } from 'overscan/vue'

<OvHistogram
  src="models/histogram-latency.json"
  min="0"
  max="100"
  bins="20"
  unit="ms"
/>

import OvHistogram from 'overscan/svelte/OvHistogram.svelte'

<OvHistogram
  src="models/histogram-latency.json"
  min="0"
  max="100"
  bins="20"
  unit="ms"
/>

past the axis, and no value

two clusters, nothing between

unequal bins, as density

too few for a shape

variation: src="models/histogram-clusters.json" bins="25"

import 'overscan'
import 'overscan/overscan.css'

<ov-histogram
  src="models/histogram-clusters.json"
  min="0"
  max="100"
  bins="25"
></ov-histogram>

import { OvHistogram } from 'overscan/react'

<OvHistogram
  src="models/histogram-clusters.json"
  min="0"
  max="100"
  bins="25"
/>

import { OvHistogram } from 'overscan/vue'

<OvHistogram
  src="models/histogram-clusters.json"
  min="0"
  max="100"
  bins="25"
/>

import OvHistogram from 'overscan/svelte/OvHistogram.svelte'

<OvHistogram
  src="models/histogram-clusters.json"
  min="0"
  max="100"
  bins="25"
/>

terminal

variation: src="models/histogram-brackets.json" unit="kW"

import 'overscan'
import 'overscan/overscan.css'

<ov-histogram
  src="models/histogram-brackets.json"
  unit="kW"
></ov-histogram>

import { OvHistogram } from 'overscan/react'

<OvHistogram
  src="models/histogram-brackets.json"
  unit="kW"
/>

import { OvHistogram } from 'overscan/vue'

<OvHistogram
  src="models/histogram-brackets.json"
  unit="kW"
/>

import OvHistogram from 'overscan/svelte/OvHistogram.svelte'

<OvHistogram
  src="models/histogram-brackets.json"
  unit="kW"
/>

industrial

cyber

antiseptic

esper

neo

machina

holo

aegis

vector