app/src/content/chapters/vibe-coding-charts.mdx

import HtmlEmbed from '../../components/HtmlEmbed.astro';
import Note from '../../components/Note.astro';
import TrackioWrapper from '../../components/TrackioWrapper.astro';

## Vibe coding charts

<Note emoji="⚠️" variant="danger">This is a work in progress. It may change quickly.</Note>

### Prompt

This page explains how to use the directives to author D3 charts as self‑contained HTML fragments.
Using claude code works better.

The goal is to make **responsive**, **accessible**, **interactive** and **dark mode ready** charts.

1. Use this ref a a baseprompt: `app/src/content/embeds/vibe-code-d3-embeds-directives.md`.
2. Opt: use an already existing chart as a starting point.
3. Ask claude to code the chart. Here's a typical prompt:

```markdown
I want you to code a new d3 chart named `yourchart`.
I have one CSV file called `yourdata.csv` in the data folder.
The csv has the following columns: `x`, `y`, `z`.
I want you to code a d3 chart that visualizes the data.
```

4. Once the chart created, iterate with littles adjustments to make it better.
5. And that's it! 🎉

### Real‑world examples

They can be found in the `app/src/content/embeds` folder and you can also use them as a starting point or examples to vibe code with.

<HtmlEmbed
  title="d3-benchmark: LLM Benchmark"
  src="d3-benchmark.html" desc={`Figure 1: Grouped bar chart comparing model scores across benchmarks (MMLU, GSM8K, HellaSwag, TruthfulQA, ARC‑C). Each group is a benchmark; colors encode models; values are accuracy/score (higher is better).`}  />
---
  <HtmlEmbed
  src="d3-line.html"
  title="d3-line: Average Ranking of Models"
  desc='Figure 2: Average Ranking of Models trained with internally deduplicated / merged samples. No clear benefit in merging can be seen with respect to model performance.<br/> Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>'
  data="internal_deduplication.csv"
  config={{
    defaultMetric: ['average_rank']
  }}
/>
---
  <HtmlEmbed
    src="d3-neural-network.html"
    id="neural-network-mnist-like"
    title="d3-neural-network: MNIST-like Neural Network"
    desc={`Figure 3: Interactive MNIST-like neural network. Draw a digit on the left canvas; activations propagate through hidden layers (node size/opacity reflect activation). The right side displays class probabilities (0–9) with the top class emphasized.`}
  />
---
  <HtmlEmbed
    src="d3-matrix.html"
    title="d3-matrix: Baseline and Δ (Improved − Baseline)"
    frameless
    desc={`<p>
  Figure 4: Left: baseline matrix (row-normalized, sequential palette).
  Right: Δ (Improved − Baseline) in percentage points, using a diverging palette centered at 0 to highlight improvements vs degradations.
</p>`}
  />
---
  <HtmlEmbed title="d3-line-quad: Comparison across thresholds" frameless src="d3-line-quad.html" desc={"Figure 5: Comparison across thresholds for all four filters individually: Formatting, Relevance, Visual Dependency, and Image-Question Correspondence <br/> Credit: "+'<a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>'} />
---
<HtmlEmbed src="d3-bar.html" title="d3-bar: Memory usage with recomputation" desc={`Figure 6: Memory usage with recomputation.<br/>Credits: <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=activation_recomputation" target="_blank">Ultrascale playbook</a>`}/>
--- 
  <HtmlEmbed src="d3-pie.html" title="d3-pie: Pie charts by category" desc='Figure 7: Comparison across thresholds for all four filters individually: Formatting, Relevance, Visual Dependency, and Image-Question Correspondence <br/> Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>' /> 
--- 
  <HtmlEmbed src="d3-pie-quad.html" title="d3-pie-quad: Quad donuts by metric" align="center" frameless desc={'Quad view: Answer Tokens, Number of Samples, Number of Turns, Number of Images.'} />
---
<HtmlEmbed src="d3-scatter.html" title="d3-scatter: 2D projection by category" desc={`Figure 8: Dataset visualization via UMAP <br/> Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>`} frameless align="center" />

### Trackio redesign experiment
<TrackioWrapper />