Skip to content

Commit 2a88c32

Browse files
committed
Add SVG chart renderer for posters, dynamic palette loading, per-bar colors, axis labels, and updated gallery
- Add chart_renderer.py: matplotlib-based SVG renderer for poster charts (bar, line, scatter, pie, doughnut, radar) - Replace emoji figures in sample poster with real SVG charts - Add dynamic palette loading: matplotlib colormaps and seaborn palettes sampled to exact n_colors - Single-dataset bar charts now show per-bar colors from palette - Add xlabel/ylabel axis label support to chart blocks - Caption uses Chart.js subtitle plugin (fullSize: true) for full-width centering - Font hierarchy: tick labels 18px, axis titles 20px, captions 22px - Add viridis palette example slide and screenshot to gallery - Update all chart and poster screenshots - 18 new tests in test_chart_renderer.py, 11 new tests in test_preprocessor.py (365 total)
1 parent 56f62ec commit 2a88c32

20 files changed

+738
-67
lines changed

README.md

Lines changed: 87 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ Compile Markdown files into beautiful CDL-themed [Marp](https://marp.app/) prese
3232
|:---------:|:--------------:|:-----------:|
3333
| ![Pie](https://raw.githubusercontent.com/ContextLab/cdl-slides/main/docs/screenshots/chart-05-pie.png) | ![Doughnut](https://raw.githubusercontent.com/ContextLab/cdl-slides/main/docs/screenshots/chart-06-doughnut.png) | ![Radar](https://raw.githubusercontent.com/ContextLab/cdl-slides/main/docs/screenshots/chart-08-radar.png) |
3434

35-
| Scatter Plot | Academic Poster |
36-
|:------------:|:---------------:|
37-
| ![Scatter](https://raw.githubusercontent.com/ContextLab/cdl-slides/main/docs/screenshots/chart-07-scatter.png) | ![Poster](https://raw.githubusercontent.com/ContextLab/cdl-slides/main/docs/screenshots/poster-sample.png) |
35+
| Scatter Plot | Viridis Palette | Academic Poster |
36+
|:------------:|:---------------:|:---------------:|
37+
| ![Scatter](https://raw.githubusercontent.com/ContextLab/cdl-slides/main/docs/screenshots/chart-07-scatter.png) | ![Viridis](https://raw.githubusercontent.com/ContextLab/cdl-slides/main/docs/screenshots/chart-09-viridis.png) | ![Poster](https://raw.githubusercontent.com/ContextLab/cdl-slides/main/docs/screenshots/poster-sample.png) |
3838

3939
## Table of contents
4040

@@ -560,14 +560,89 @@ For grouped bars, use multiple datasets with `type: bar`.
560560
| `labels` || Comma-separated axis labels |
561561
| `data` || Comma-separated values (single dataset) |
562562
| `datasets` || Multiple datasets (see multi-dataset example) |
563-
| `palette` | `cdl` | Color palette name |
563+
| `palette` | `cdl` | Color palette name (see palettes below) |
564564
| `alpha` | `0.5` | Fill opacity (0.0–1.0) |
565-
| `caption` || Caption text below the chart |
565+
| `caption` || Caption text centered below the chart |
566+
| `xlabel` || X-axis label |
567+
| `ylabel` || Y-axis label |
566568
| `width` | `85%` | Chart container width |
567569
| `height` | `350px` | Chart container height |
568570

571+
**Axis labels example:**
572+
573+
````markdown
574+
```chart
575+
type: bar
576+
labels: Conv1, Conv2, Pool1, FC1, Output
577+
data: 0.82, 0.91, 0.45, 0.93, 0.56
578+
palette: viridis
579+
xlabel: Network layer
580+
ylabel: Mean activation
581+
caption: Average activations by layer
582+
```
583+
````
584+
585+
**Scatter plot example:**
586+
587+
````markdown
588+
```chart
589+
type: scatter
590+
datasets:
591+
- label: Transformer models
592+
data: 1.5 78, 7 85, 13 87, 52 91, 70 90
593+
- label: RNN baselines
594+
data: 0.5 62, 2 68, 5 72, 10 74
595+
xlabel: Parameters (B)
596+
ylabel: Accuracy (%)
597+
caption: Model size vs. benchmark accuracy
598+
```
599+
````
600+
601+
Scatter data uses `x y` pairs separated by commas (e.g., `1.5 78, 7 85`).
602+
603+
**Radar chart example:**
604+
605+
````markdown
606+
```chart
607+
type: radar
608+
labels: Reasoning, Coding, Math, Writing, Analysis
609+
datasets:
610+
- label: Model A
611+
data: 95, 92, 90, 93, 91
612+
- label: Model B
613+
data: 78, 82, 75, 80, 76
614+
caption: Capability comparison
615+
```
616+
````
617+
618+
Radar charts automatically render smaller datasets on top of larger ones for maximum visibility.
619+
620+
**Pie and doughnut chart examples:**
621+
622+
````markdown
623+
```chart
624+
type: pie
625+
labels: Federal, Industry, Foundation, University
626+
data: 45, 25, 18, 12
627+
caption: Funding sources
628+
```
629+
````
630+
631+
````markdown
632+
```chart
633+
type: doughnut
634+
labels: Research, Teaching, Service, Admin
635+
data: 40, 25, 20, 15
636+
caption: Faculty time distribution
637+
```
638+
````
639+
640+
Pie and doughnut charts display legends automatically.
641+
569642
**Available palettes:**
570643

644+
14 built-in palettes are available:
645+
571646
| Palette | Description |
572647
|---------|-------------|
573648
| `cdl` | CDL/Dartmouth brand colors (default) |
@@ -585,7 +660,13 @@ For grouped bars, use multiple datasets with `type: bar`.
585660
| `Set3` | ColorBrewer Set3 |
586661
| `Paired` | ColorBrewer Paired |
587662

588-
Charts also work inside poster sections — just use the same ```` ```chart ```` syntax in your poster markdown.
663+
In addition to the built-in palettes, you can use **any matplotlib colormap** or **seaborn palette** by name. Colors are sampled automatically based on the number of chart elements (datasets for multi-dataset charts, labels for single-dataset bar/pie/doughnut charts).
664+
665+
**Matplotlib colormaps:** `viridis`, `plasma`, `inferno`, `magma`, `cividis`, `twilight`, `coolwarm`, `Spectral`, `RdYlBu`, `RdYlGn`, and [all others](https://matplotlib.org/stable/gallery/color/colormap_reference.html).
666+
667+
**Seaborn palettes:** `husl`, `hls`, `rocket`, `mako`, `flare`, `crest`, and [all others](https://seaborn.pydata.org/tutorial/color_palettes.html).
668+
669+
Charts also work inside poster sections — just use the same ```` ```chart ```` syntax in your poster markdown. In posters, charts are rendered as scalable vector graphics (SVG) using matplotlib for optimal print quality.
589670

590671
### Code Blocks
591672

2.24 KB
Loading

docs/screenshots/chart-02-bar.png

456 Bytes
Loading

docs/screenshots/chart-03-line.png

185 Bytes
Loading
-87 Bytes
Loading

docs/screenshots/chart-05-pie.png

-1.64 KB
Loading
-983 Bytes
Loading
-2.33 KB
Loading
-2.88 KB
Loading
159 KB
Loading

0 commit comments

Comments
 (0)