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:

Collects ~50–200 items via web search
Scores each item using an LLM with a custom rubric
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:

| Variable | Description | Default | |----------|-------------|---------| | NUM_ITEMS | How many items to collect (capped at ~200) | 100 | | COLOR_LOW | Color for low scores | #1a5f2a (dark green) | | COLOR_HIGH | Color for high scores | #c41e3a (crimson) | | SCORE_PROMPT | The LLM scoring rubric | (see above) |

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.