Add the bump height against width figures of Germany and Italy

index.html

@@ -23,6 +23,10 @@ a.card:hover{border-color:var(--acc)}
 a.card b{color:var(--acc)}
 a.card small{display:block;color:var(--mut);margin-top:4px}
 a{color:var(--acc)}
+.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin:0 0 16px}
+.figs figure{margin:0}
+.figs img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px}
+.figs figcaption{color:var(--mut);font-size:.9rem;margin-top:6px;text-align:center}
 .foot{color:var(--mut);font-size:.9rem;margin-top:40px}
 </style>
 </head>
@@ -37,6 +41,12 @@ a{color:var(--acc)}
 <li><b>An open source software stack for the slowdown-depth decision:</b> a half-car simulator with nonlinear suspension, a Gymnasium environment, an acados MPC, a PPO policy and ISO 2631-1 comfort scoring.</li>
 <li><b>The CALM dataset:</b> 159 real bump crossings from <a href="https://huggingface.co/CARD-Data">CARD</a> (114 Germany, 45 Italy; 105 usable), an extended real-time dataset for comfort.</li>
 </ul>
+<h2>The crossings</h2>
+<p>Height and width of the bumps in the recorded crossings, one color per area. The dotted and dashed lines mark equal severity, the height divided by the width.</p>
+<div class="figs">
+<figure><img src="stats/height_vs_width_germany.svg" alt="Bump height against bump width for the German crossings, by area"><figcaption>Germany</figcaption></figure>
+<figure><img src="stats/height_vs_width_italy.svg" alt="Bump height against bump width for the Italian crossings, by area"><figcaption>Italy</figcaption></figure>
+</div>
 <h2>Models and data</h2>
 <div class="grid">
 <a class="card" href="https://huggingface.co/CALM-Dataset/CALM-PPO"><b>CALM-PPO</b><small>The trained speed recommender, with its five training runs.</small></a>