Антонио Сарчевич из Datawrapper: «Я хотел поставить перед собой задачу визуализировать представление с помощью Datawrapper, каким-то образом изобразив поле, обстановку на сцене и, самое главное, путь, который Кендрик проделал во время своего выступления«.
от автора: Антонио Сарчевич
Привет всем! Меня зовут Тони, я из команды разработчиков приложений, и на этой неделе я хотел бы бросить себе вызов и попытаться визуализировать шоу в перерыве Суперкубка в Datawrapper.
Шоу Кендрика Ламара в перерыве Суперкубка стало культурным событием — самой просматриваемой телевизионной трансляцией в США с момента высадки на Луну . Я не буду пытаться разгадать все отсылки шоу или тщательно продуманные тексты песен единственного рэпера, удостоенного Пулитцеровской премии. (Другие, с гораздо большими познаниями в культуре хип-хопа, уже проделали отличную работу в этом направлении !) Вместо этого я хотел бросить себе вызов и визуализировать выступление с помощью Datawrapper, каким-то образом нарисовав поле, сценическую обстановку и, что самое важное, путь, который прошел Кендрик во время своего выступления:
Следуя за Кендриком по стадиону
Все исполненные песни и пути, по которым прошел Кендрик Ламар во время своего выступления в перерыве Суперкубка 2025 года.
Шоу начинается с того, что Дядя Сэм, которого играет Сэмюэл Л. Джексон, знакомит нас с «великой американской игрой». Кендрик сидит на капоте Buick GNX, припаркованного на квадратном символе в верхнем левом углу поля, где он начинает с неизданного трека под названием «Bodies». Танцоры начинают выходить из машины под песню «squabble up» , и Кендрик спускается вниз, чтобы присоединиться к ним, выступая по всей ширине квадрата. После того, как Дядя Сэм прервал его, назвав «слишком гетто», Кендрик продолжает спускаться по лестнице квадратной сцены, исполняя свой хит «HUMBLE». Он продолжает спускаться для следующей песни «DNA», где он бежит через длинную среднюю сцену на противоположную сторону поля, а затем возвращается назад, когда ритм переключается на «Euphoria».
Под уличным фонарем около центра поля Кендрик исполняет версию песни «man at the garden» а капелла с несколькими домашними парнями, за что Дядя Сэм приказывает судье «вычесть одну жизнь». Далее следует «peekaboo » , исполняемая внутри креста в нижнем левом углу . Он на мгновение задумывается о том, чтобы спеть «их любимую песню», но вместо этого решает пересечь поле к треугольному символу в правом верхнем углу, а танцоры следуют за ним волнообразно, исполняя «Luther» с SZA. Затем оба исполняют «All The Stars» на круге в нижнем правом углу.
Дядя Сэм снова прерывает выступление, чтобы одобрить «милые и спокойные» песни, поскольку «именно этого хочет Америка». Сэма прерывает ритм «Not Like Us», пока Кендрик танцует справа к центру длинной сцены, заканчивая большим кругом в середине, пока весь стадион скандирует печально известную фразу «a minor». Выступление заканчивается фразой «tv off», продюсер которой Мастард присоединяется к танцу, пока Кендрик не заканчивает шоу, выключая воображаемый телевизор.
Что это за визуализация?
Я создал эту визуализацию с помощью карты локатора . Американское футбольное поле, установка сцены и путь Кендрика были нарисованы в Figma и экспортированы в виде SVG. После некоторых экспериментов я понял, как использовать библиотеку JavaScript под названием svg2geojson , которая могла бы преобразовать эти SVG в GeoJSON, которые могут распознавать карты локатора Datawrapper.
Я использовал этот калькулятор Great Circle Calculator для адаптации 2D-системы координат файла SVG к реальным координатам широты и долготы, установив центр поля точно на 0°N 0°E, чтобы проекция карты не искажала формы. Удобно, что это также место в океане без какой-либо суши поблизости. Мне пришлось позаботиться о том, чтобы нарисованные мной пути не были слишком сложными, иначе библиотека преобразования зависла бы. К счастью, это расширение Figma под названием simplify path помогло мне!
Спасибо за чтение, надеюсь, вам понравилось. Хотя это, возможно, самый запутанный способ отображения SVG в Интернете, в процессе я узнал много нового о GeoJSON и наших картах локаторов! Не забудьте снова включить «телевизор» на следующей неделе для недельного графика от нашего разработчика данных Эллиота!
Антонио Сарчевич (он/они, @SarcevicAntonio ) — разработчик программного обеспечения в команде приложений Datawrapper, работающий над пользовательским опытом. Вне работы Тони помогает поддерживать SvelteLab и создает руководства по Svelte и веб-разработке на sarcevic.dev . Он также любит ходить на концерты и кататься на фингерборде. Тони живет в Мюнстере.