Analyze your climbing performance with this free MoonBoard problem grade distribution chart tool. Visualize boulder difficulty, total counts, and averages easily.
AI Generation Prompt
MoonBoard Climbing Problem Grade Distribution Analyzer
Overview
This single-file application is a specialized performance utility designed for bouldering enthusiasts who utilize the MoonBoard. It allows users to parse climbing datasets (CSV/JSON) and visualize the grade distribution of their projects or completed sends. The app prioritizes speed, privacy, and visual clarity, operating entirely client-side.
Core Features
- Drag-and-Drop File Import: Intuitive file selection zone for CSV and JSON files.
- Dynamic Visualization: Uses Chart.js to render a sleek, interactive bar chart showing the frequency of problems at each V-grade.
- Aggregated Statistics: Automatically calculates total problems, average grade, hardest sent grade, and the "peak" of the bell curve.
- Data Mapping Interface: A UI step that allows users to map their specific file headers to the application’s required data points (e.g., matching a "difficulty" column to the grade logic).
- Responsive UI: Adjusts layouts for desktop, tablet, and mobile usage.
- Privacy-First Architecture: Zero server communication, zero storage (no cookies/localStorage), all state is volatile and cleared on refresh.
UI Layout
- Header: Clean title and a brief "How to use" instruction snippet.
- Main Tool Area: A prominent upload card. Once data is processed, this section transforms into a dashboard layout.
- Dashboard Components:
- Stats Panel: A horizontal row of cards highlighting top-level metrics (e.g., "Total Problems: 142").
- Chart Section: A large, centered container for the Chart.js canvas.
- Data Controls: Simple toggles for chart types (Bar vs. Pie) and an "Export to Image" feature for sharing progress.
Design System & Aesthetics
- Palette: Clean aesthetic focusing on light-mode.
- Primary: Energetic Blue (
#007AFF) for data bars. - Backgrounds: Off-white (
#F9FAFB) with crisp white surfaces (#FFFFFF). - Text: Dark Slate (
#1F2937) for high readability. - Accents: Soft grays (
#E5E7EB) for borders and subtle shadows for cards.
- Primary: Energetic Blue (
- Animations: Subtle fade-ins for metrics; smooth transitions on chart re-renders using Chart.js built-in animations.
Technical Directives for Developer
- Single File Architecture: Bundle all CSS, HTML, and Vanilla JavaScript into one
.htmlfile. Embed external CDNs for Chart.js, Tailwind CSS (via CDN), and Lucide Icons. - Sandboxed Constraints:
- DO NOT use
localStorage,sessionStorage, orcookies. - Use
FileReaderAPI for parsing uploaded files. - State must be held in a JS object (e.g.,
let appState = { data: [] };).
- DO NOT use
- Performance: Ensure the parser is non-blocking. If processing large datasets, use simple
asynclogic to keep the UI responsive. - Responsive Design: Utilize Tailwind’s utility classes (
grid-cols-1,md:grid-cols-2,p-4, etc.) to ensure the chart is legible on a 375px mobile screen.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is this MoonBoard grade distribution chart tool?
This is a specialized, web-based utility designed for climbers to visualize the difficulty breakdown of their MoonBoard problem datasets. By uploading a standard CSV or JSON file containing your climbing history or a specific problem set, the tool automatically aggregates the difficulty grades and generates an interactive, professional-grade chart. It is built as a lightweight, single-file application that runs entirely in your browser. This ensures that your climbing data is never uploaded to a server or stored in a database, providing complete privacy while you analyze your performance metrics.
How does the application handle data privacy and storage?
This application operates with a 'client-side only' architecture. When you upload a file, the data is processed directly within your browser's memory. The application does not utilize cookies, local storage, or server-side databases, meaning no data is saved between sessions or transmitted to third-party services. Because the application is designed to run in sandboxed environments, all calculations and visualizations are ephemeral. Once you refresh the page or close your browser tab, all uploaded data is immediately purged from memory, ensuring complete data security for sensitive training statistics.
Which file formats can I upload for analysis?
The tool supports standardized CSV and JSON file formats, which are the common output types for most climbing tracking apps and MoonBoard database exports. The parser expects a clear column header for 'grade' or 'difficulty' to categorize the entries effectively into your chart. If your file uses non-standard naming conventions, the application includes a simple configuration mapping step to ensure the data is read correctly. This flexibility allows users to visualize diverse datasets, whether they are tracking personal sends or analyzing the distribution of specific gym board sets.
Is this tool mobile-friendly and responsive?
Yes, the application is built with a responsive-first design philosophy using modern CSS frameworks to ensure that it functions seamlessly on smartphones, tablets, and desktop computers. The charts are dynamically scaled to fit the width of your device, ensuring legibility regardless of screen size. The UI is designed to be touch-friendly, featuring intuitive controls for file uploads and chart interaction. You can easily view your distribution analytics while at the climbing gym, provided you have a mobile browser, making it a highly practical tool for tracking progress in real-time.
