All essays

Design / Figures

Figures & diagrams

A small chart language for Oruntak Notes: warm paper, quiet ink, and enough context to read a figure without guessing.

Mert Oruntak

A chart is a note with a shape. It should make a comparison easier while leaving the reader enough context to check what the marks mean.

These examples use invented illustrative values for demonstration only. They do not represent observed results.

The page rules

  • Use sage, teal, and terracotta ink on warm paper. Keep the same readable Roboto Slab treatment across titles, labels, and notes.
  • Name the source, units, time window, and scale near the figure. A reader should not have to infer the denominator or the zero point.
  • Show uncertainty when it matters. Label ranges as illustrative; an interval here is a visual range around a point estimate, not a statistical confidence interval.
  • Design for access: keep text legible, use patterns or direct labels where useful, and never make color the only way to distinguish a series.
  • Prefer a modest claim that the marks support. A tidy chart is not evidence of a stronger conclusion.

Charts and illustrated figures

01 · Two paths from the same start

Use a line when order and change over time are the point. Add the date or sequence, unit, source note, and a direct label for each path.

Two paths from the same starting point. Illustrative indexed paths begin at 100 and diverge across eight observations. The index makes change from a shared starting point easy to compare; it does not describe a real series.
Figure 1. Illustrative indexed paths begin at 100 and diverge across eight observations. The index makes change from a shared starting point easy to compare; it does not describe a real series. Source: invented example data.
Figure data
Two paths from the same starting point — Source: invented example data.
PeriodPath APath B
1100100
210599
3104103
4111101
5118105
6120104
7128108
8136110

02 · Five categories, one glance

Use bars for a clear comparison across named categories. A horizontal layout gives longer labels room to breathe.

Comparing categories. An illustrative horizontal bar chart compares five invented category values. The bars are ordered for reading, and the axis states the unit so length is not left to interpretation.
Figure 2. An illustrative horizontal bar chart compares five invented category values. The bars are ordered for reading, and the axis states the unit so length is not left to interpretation. Source: invented example data.
Figure data
Comparing categories — Source: invented example data.
CategoryValue
A42
B34
C27
D19
E12

03 · Hours and scores, cautiously read

Use a scatter plot for paired observations. State the unit, sample definition, source, and what the plot cannot tell us before describing a pattern.

Patterns without a causal claim. These invented points show an illustrative association between study hours and a score. The pattern is a demonstration of the form; it does not establish causation or report a study.
Figure 3. These invented points show an illustrative association between study hours and a score. The pattern is a demonstration of the form; it does not establish causation or report a study. Source: invented example data.
Figure data
Patterns without a causal claim — Source: invented example data.
Study hoursScore
142
247
344
462
556
672
765
880
974
1089

04 · A distribution in five equal bins

Use a distribution view when the spread and concentration matter more than one summary number. Explain bin width and mark missing or excluded values.

The shape of a distribution. A histogram groups invented illustrative observations into five equal-width bins. Bins include their lower boundary and exclude their upper boundary, except the last bin, which includes 50. Counts total 40.
Figure 4. A histogram groups invented illustrative observations into five equal-width bins. Bins include their lower boundary and exclude their upper boundary, except the last bin, which includes 50. Counts total 40. Source: invented example data.
Figure data
The shape of a distribution — Source: invented example data.
IntervalCount
0–103
10–208
20–3015
30–409
40–505

05 · Weekday by time block

Use a heatmap for a grid of repeated counts. Include row and column labels, the scale direction, and a note about the counting rule.

When activity concentrates. This heatmap uses invented counts across weekdays and time blocks. The annotation names the count unit, while cell labels and a restrained palette keep small differences readable.
Figure 5. This heatmap uses invented counts across weekdays and time blocks. The annotation names the count unit, while cell labels and a restrained palette keep small differences readable. Source: invented example data.
Figure data
When activity concentrates — Source: invented example data.
DayMorningAfternoonEvening
Mon263
Tue485
Wed396
Thu574
Fri251

06 · Composition at 100%

Use a 100% stacked bar when parts of a whole are the question. Keep the groups aligned and identify the denominator and period.

Different parts, the same whole. Two invented groups are shown as 100% stacked compositions. Each bar totals 100%; direct percentage labels and a fixed A–B–C order preserve the comparison when color is unavailable.
Figure 6. Two invented groups are shown as 100% stacked compositions. Each bar totals 100%; direct percentage labels and a fixed A–B–C order preserve the comparison when color is unavailable. Source: invented example data.
Figure data
Different parts, the same whole — Source: invented example data.
GroupA (%)B (%)C (%)
I453520
II302545

07 · Point estimates with ranges

Use intervals when a single estimate needs its defined range beside it. Define the range and its source before asking the reader to compare widths.

A point is not the whole story. Illustrative point estimates sit inside invented ranges. The ranges are visual examples only, not statistical confidence intervals, forecasts, or claims about measured uncertainty.
Figure 7. Illustrative point estimates sit inside invented ranges. The ranges are visual examples only, not statistical confidence intervals, forecasts, or claims about measured uncertainty. Source: invented example data.
Figure data
A point is not the whole story — Source: invented example data.
ScenarioLowEstimateHigh
A-214
B148
C-5-12
D369

08 · From question to note

Use the flow when a reader needs the making-of context. Keep each step concrete and finish with the source, units, scale, and uncertainty note.

From a question to a note. A four-step editorial flow keeps the chart attached to its purpose: Question → Data → Figure → Note. Each arrow is a prompt to preserve context, not a claim about a research method.
Figure 8. A four-step editorial flow keeps the chart attached to its purpose: Question → Data → Figure → Note. Each arrow is a prompt to preserve context, not a claim about a research method. Source: invented example data.
Figure data
From a question to a note — Source: invented example data.
StepStage
1Question
2Data
3Figure
4Note

09 · A note takes shape

Use a timeline to explain stages and their order.

A note takes shape. A conceptual timeline connecting a question, fieldwork, review, and publication. Equal spacing shows sequence, not elapsed time.
Figure 9. A conceptual timeline connecting a question, fieldwork, review, and publication. Equal spacing shows sequence, not elapsed time.

10 · From observations to an article

Use a layered diagram to show how a structure is assembled or how ideas build on one another.

From observations to an article. Observations support working notes, which support a published article. Layer size does not represent a quantity.
Figure 10. Observations support working notes, which support a published article. Layer size does not represent a quantity.

11 · Anatomy of a notebook

Use direct annotations to explain parts of an object or details within an illustration.

Anatomy of a notebook. A simple notebook illustration labels its binding, page, and bookmark. It is not a technical drawing to scale.
Figure 11. A simple notebook illustration labels its binding, page, and bookmark. It is not a technical drawing to scale.

Keep the whole note

Every figure has an interactive version and a matching PNG image, with its title, units, labels, and source note inside the image. The caption and underlying data also live in the article. Nothing essential depends on a hover, a canvas, or a running chart library.

Obsidian saves image links by default. To keep a local copy, run “Download attachments for current file” in Obsidian after clipping. The offline download below includes Markdown, all eleven images, SVG originals, and the chart data as CSV tables. Other read-it-later apps may handle images or formatting differently.

The visual style lives in the images, so it travels with them. The surrounding page font, spacing, and theme belong to the reading app. SVG is available for editing and print; PNG is the default for saving and sharing.

Obsidian’s capture guide

Download offline reading kitMarkdown only

A collection that can grow

These eight templates cover change, comparison, relationships, distributions, intensity, composition, ranges, and processes. Future additions can include small multiples, slope charts, timelines, maps, annotated photographs, and research diagrams. They should share the same typography, palette, numbering, and source treatment, while choosing the visual form that suits the question.

Leave a trail for the reader

The best figure on a notebook page is one that can be read quickly and questioned gently. A source note, unit, scale, and uncertainty cue are part of the drawing.

Keep the invented examples visibly illustrative, then replace them with documented values only when you have a source worth naming.