Обновить

Интерактивная таблица результатов

Разработка веб-сайтовOpen sourceJavaScriptВизуализация данных
Из песочницы
Глядя на таблицу результатов футбольного сезона, я часто задаюсь вопросами:

  • Лидировала ли команда с начала сезона или совершила героический рывок в конце?
  • Как зимнее трансферное окно повлияло на результаты?
  • Доигрывали ли сезон команды в середине таблицы или играли в полную силу?

Статичная таблица не даёт ответов.

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

Графики или быстро теряли читаемость с ростом количеством команд, или требовали нетривиальной концентрации при первом контакте. В итоге, всё закончилось тем, с чего началось — таблицей. Точнее, скриптом, который преобразовывает результаты сезона в интерактивную таблицу. Можно посмотреть результаты после любого тура или просто нажать на 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- атрибуты. С их помощью таблица адаптируется под разные виды спорта, локализируется и меняет внешний вид. Подробная документация есть на Гитхабе.

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


Лицензия


Используйте таблицы на любых сайтах, в том числе коммерческих.

Код на Гитхабе.

Спасибо Даше за красоту.

Обновление. Скрипт вырос в полноценную библиотеку.
Теги:javascriptвизуализация данныхспорттаблицы
Хабы: Разработка веб-сайтов Open source JavaScript Визуализация данных
Рейтинг +27
Количество просмотров 13,9k Добавить в закладки 102
Комментарии
Комментарии 25

Похожие публикации

Javascript Developer
от 75 000 до 180 000 ₽WebLab TechnologyМожно удаленно
Администратор баз данных SQL
от 100 000 ₽Сима-лендЕкатеринбург
Javascript разработчик
от 130 000 до 180 000 ₽ArtezioНижний Новгород
Ведущий администратор баз данных
от 80 000 ₽ТатнефтьАльметьевск
Javascript разработчик
от 160 000 до 220 000 ₽ArtezioМосква

Лучшие публикации за сутки