Ski statistics visualization components
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
docs/assets
src
.editorconfig
.gitattributes
.gitignore
.jshintrc
Gruntfile.js
LICENSE.txt
README.md
bower.json
package.json

README.md

skistats.js

Ski statistics visualization

See the project homepage and demo.

About

This is a JavaScript library for visualizing raw ski stats. It is based on D3.js and Raphael and provides data visualization components for displaying individual or collective lift run statistics.

The main components it exposes:

Map

Alt text

The Map component is used to display map of a ski resort, with interactive SVG elements of the ski lifts and can display the participants riding a lift at a given time. The map component can be used standalone, to provide users an interactive display of a resort map. If used with the timeline can provide even richer experience showing participants riding a lift at the current time.

Timeline

Alt text

The Timeline component displays all registered lift runs. It is used to show a timeline of all entries with timeblock representing the participants riding different lifts. Supports zooming and panning, for digging in greater detail.

Can be used standalone. If used with the map can provide even richer experience showing participants riding a lift at the current time.

Lift legend

Alt text

Shows a legend of the ski lifts - color and display name. Useful to be used with the map and/or timeline

Passes legend

Alt text

Shows a legend of the ski passes - color of the ski pass and display name. The display name is editable. When changed, the name will also be applied on the timeline and map.

Installation

Using Bower:

bower install skistats

Or grab the source (minified).

Supported resorts

Every resort is represented by a "strategy". You can read more about the strategies here. Currently there is a strategy only for

If you want to see more resorts, you can help by:

  1. Openning a new issue and specifying which resort you want to see visualizations for. Please also provide the stats you have for your ski pass, so that it is easier for us to see what is provided and what we can use.
  2. Creating a new strategy. Instructions on how to create a new strategy can be found here

Usage

To include skistats.js

<script type="text/javascript" src="/skistats/skistats.js"></script>

To include a preffered strategy

<script type="text/javascript" src="/skistats/strategies/livigno-strategy.js"></script>

or to include all available strategies

<script type="text/javascript" src="/skistats/strategies/all.js"></script>

To initialize the main skistats components and add them inside the respectful containers:

skistats.map('.map');
skistats.liftLegend('.lifts');
skistats.passLegend('.passes');
skistats.timeline('.timeline', viewport, margin);

For a real demo example, check the source demo/index.html and see it live here

Contributing

skistats.js is still in early development. It does not support many resorts, does not have many features and may have issues.

It will be great if you can help us improve it. You can do it in the following ways:

  • Fork and contribute to the main skistats.js library
  • Report issues and feature requests
  • Open a new issue and specify which resort you want to see visualizations for. Please also provide the stats you have for your ski pass, in order to
  • Contribute by creating a new strategy, to introduce support for new resort. Instructions on how to create a new strategy can be found here

License

MIT. See LICENSE.txt in this directory.