Web Components
for Rock Climbing Guides
Conveying rock climbing data isn't simple.
Good visualizations and tools can help
[tools].
All code is available under the MIT license.
These aren't exclusively Web Components[why not?]. They are, however, built for the web and dependency-free. Each lives in a single file, has no dependencies, and can be copied directly into your project[use].
Climb Steepness
How steep is a climb? How does it change across the duration of the climb? How does it compare to the nearby climbs?
There are a handful of visualizations below because there's not a good one-size-fits-all approach.
The importance of steepness varies depending on the climbing destination. Yosemite's sweeping walls mean that steepness is often less important than aspects of a climb like climb length and climbing style (crack, corner, texture). on the other side of the continent the Red River Gorge in Kentucky, overall-steepness is everything, and at the New River Gorge, frequent changes in steepness can make two climbs of the same grade feel very different.
The components below are various visualizations (and an input) for climb steepness.
Steepness Dial
Reflects the exact steepness as a climb progresses. It's abstract enough to compare a few climbs and literal enough to give a concrete understanding of a particular climb. [intro]
- climb-steepness-dial.js is a self-contained class
Steepness Flagpole
this simple, versatile visualization is particularly well fit to highlighting relative differences between climbs [intro]
- climb-steepness-flagpole.js is a simple class
Steepness Icon
Simple, familiar, and easily styled. The main drawback is that it conveys only limited information. [intro]
-
climb-steepness-icon-element.js
this is a web component, adding a tag for
<climb-steepness-icon> - climb-steepness-icon.js a simple class implementation of the climb steepness icon
Steepness Input
is simple and familiar (though a bit limited) and [intro]
Climb Style/Discipline
Boulder, Trad, Sport, Free-Solo, Aid, Deep-Water-Solo?
Climb Duration
In human-friendly units, how longs is a climb?
- 2 moves (
2mv) - 8 (human|body) lengths (
8hu) - 3 pitches (
3p)
Climb Sections
Describe changes across the length of a Climb
Bars
- climb-sections-bars.js is a straightforward option,
Input
A simple input that reflects the underlying data
- climb-sections-input.js transparent data-entry packages as a single class
Photo Overlay
Draw useful climbing info on photos
Climb and Area Layers (CAL)
This is the a lightweight feature set that covers the basics. Show (clickable!) climbs and areas on images with support for editing. [intro]
- photo-overlay-static-svg.js one concise function to decorate an image with layers
- photo-overlay-extensible-svg.js a flexible class that can be extended to support your needs
- photo-overlay-editor.js view (and edit!) climb and area layers on a photo
Grades
Addressing grades comprehensively is beyond the scope of a simple web component.
A simple, workable solution is to create a select
element with all the grades you want available as options.
A more robust solution is available in this separate project
There are also alternatives of varying quality.