projects/images

Image assets for the project write-ups in projects/. One subfolder per post.

Rules

  • Folder name = the slug used in the post’s image paths. A post at projects/<post>.qmd references its images as ![](images/<slug>/<subfolder>/<file>.png). Paths are relative to projects/, no leading slash.
  • Nothing in here is hand-edited. Every PNG is generated by a notebook in the project’s own repo and copied over. To change a plot, change the notebook, rerun it, and replace the files here.
  • The site uses the slate theme (page background #272b30). Plots keep the standard light look (gray panel, black points, dark blue lines) but every pure white surface is swapped for light gray, so the figure does not glare against the dark page. Do not use dark-theme plots (dark backgrounds with white points and lines); they were tried and rejected.
  • Each project folder has its own README listing the generating notebook, the files it produces, and which section of the post uses each one.

Workflow for a new project

  1. Finish the analysis in the project repo. Keep the default plots there for the notebooks and any PDF or LinkedIn use.
  2. Add a website.ipynb to the repo that re-renders only the plots the post uses, with the palette below, and writes them to <repo>/website-plots/<subfolder>/<file>.png. Plot functions can be copied into that notebook so the originals stay untouched.
  3. Create projects/images/<slug>/ here and copy the contents of website-plots/ into it. Keep the subfolder structure identical so future updates are a drag and drop replace.
  4. In the post’s .qmd, point every image at images/<slug>/.... Set the listing thumbnail with image: "../assets/images/projects/<name>.png" in the front matter.
  5. Add a README to the new folder (template below), then quarto render and check that every image appears. A wrong path renders as a broken image, not an error.

Website palette (reuse across projects)

Only the backgrounds change from the plotting defaults. Data colors stay as they are in the original plotting code.

Role Hex
Figure background (replaces white) #d6d9dd
Panel background #e4e6e9
Facet strips #c4c8cd
Grid lines #f4f5f6
Text #1f2328, subtitles #4a4f55
Data points black
Primary accent (fit, posterior) darkblue, ribbon steelblue
Secondary accent (prior, comparison) darkorange
Good / bad #2E8B57 / #B03A2E
Categorical set plotnine default hue palette

In plotnine: theme_gray() plus plot_background, panel_background, strip_background, panel_grid_major, text, axis_text, legend_background and legend_key set to the values above. Save with figure.savefig(path, dpi=300, facecolor=<figure background>). For graphviz DAGs, insert graph [bgcolor=<figure background>] and node [fillcolor=<strip color>] at the top of the DOT body; outlines, text and edges can stay graphviz’s default black. For matplotlib figures, pass facecolor=<figure background> to plt.subplots and savefig.

Per-project README template

# <slug>

Post: projects/<post>.qmd
Repo: <path or URL>
Generated by: <repo>/notebooks/website.ipynb -> <repo>/website-plots/
Inputs the notebook needs: <saved model files, CSVs, data>

| Subfolder | File | Section of the post |
|---|---|---|
| ... | ... | ... |

Notes:
- <anything that would trip up a rerun: memory limits, files that must exist first,
   numbers in the post that depend on these plots>

For an AI assistant reading this

If you are handed this file with a request to add or update a project’s images, the job is: confirm the slug and the generating notebook, regenerate with the palette above, copy into projects/images/<slug>/ keeping the subfolder tree, update that folder’s README table, and check every ![](images/<slug>/...) path in the post resolves. Do not edit PNGs directly, do not reintroduce pure white backgrounds, and do not switch to dark-theme plots.