Visualization examples

A working collection of the reusable Vue post components from Humanfia, integrated into Hexo Butterfly. Keep these examples as a starting point for future research and development notes.

Examples, not results. Numerical values are synthetic and do not describe AI4Game or completed experiments. The linked timeline uses actual notebook articles; its future entry is a placeholder.

CurvesBarsScatterTablesDiagramsComparisonsTimelineEditorial

Every numerical value below is synthetic demonstration data. These examples are not AI4Game experiments or research findings.

01 / Interactive curves

Scrub with the pointer or arrow keys, toggle a series, and inspect the underlying data.

LineChart · synthetic dataDrag or use ← → to scrub

An experiment as it unfolds

Swipe the plot sideways to see all of it →

• Baseline
• New direction

Data

The new direction starts slowly and then improves. These numbers exist only to demonstrate the chart.

02 / Grouped comparisons

Switch the setting, hide a series, or choose a comparison baseline.

BarChart · synthetic data

Small settingLarge setting

Valuesvs Baseline

One change, three tasks

020406080

Task A

42

56

Task B

58

53

Task C

36

61

• Baseline
• New direction

Data

A negative result stays visible: the new direction is worse on Task B.

03 / Trade-off explorer

Hover a point or focus the plot and use the arrow keys.

ScatterChart · synthetic data

Cost and score

• Failed attempt: Cost $9, Score 39
• Baseline: Cost $12, Score 51
• New direction: Cost $18, Score 68

• Earlier attempts
• New direction

Data

A higher score may have a higher cost. The example demonstrates the trade-off, not a measured result.

04 / Sortable results

Click a column to sort. Click a row, or press Enter, to pin it while reading across.

Synthetic results · sortable and pinnable

Approach ↕	Score ↕	Cost ↕
Baseline	51	$12
New direction	68	$18
Failed attempt	39	$9

05 / A ranking that tells a story

Leaderboard · synthetic data

The order can change

1. 1Baseline51
2. 2Failed attempt39
3. 3New direction68

Previous and current ranks are illustrative. No project performance is implied.

06 / An animated research workflow

Replay the diagram or step through it at your own pace.

Research journey · workflow example

Replay

Swipe the diagram sideways to see all of it →

1/0 Start with a question and make the assumption explicit.

Illustrative workflow. A failed attempt is evidence to carry into the next iteration.

07 / Before and after

Drag the divider or use the slider's arrow keys. Each side can hold an image, table, code, or SVG.

SwipeCompare · workflow sketchesDrag to compare

Unrecorded attempt

Traceable experiment

◀ ▶

Original schematic examples. A workflow comparison, not experimental data.

08 / Feedback loops

1.0minutes / iteration

Small, controlled change

example iterations

12

3.0minutes / iteration

Large batch of changes

example iterations

4

Synthetic periods make the animation visible. Actual development times are not claimed.

09 / Explore a threshold

Move the control to see how a hypothetical budget changes the status.

RangeMeter · hypothetical budget45 units

1

2

RangeMeter · hypothetical budget

1. 130 minimum setup
2. 270 budget cap

Illustrative budgetWithin budget

An interaction example. Adjust the unit, thresholds and labels for a real experiment.

10 / Statistics and number tickers

Demo approaches

3

A baseline, a failed attempt, and a new direction.

Demo checkpoints

5

Five invented observations per curve.

Research claims

0

The gallery contains examples only.

An inline ticker: 1.25×. This is an arbitrary example value.

11 / A linked notebook timeline

ProjectTimeline · actual article links

From the notebook

NextNext research entry

1. Oct 26, 2026BlogWhy keep an open research notebook?A paper tells the final story. This notebook keeps the questions, detours, failed attempts, and small discoveries that led there.
2. Oct 26, 2026BlogAI4Game: starting a project notebookA place for the research questions, development decisions, experiments, and lessons behind AI4Game.
3. NextNextNext research entryA placeholder for future work, not a completed milestone.

Dates and summaries resolve from this notebook's published articles. The pending entry is explicitly a placeholder.

12 / Editorial cards

QuestionExample

What would change your mind?

Write the expected observation before looking at the result.

EvidenceExample

Keep the attempt inspectable

Preserve configuration, code revision, and the reason for the next decision.

13 / Captioned figures

An original schematic: the observation connects the initial question to the next one.

14 / Pull quotes

A failed attempt is useful when the next decision can learn from it.

— Notebook principle

15 / Context beside the text

Keep the main argument readable while leaving a small detail nearbyThis is an expandable note. It remains inside the reading column on this Butterfly layout, including on a phone..

Source and attribution

Visualization components: Humanfia’s post toolkit, reused under Apache-2.0. Integration notices. The blue palette, example content, workflow schematic, and Hexo bridge are adapted for this notebook.