- PVSM.RU - https://www.pvsm.ru -
Глядя на таблицу результатов футбольного сезона, я часто задаюсь вопросами:
Статичная таблица не даёт ответов.
Поиски удачной визуализации сезона на просторах интернета закончились безуспешно, поэтому я начал экспериментировать сам.
Графики или быстро теряли читаемость с ростом количеством команд, или требовали нетривиальной концентрации при первом контакте. В итоге, всё закончилось тем, с чего началось — таблицей. Точнее, скриптом, который преобразовывает результаты сезона в интерактивную таблицу. Можно посмотреть результаты после любого тура или просто нажать на replay и наблюдать, как команды плавают вверх и вниз по таблице:
→ Живая демонстрация [1]
Найти результаты любого хоть сколь-нибудь популярного чемпионата не проблема, спасибо огромной букмекерской индустрии. Для демонстрации я возьму результаты матчей английской Премьер-лиги на Football Data [2]:
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-объекты и добавляет дополнительную информацию —например, количество побед, ничей и поражений после каждого тура.
head
:
<link rel="stylesheet" type="text/css" href="cdn.jsdelivr.net/replay-table/latest/replay-table.css">
body
:
<script type="text/javascript" src="//cdn.jsdelivr.net/replay-table/latest/replay-table.min.js"></script>
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>
Готово:
Внимательный читатель уже заметил data-
атрибуты. С их помощью таблица адаптируется под разные виды спорта, локализируется и меняет внешний вид. Подробная документация есть на Гитхабе [3].
Я постарался сделать так, чтобы скрипт без доработки можно было использовать для как можно большего числа видов спорта. На сайте таблиц есть примеры вместе с исходным кодом:
Используйте таблицы на любых сайтах, в том числе коммерческих.
→ Код на Гитхабе [3].
Спасибо Даше [7] за красоту.
Автор: antoniokov
Источник [8]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/226154
Ссылки в тексте:
[1] Живая демонстрация: https://targetprocess.github.io/replayTable/#premier-league
[2] Football Data: http://www.football-data.co.uk/data.php
[3] Гитхабе: https://github.com/TargetProcess/replayTable#parameters
[4] Формула 1: https://targetprocess.github.io/replayTable/#f1
[5] NBA: https://targetprocess.github.io/replayTable/#nba
[6] Спортивная версия «Что? Где? Когда?»: https://targetprocess.github.io/replayTable/#chgk
[7] Даше : https://github.com/DariaK
[8] Источник: https://habrahabr.ru/post/318558/?utm_source=habrahabr&utm_medium=rss&utm_campaign=sandbox
Нажмите здесь для печати.