Overscan charts

OVERSCANUI KIT

The drawing is a claim about data that is not the data, and the claim changes with the scale. Four rules hold in every cell below: a gap is a gap, there is no smoothing, decimation is reported on the chart rather than hidden, and a value past the axis is marked rather than clipped. Read across for the behaviours, down for the themes.

plaindrops outdecimatedover rangestepno reading

demo/chart.html, from this page

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

<ov-chart
  mode="line"
  min="0"
  max="100"
  source="flux"
  window="96"
></ov-chart>

import { OvChart } from 'overscan/react'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="flux"
  window="96"
/>

import { OvChart } from 'overscan/vue'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="flux"
  window="96"
/>

import OvChart from 'overscan/svelte/OvChart.svelte'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="flux"
  window="96"
/>

terminal

variation: source="bus"

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

<ov-chart
  mode="line"
  min="0"
  max="100"
  source="bus"
  window="96"
></ov-chart>

import { OvChart } from 'overscan/react'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="bus"
  window="96"
/>

import { OvChart } from 'overscan/vue'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="bus"
  window="96"
/>

import OvChart from 'overscan/svelte/OvChart.svelte'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="bus"
  window="96"
/>

industrial

variation: source="spike" window="240"

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

<ov-chart
  mode="line"
  min="0"
  max="100"
  source="spike"
  window="240"
></ov-chart>

import { OvChart } from 'overscan/react'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="spike"
  window="240"
/>

import { OvChart } from 'overscan/vue'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="spike"
  window="240"
/>

import OvChart from 'overscan/svelte/OvChart.svelte'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="spike"
  window="240"
/>

cyber

variation: source="press"

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

<ov-chart
  mode="line"
  min="0"
  max="100"
  source="press"
  window="96"
></ov-chart>

import { OvChart } from 'overscan/react'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="press"
  window="96"
/>

import { OvChart } from 'overscan/vue'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="press"
  window="96"
/>

import OvChart from 'overscan/svelte/OvChart.svelte'

<OvChart
  mode="line"
  min="0"
  max="100"
  source="press"
  window="96"
/>

antiseptic

esper

neo

machina

holo

aegis

vector