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

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

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

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

Passes legend

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

• Livigno

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.