Інтерактивна таблиця результатів

Дивлячись на таблицю результатів футбольного сезону, я часто задаюся запитаннями:

  • Лідирувала команда з початку сезону або здійснила героїчний ривок в кінці?
  • Як зимове трансферне вікно вплинуло на результати?
  • Догравали чи сезон команди в середині таблиці або грали в повну силу?
Статична таблиця не дає відповідей.

Пошуки вдалою візуалізації сезону на просторах інтернету закінчилися безуспішно, тому я почав експериментувати сам.

Графіки або швидко втрачали читаність із зростанням кількістю команд, або вимагали нетривіальною концентрації при першому контакті. В результаті, все закінчилося тим, з чого почалося — таблицею. Точніше, скриптом, який перетворює результати сезону в інтерактивну таблицю. Можна подивитися результати після кожного туру або просто натиснути на replay і спостерігати, як команди плавають вгору і вниз по таблиці:

image
Жива демонстрація

Вхідні дані
Знайти результати будь-якого хоч скільки-небудь популярного чемпіонату не проблема, спасибі величезною букмекерської індустрії. Для демонстрації я візьму результати матчів англійської Прем'єр-ліги на Football Data:
Date Home Team Score Away Team Score
August 8, 2015 Bournemouth 0 Aston Villa 1
August 8, 2015 Chelsea 2 Swansea 2
August 8, 2015 Everton 2 Watford 2
... ... ... ... ...
Скрипт парсити csv-файл, перетворює дані в зручні для подання javascript-об'єкти і додає додаткову інформацію, наприклад, кількість перемог, нічий і поразок після кожного туру.

Використання
  1. Підключаємо стилі
    head
    :

    <link rel="stylesheet" type="text/css" href="cdn.jsdelivr.net/replay-table/latest/replay-table.css">

  2. Додаємо скрипт в кінець
    body
    :

    <script type="text/javascript" src="//cdn.jsdelivr.net/replay-table/latest/replay-table.min.js"></script>

  3. Поміщаємо на сторінку
    div
    з класом
    replayTable
    і посиланням на csv-файл в атрибуті
    data-csv
    :

    <div class="replayTable" data-csv="https://s3-us-west-2.amazonaws.com/replay-table/csv/football/england/premier-league/2015-2016.csv" data-table-name="Premier League" data-input-type="listOfMatches" data-item-name="Team" data-use-rounds-numbers="true" </div>
Готове:

image
Налаштування
Уважний читач уже помітив
data-
атрибути. З їх допомогою таблиця адаптується під різні види спорту, локалізується і змінює зовнішній вигляд. Докладна документація є на Гітхабі.

Я постарався зробити так, щоб скрипт без доробки можна було використовувати для якомога більшого числа видів спорту. На сайті таблиць є приклади разом з вихідним кодом:

Ліцензія
Використовуйте таблиці на будь-яких сайтах, в тому числі комерційних.

Код на Гітхабі.

Спасибі Даші за красу.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.