An exploration of top riders on some of the most famous Bay Area road climbs. Data extracted from Strava. The coordinates are various metrics you may consider ranking riders by, for example:
and so on.
When comparing riders in this asynchronous way, it's not obvious what the best indicator of a great rider is. Using parallel coordinates, we can get an idea of how these various metrics are related.
A complete key of metrics is here:
Rider Id: "id",
Rider Name: "name",
Segments Group: "group",
Number of Segments Completed: "# segments",
Performance Percentage Sum: "KOM%",
Fiets Weighted Performance Percentage Sum: "F* KOM%",
Climb Category Performance Percentage Sum: "CC* KOM%",
Performance Percentage Sum with Median Baseline: "KOM% / Med",
Fiets Weighted Performance Percentage Sum with Median Baseline: "F* KOM% / Med",
Climb Category Weighted Performance Percentage Sum with Median Baseline: "CC* KOM% / Med",
Top 3 Performance Percentage Sum: "KOM% %3",
Top 5 Performance Percentage Sum: "KOM% %5",
Top 10 Performance Percentage Sum: "KOM% %10",
Top 3 Fiets Weighted Performance Percentage Sum: "F* KOM% %3",
Top 5 Fiets Weighted Performance Percentage Sum: "F* KOM% %5",
Top 10 Fiets Weighted Performance Percentage Sum: "F* KOM% %10"
Forked from syntagmatic's block: Nutrient Parallel Coordinates
xxxxxxxxxx
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Bay Area Climb Effort Explorer</title>
<link rel="stylesheet" type="text/css" href="parallel.css" />
</head>
<body>
<div id="header">
<h1>Bay Area Climb Effort Explorer</h1>
<button title="Zoom in on selected data" id="keep-data" disabled="disabled">Keep</button>
<button title="Remove selected data" id="exclude-data" disabled="disabled">Exclude</button>
<button title="Export data as CSV" id="export-data">Export</button>
<div class="controls">
<strong id="rendered-count"></strong>/<strong id="selected-count"></strong><!--<strong id="data-count"></strong>-->
<div class="fillbar"><div id="selected-bar"><div id="rendered-bar"> </div></div></div>
Lines at <strong id="opacity"></strong> opacity.
<span class="settings">
<button id="hide-ticks">Hide Ticks</button>
<button id="show-ticks" disabled="disabled">Show Ticks</button>
<button id="dark-theme">Dark</button>
<button id="light-theme" disabled="disabled">Light</button>
</span>
</div>
<div style="clear:both;"></div>
</div>
<div id="chart">
<canvas id="background"></canvas>
<canvas id="foreground"></canvas>
<canvas id="highlight"></canvas>
<svg></svg>
</div>
<div id="wrap">
<div class="third" id="controls">
<div class="bright">
<h3>What is this?</h3>
<p>
A multidimensional explorer of Strava user's efforts on the hardest Bay Area climbs.
</p>
<p>
The parallel coordinates compares various metrics for ranking riders based on a collection of strava climbs. This is intended to help see relationships in a variety of different metrics.
</p>
<p>
<a href="https://eagereyes.org/techniques/parallel-coordinate">Never heard of parallel coordinates? Read this tutorial.</a>
</p>
<p>
<a href="https://eagereyes.org/techniques/parallel-coordinates#brushing">Brush</a> the visualization to update other charts on this page.
</p>
</div>
<div class="little-box">
<h3>Controls</h3>
<p>
<strong>Brush</strong>: Drag vertically along an axis.<br/>
<strong>Remove Brush</strong>: Tap the axis background.<br/>
<strong>Reorder Axes</strong>: Drag a label horizontally.<br/>
<strong>Invert Axis</strong>: Tap an axis label.<br/>
<strong>Remove Axis</strong>: Drag axis label to the left edge.<br/>
</p>
</div>
<div class="little-box">
<h3>Credits & License</h3>
<p>
Adapted from examples by<br/>
<a href="https://bl.ocks.org/1341021">Mike Bostock</a> and <a href="https://bl.ocks.org/1341281">Jason Davies</a><br/>
</p>
<p>
Data Collection and Analysis, 2018, Bryan Bischof
Visualization Created; 2012, Kai Chang<br/>
All rights reserved. Released under the <a href="https://opensource.org/licenses/bsd-3-clause">BSD License</a>.
</p>
</p>
</div>
</div>
<div class="third">
<small>
<!--Last rendered <strong id="render-speed"></strong> lines-->
</small>
<h3># of Segments Completed</h3>
<p id="legend">
</p>
</div>
<div class="third">
<h3>Sample of 25 entries <input type="text" id="search" placeholder="Search Riders..."></input></h3>
<p id="rider-list">
</p>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<script src="parallel.js"></script>
</html>
Modified http://mbostock.github.com/d3/d3.v2.js to a secure url
Modified http://underscorejs.org/underscore.js to a secure url
https://mbostock.github.com/d3/d3.v2.js
https://underscorejs.org/underscore.js