Chart Prompts

Restyle my chart in the "Pictogram" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: a friendly isotype chart from an educational poster. Quantities are shown as rows of identical little icons that you can count, in flat colors on warm paper.

Colors (use these exact values):
- Paper: #F3ECDD.
- Ink: #1E2528 for the title, row labels, totals and ground lines.
- Icon colors: #3E8E5E (first category), #1F4E5A (second category). A third category, if needed: #D9774B.
- Muted text: #6E6A5E. Key divider: #CFC6B2.

Typography (Google Fonts): Jost.
- Title 27px 600. Subtitle 17px 400 in muted. Key labels 15px 500, and the unit statement ("Each icon = 1,000 trees") 15px 600. Row labels 15px 600 uppercase with 1.6px letter-spacing. Totals 19px 700. Source 13px 400.

Icons:
- Pick one simple, solid, flat silhouette that represents my data (people, cups, trees, cars, houses). Draw it in a 30 x 36 box and render it at 34 x 40 (scale 1.12), with no outlines, gradients or shading. If there are categories, give each its own silhouette and its own color so shape and color both encode it.
- Each icon stands for a round number of units (1, 10, 100, 1,000...). Choose the unit so the longest row has 10 to 14 icons.
- Remainders are shown by clipping the last icon from the right to the fractional width (0.5 = the left half of the icon). Only the final icon in a row may be partial; if a category boundary falls mid-icon, split that one icon into two colors with a clip instead of leaving a gap.

Layout:
- A 48 x 6px #3E8E5E bar top left above the title at a 56px margin, then title, subtitle and a key row: small key icons at 62% scale with their labels, a 1px #CFC6B2 vertical divider, then the unit statement.
- One row per category, 60px apart, sorted largest first. Row labels left-aligned at the margin; icons start 140px in, spaced 42px apart.

Axes and grid:
- No axes, gridlines or scale numbers: the icons are the scale. Each row stands on a 1.5px ink ground line running from 4px before its first icon to 4px past its last. Print the row's exact total in 19px 700 ink, 18px after the ground line.

Marks:
- Bar chart: horizontal rows of icons as above; for vertical bars, stack the icons in columns with the same spacing and the total above each column.
- Line chart: plot each point as a small column of icons (one icon per unit), connected by a 2px ink line through the tops of the columns, so the line still reads while the icons carry the counting.

Avoid: 3D, gradients, drop shadows, outlines, more than three colors, varying icon sizes to show quantity (size never encodes value here, only count does), and partial icons anywhere except the end of a row.

When you're done, render the chart and check that you can count the icons to recover each total, the key clearly states what one icon equals, partial icons are clipped at the right fraction, and every total matches the data.