Test Page
Typography, data displays, controls, and a small interactive model.
Rendered Markdown
This is bold text, this is emphasis, and this is inline code. A link to the Blog uses the same navigation as a regular article. These examples are rendered from a Markdown source file.
A useful interface makes the current state visible before asking someone to act.
Notes
- Keep the first action close to its result.
- Use labels that still make sense when JavaScript is unavailable.
- Let a narrow screen scroll a wide table instead of compressing its columns into noise.
- Observe the default state.
- Change one control.
- Compare the result with the stated values.
type Sample = { time: number; value: number };
const displacement = (time: number): number =>
Math.exp(-0.18 * time) * Math.sin(2 * Math.PI * 1.2 * time);
| Signal | Default | Meaning |
|---|---|---|
| Damping | 0.18 | How quickly the motion settles |
| Frequency | 1.20 Hz | Oscillations per second |
| Samples | 121 | Points in the plotted trace |
Charts & graphs
View chart data
| Series | Value |
|---|---|
| A | 32 |
| B | 58 |
| C | 46 |
| D | 80 |
Damped oscillator
Change either input to redraw the signal.
Controls
States
Ready
Adjust the model to compare values.
No comparisons yet
Adjust the model above to compare values in place.