Tool Usage Chart

Purpose

This tool analyzes Claude Code transcripts and visualizes which tools were used and how frequently. It helps developers understand their coding patterns, identify frequently used tools, and gain insights into their workflow efficiency.

Features

• Parse JSONL transcript files to extract tool usage data
• Interactive horizontal bar chart with hover tooltips
• Responsive SVG visualization that scales perfectly to any screen size
• Statistics summary showing total calls, unique tools, and most used tool
• Sample data included for immediate exploration
• Dark theme optimized for developer workflows
• Tool usage sorted by frequency with percentage calculations

Web Research Integration

Source: MDN SVG Tutorial

Techniques Applied:

• viewBox attribute for responsive scaling - The chart uses viewBox="0 0 1000 600" with preserveAspectRatio to create a perfectly scalable visualization that maintains proportions across all screen sizes
• SVG rect elements for bar charts - Each tool's usage is represented by a dynamically sized rectangle element with smooth transitions and hover effects
• SVG text elements with positioning - Labels, values, and percentages are positioned using SVG text elements with precise x/y coordinates for optimal readability
• CSS styling of SVG elements - Applied CSS transitions, hover effects, and theming to SVG elements for a polished, interactive experience

Usage

1. Click "Choose File" and select a Claude Code transcript file (JSONL format), or click "Load Sample Data" to see an example
2. The tool will parse the transcript and extract all tool calls from assistant messages
3. View the statistics summary showing total calls, unique tools, and the most frequently used tool
4. Examine the horizontal bar chart showing each tool's usage frequency
5. Hover over any bar to see detailed information including tool name, count, and percentage
6. The chart automatically scales to fit your screen while maintaining perfect proportions

Technical Details

The tool uses the File API to read transcript files, parses JSONL line-by-line, and extracts tool names from message content blocks. The SVG chart is dynamically generated using DOM manipulation, with each bar's width calculated proportionally to the maximum usage count. The viewBox technique ensures the chart remains crisp and perfectly scaled on any display resolution.