# Tool Usage Chart - Claude Code DevTools

Load Claude Code Transcript (JSONL) Choose File

## Tool Usage Analysis

0
Total Tool Calls
0
Unique Tools Used
-
Most Used Tool
📊

### No Data Loaded

Upload a Claude Code transcript or load sample data to see tool usage visualization

## About This Tool

### 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.