Topic Treemap Generator

Generate interactive, dark-themed squarified treemap visualizations for any topic — movies, sports, technologies, companies, anything with a measurable dimension. Given a theme and a scoring axis, the skill:

1. Collects ~50–200 items via web search
2. Scores each item using an LLM with a custom rubric
3. Generates a standalone HTML file with hover tooltips, color gradients, and category grouping

Inspired by karpathy/jobs.

When to use

• Exploring rankings/top-lists visually (e.g., "top 100 movies by box office")
• Comparing items by a metric (e.g., "programming languages by GitHub stars")
• Creating shareable interactive visualizations for reports, blogs, or presentations

Input you provide

When you invoke the skill, specify:

Topic: [what to visualize — e.g., "2024 highest-grossing films", "NBA players 2024"]
Scoring dimension: [what metric to color by — e.g., "popularity", "skill rating", "revenue", "difficulty"]
Category field: [optional — how to group tiles, e.g., "genre", "conference", "league"]

Minimum: just the topic. Everything else has smart defaults.

Output

A single .html file saved to your specified path, e.g. ~/treemap-movies.html. Open it in any browser — no server needed.

How the skill works internally

Step 1 — Data Collection

The skill uses web search to find structured lists for the topic. It collects:

• name — item title
• category — optional grouping field
• value — numeric size (e.g., revenue, stars, rating)
• description — short text for LLM scoring

Typical sources: Wikipedia lists, GitHub trending, Box Office Mojo, Steam charts, etc.

Step 2 — LLM Scoring

For each collected item, the skill sends the description to the LLM with a scoring rubric you define. The LLM returns:

{"score": 7.5, "rationale": "This film's massive budget and director prestige drove high box office returns."}

The scoring prompt is customizable per topic. Default rubric: normalized 0–10 scale.

Step 3 — HTML Generation

The final HTML contains:

• Squarified treemap layout (same algorithm as karpathy/jobs)
• Dark theme (#0a0a0f background)
• Color gradient — green-to-red or custom, normalized per distribution
• Hover tooltips — name, score, value, rationale
• Category grouping — items grouped into parent rectangles by category
• Responsive — fills container width, 4:3 aspect ratio

Example scoring rubrics

Popularity / Revenue

Rate overall popularity or commercial success on a scale of 0–10.
Consider: sales, views, downloads, box office, market presence.

Skill / Performance

Rate the skill level or performance rating on a scale of 0–10.
Consider: competitive rankings, expert assessments, objective metrics.

Difficulty / Complexity

Rate how difficult this is to master on a scale of 0–10.
Consider: learning curve, prerequisites, complexity of concepts.

Risk / Volatility

Rate the risk level on a scale of 0–10.
Consider: volatility, failure rate, market uncertainty.

Customization

To customize, edit these variables in the skill script:

Generated HTML features

• Squarified treemap — optimal rectangle aspect ratios, no wasted space
• Category nesting — top-level rectangles grouped by category, items nested inside
• Color modes — score-based coloring, with contrast-boosted gradient
• Hover tooltips — score, value, category, LLM rationale
• Canvas rendering — HiDPI/Retina support via devicePixelRatio
• Zero dependencies — pure vanilla JS, single HTML file
• Dark theme — #0a0a0f background, white labels, subtle gaps

Files

topic-treemap/
├── SKILL.md           — This file
└── generate.py        — Optional: batch script for repeated generation

Tips

• Topic specificity matters: "2024 movies" → broad. "2024 highest-grossing films worldwide" → specific and produces better data.
• Scoring dimension: Choose something with a clear scale. "Goodness" is vague; "revenue" or "skill rating" works better.
• Category grouping: If your topic has natural groups (genre, league, language), specify them — the treemap groups items hierarchically.
• Data quality: If web search returns few results, try a more specific topic variant.