Overscan node graph

The layout is the program, which makes it the interface shape this whole aesthetic is built on. The hard part is not drawing it. This is the one surface in the kit where you author the data, so the thesis runs backwards: everywhere else a readout refuses to draw a value it cannot represent, and here the graph refuses to make a connection that would not mean anything. The failure to avoid is the same one: a socket that accepts anything is a seven-segment display rendering 1.5 as 15 — the wiring succeeds, the graph looks right, and the answer is plausible and wrong. So there is no any type, and every widening is declared one pair at a time with a name for what it does.

The board

One refusal each

type — no declared rule carries this type to that one. there is no any socket to fall back on, deliberately: a socket that accepts anything is a seven-segment display rendering 1.5 as 15

occupied — an input carries one link. a second one replacing the first silently is the graph choosing which of two sources you meant, which is not its choice to make

cycle — the link closes a loop, so there is no order in which the graph could be evaluated. links are judged in declaration order, so the one that closes the loop is the one refused, and what is left is a chain that evaluates

unknown — a required input with no link. the node does not take a default, because a default is the graph inventing the number nobody supplied. everything downstream is blocked, which is a different claim from broken

converted — not a refusal. a declared widening ran, so the link is real and carries a real value, and the value is not the type the socket it lands on would suggest. the rule that ran is named on the wire

missing — the markup names a socket that is not there. the link is not quietly dropped: deleting an author's mistake is the same class of help as closing a gap in a chart

The curve, which is cheap to get wrong

A bezier whose control points are a fixed horizontal offset crosses itself the moment the target is to the left of its source, and that is most of the interesting cases: a link back to an earlier stage, or any node dragged past the thing feeding it. A crossing curve is ambiguous exactly where two links run near each other, which is the one thing a wire has to be clear about. So the offset scales with the horizontal distance, and going backwards it also scales inversely with the vertical distance: two sockets at the same height have no room to pass between the nodes, so they need the widest bulge of all.

forwards

backwards, offset vertically

backwards, exactly level — the worst case

Ten themes

Corner, bezel, shear, case, tracking and every colour arrive from the same tokens the panels read. Nothing here is drawn on a canvas, which is the whole reason a theme reaches it at all.

demo/graph.html, from this page

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

<ov-graph>…</ov-graph>

import { OvGraph } from 'overscan/react'

<OvGraph />

import { OvGraph } from 'overscan/vue'

<OvGraph />

import OvGraph from 'overscan/svelte/OvGraph.svelte'

<OvGraph />

variation: class="sm"

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

<ov-graph class="sm">…</ov-graph>

import { OvGraph } from 'overscan/react'

<OvGraph class="sm" />

import { OvGraph } from 'overscan/vue'

<OvGraph class="sm" />

import OvGraph from 'overscan/svelte/OvGraph.svelte'

<OvGraph class="sm" />

variation: class="sm"

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

<ov-graph class="sm">…</ov-graph>

import { OvGraph } from 'overscan/react'

<OvGraph class="sm" />

import { OvGraph } from 'overscan/vue'

<OvGraph class="sm" />

import OvGraph from 'overscan/svelte/OvGraph.svelte'

<OvGraph class="sm" />

variation: class="sm"

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

<ov-graph class="sm">…</ov-graph>

import { OvGraph } from 'overscan/react'

<OvGraph class="sm" />

import { OvGraph } from 'overscan/vue'

<OvGraph class="sm" />

import OvGraph from 'overscan/svelte/OvGraph.svelte'

<OvGraph class="sm" />