figmirror-code-aug10 / index.html
zcahjl3's picture
Deploy data-preserving FigMirror code augmentation 10-case page
6a6928b verified
Raw
History Blame Contribute Delete
12.9 kB
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>FigMirror Data-Preserving Code Augmentation 路 10 Cases</title><style>body{margin:0;font-family:Arial,sans-serif;background:#f5f6f8;color:#172033}header{padding:24px 32px;background:#fff;border-bottom:1px solid #d9dee7}main{padding:24px 32px 48px;display:grid;gap:18px}.card{background:#fff;border:1px solid #d9dee7;border-radius:8px;padding:14px}h1{margin:0 0 8px;font-size:26px}h2{margin:0 0 10px;font-size:15px}p{margin:8px 0;font-size:12px;color:#667085;line-height:1.45}a{color:#0b61a4;margin-right:12px;white-space:nowrap}img{width:100%;max-height:720px;object-fit:contain;display:block;background:#fff;border:1px solid #e5e7eb}.meta{color:#475467}.links{display:flex;flex-wrap:wrap;gap:6px 0}</style></head><body><header><h1>FigMirror Data-Preserving Code Augmentation 路 10 Cases</h1><p>Each case compares two code-generated images. The right-hand figure is not a new task: it keeps the original data, labels, chart type/topology, and analytical relation, then applies FigMirror presentation improvements.</p></header><main><article class="card"><h2>heatmap 路 Chart2Code_level2_contour_5_v5</h2><img src="01_heatmap_Chart2Code_level2_contour_5_v5/comparison.png" loading="lazy" alt="Original code render versus data-preserving FigMirror code augmentation"><p class="meta">Both sides are generated from code with a fixed random seed where needed. Left: unchanged <code>original.py</code>. Right: <code>augmented.py</code>, preserving the same data and chart topology while improving figure aesthetics.</p><p class="links"><a href="01_heatmap_Chart2Code_level2_contour_5_v5/original_render.png">original code render</a><a href="01_heatmap_Chart2Code_level2_contour_5_v5/original.py">original code</a><a href="01_heatmap_Chart2Code_level2_contour_5_v5/original.png">dataset/source image</a><a href="01_heatmap_Chart2Code_level2_contour_5_v5/augmented_render.png">augmented code render</a><a href="01_heatmap_Chart2Code_level2_contour_5_v5/augmented.py">augmented code</a><a href="01_heatmap_Chart2Code_level2_contour_5_v5/comparison.png">comparison image</a><a href="01_heatmap_Chart2Code_level2_contour_5_v5/process.md">process note</a></p></article><article class="card"><h2>network 路 Chart2Code_level2_combination_3_v1</h2><img src="02_network_Chart2Code_level2_combination_3_v1/comparison.png" loading="lazy" alt="Original code render versus data-preserving FigMirror code augmentation"><p class="meta">Both sides are generated from code with a fixed random seed where needed. Left: unchanged <code>original.py</code>. Right: <code>augmented.py</code>, preserving the same data and chart topology while improving figure aesthetics.</p><p class="links"><a href="02_network_Chart2Code_level2_combination_3_v1/original_render.png">original code render</a><a href="02_network_Chart2Code_level2_combination_3_v1/original.py">original code</a><a href="02_network_Chart2Code_level2_combination_3_v1/original.png">dataset/source image</a><a href="02_network_Chart2Code_level2_combination_3_v1/augmented_render.png">augmented code render</a><a href="02_network_Chart2Code_level2_combination_3_v1/augmented.py">augmented code</a><a href="02_network_Chart2Code_level2_combination_3_v1/comparison.png">comparison image</a><a href="02_network_Chart2Code_level2_combination_3_v1/process.md">process note</a></p></article><article class="card"><h2>surface3d 路 ChartNet-sample_2394253dc8502926</h2><img src="03_surface3d_ChartNet-sample_2394253dc8502926/comparison.png" loading="lazy" alt="Original code render versus data-preserving FigMirror code augmentation"><p class="meta">Both sides are generated from code with a fixed random seed where needed. Left: unchanged <code>original.py</code>. Right: <code>augmented.py</code>, preserving the same data and chart topology while improving figure aesthetics.</p><p class="links"><a href="03_surface3d_ChartNet-sample_2394253dc8502926/original_render.png">original code render</a><a href="03_surface3d_ChartNet-sample_2394253dc8502926/original.py">original code</a><a href="03_surface3d_ChartNet-sample_2394253dc8502926/original.png">dataset/source image</a><a href="03_surface3d_ChartNet-sample_2394253dc8502926/augmented_render.png">augmented code render</a><a href="03_surface3d_ChartNet-sample_2394253dc8502926/augmented.py">augmented code</a><a href="03_surface3d_ChartNet-sample_2394253dc8502926/comparison.png">comparison image</a><a href="03_surface3d_ChartNet-sample_2394253dc8502926/process.md">process note</a></p></article><article class="card"><h2>box 路 Chart2NCode_0e7b573addd14f83aad26cf57f08876f</h2><img src="04_box_Chart2NCode_0e7b573addd14f83aad26cf57f08876f/comparison.png" loading="lazy" alt="Original code render versus data-preserving FigMirror code augmentation"><p class="meta">Both sides are generated from code with a fixed random seed where needed. Left: unchanged <code>original.py</code>. Right: <code>augmented.py</code>, preserving the same data and chart topology while improving figure aesthetics.</p><p class="links"><a href="04_box_Chart2NCode_0e7b573addd14f83aad26cf57f08876f/original_render.png">original code render</a><a href="04_box_Chart2NCode_0e7b573addd14f83aad26cf57f08876f/original.py">original code</a><a href="04_box_Chart2NCode_0e7b573addd14f83aad26cf57f08876f/original.png">dataset/source image</a><a href="04_box_Chart2NCode_0e7b573addd14f83aad26cf57f08876f/augmented_render.png">augmented code render</a><a href="04_box_Chart2NCode_0e7b573addd14f83aad26cf57f08876f/augmented.py">augmented code</a><a href="04_box_Chart2NCode_0e7b573addd14f83aad26cf57f08876f/comparison.png">comparison image</a><a href="04_box_Chart2NCode_0e7b573addd14f83aad26cf57f08876f/process.md">process note</a></p></article><article class="card"><h2>contour 路 Chart2Code_level2_contour_25_v2</h2><img src="05_contour_Chart2Code_level2_contour_25_v2/comparison.png" loading="lazy" alt="Original code render versus data-preserving FigMirror code augmentation"><p class="meta">Both sides are generated from code with a fixed random seed where needed. Left: unchanged <code>original.py</code>. Right: <code>augmented.py</code>, preserving the same data and chart topology while improving figure aesthetics.</p><p class="links"><a href="05_contour_Chart2Code_level2_contour_25_v2/original_render.png">original code render</a><a href="05_contour_Chart2Code_level2_contour_25_v2/original.py">original code</a><a href="05_contour_Chart2Code_level2_contour_25_v2/original.png">dataset/source image</a><a href="05_contour_Chart2Code_level2_contour_25_v2/augmented_render.png">augmented code render</a><a href="05_contour_Chart2Code_level2_contour_25_v2/augmented.py">augmented code</a><a href="05_contour_Chart2Code_level2_contour_25_v2/comparison.png">comparison image</a><a href="05_contour_Chart2Code_level2_contour_25_v2/process.md">process note</a></p></article><article class="card"><h2>radar 路 Chart2NCode_c372e9e299c44a6fa0506a700b87f9db</h2><img src="06_radar_Chart2NCode_c372e9e299c44a6fa0506a700b87f9db/comparison.png" loading="lazy" alt="Original code render versus data-preserving FigMirror code augmentation"><p class="meta">Both sides are generated from code with a fixed random seed where needed. Left: unchanged <code>original.py</code>. Right: <code>augmented.py</code>, preserving the same data and chart topology while improving figure aesthetics.</p><p class="links"><a href="06_radar_Chart2NCode_c372e9e299c44a6fa0506a700b87f9db/original_render.png">original code render</a><a href="06_radar_Chart2NCode_c372e9e299c44a6fa0506a700b87f9db/original.py">original code</a><a href="06_radar_Chart2NCode_c372e9e299c44a6fa0506a700b87f9db/original.png">dataset/source image</a><a href="06_radar_Chart2NCode_c372e9e299c44a6fa0506a700b87f9db/augmented_render.png">augmented code render</a><a href="06_radar_Chart2NCode_c372e9e299c44a6fa0506a700b87f9db/augmented.py">augmented code</a><a href="06_radar_Chart2NCode_c372e9e299c44a6fa0506a700b87f9db/comparison.png">comparison image</a><a href="06_radar_Chart2NCode_c372e9e299c44a6fa0506a700b87f9db/process.md">process note</a></p></article><article class="card"><h2>violin 路 Chart2NCode_824d88ec85314c6ea8378d9e2e62e046</h2><img src="07_violin_Chart2NCode_824d88ec85314c6ea8378d9e2e62e046/comparison.png" loading="lazy" alt="Original code render versus data-preserving FigMirror code augmentation"><p class="meta">Both sides are generated from code with a fixed random seed where needed. Left: unchanged <code>original.py</code>. Right: <code>augmented.py</code>, preserving the same data and chart topology while improving figure aesthetics.</p><p class="links"><a href="07_violin_Chart2NCode_824d88ec85314c6ea8378d9e2e62e046/original_render.png">original code render</a><a href="07_violin_Chart2NCode_824d88ec85314c6ea8378d9e2e62e046/original.py">original code</a><a href="07_violin_Chart2NCode_824d88ec85314c6ea8378d9e2e62e046/original.png">dataset/source image</a><a href="07_violin_Chart2NCode_824d88ec85314c6ea8378d9e2e62e046/augmented_render.png">augmented code render</a><a href="07_violin_Chart2NCode_824d88ec85314c6ea8378d9e2e62e046/augmented.py">augmented code</a><a href="07_violin_Chart2NCode_824d88ec85314c6ea8378d9e2e62e046/comparison.png">comparison image</a><a href="07_violin_Chart2NCode_824d88ec85314c6ea8378d9e2e62e046/process.md">process note</a></p></article><article class="card"><h2>tilemap 路 ChartNet-sample_15e07f5f51b5f852</h2><img src="08_tilemap_ChartNet-sample_15e07f5f51b5f852/comparison.png" loading="lazy" alt="Original code render versus data-preserving FigMirror code augmentation"><p class="meta">Both sides are generated from code with a fixed random seed where needed. Left: unchanged <code>original.py</code>. Right: <code>augmented.py</code>, preserving the same data and chart topology while improving figure aesthetics.</p><p class="links"><a href="08_tilemap_ChartNet-sample_15e07f5f51b5f852/original_render.png">original code render</a><a href="08_tilemap_ChartNet-sample_15e07f5f51b5f852/original.py">original code</a><a href="08_tilemap_ChartNet-sample_15e07f5f51b5f852/original.png">dataset/source image</a><a href="08_tilemap_ChartNet-sample_15e07f5f51b5f852/augmented_render.png">augmented code render</a><a href="08_tilemap_ChartNet-sample_15e07f5f51b5f852/augmented.py">augmented code</a><a href="08_tilemap_ChartNet-sample_15e07f5f51b5f852/comparison.png">comparison image</a><a href="08_tilemap_ChartNet-sample_15e07f5f51b5f852/process.md">process note</a></p></article><article class="card"><h2>area 路 Chart2Code_level2_area_4_v5</h2><img src="09_area_Chart2Code_level2_area_4_v5/comparison.png" loading="lazy" alt="Original code render versus data-preserving FigMirror code augmentation"><p class="meta">Both sides are generated from code with a fixed random seed where needed. Left: unchanged <code>original.py</code>. Right: <code>augmented.py</code>, preserving the same data and chart topology while improving figure aesthetics.</p><p class="links"><a href="09_area_Chart2Code_level2_area_4_v5/original_render.png">original code render</a><a href="09_area_Chart2Code_level2_area_4_v5/original.py">original code</a><a href="09_area_Chart2Code_level2_area_4_v5/original.png">dataset/source image</a><a href="09_area_Chart2Code_level2_area_4_v5/augmented_render.png">augmented code render</a><a href="09_area_Chart2Code_level2_area_4_v5/augmented.py">augmented code</a><a href="09_area_Chart2Code_level2_area_4_v5/comparison.png">comparison image</a><a href="09_area_Chart2Code_level2_area_4_v5/process.md">process note</a></p></article><article class="card"><h2>bar 路 Chart2NCode_0855bef1c82c44309116cd241d54254c</h2><img src="10_bar_Chart2NCode_0855bef1c82c44309116cd241d54254c/comparison.png" loading="lazy" alt="Original code render versus data-preserving FigMirror code augmentation"><p class="meta">Both sides are generated from code with a fixed random seed where needed. Left: unchanged <code>original.py</code>. Right: <code>augmented.py</code>, preserving the same data and chart topology while improving figure aesthetics.</p><p class="links"><a href="10_bar_Chart2NCode_0855bef1c82c44309116cd241d54254c/original_render.png">original code render</a><a href="10_bar_Chart2NCode_0855bef1c82c44309116cd241d54254c/original.py">original code</a><a href="10_bar_Chart2NCode_0855bef1c82c44309116cd241d54254c/original.png">dataset/source image</a><a href="10_bar_Chart2NCode_0855bef1c82c44309116cd241d54254c/augmented_render.png">augmented code render</a><a href="10_bar_Chart2NCode_0855bef1c82c44309116cd241d54254c/augmented.py">augmented code</a><a href="10_bar_Chart2NCode_0855bef1c82c44309116cd241d54254c/comparison.png">comparison image</a><a href="10_bar_Chart2NCode_0855bef1c82c44309116cd241d54254c/process.md">process note</a></p></article></main></body></html>