Интерактивная визуализация данных с использованием современных JavaScript и D3

На данный момент у нас есть кое-что, что передает данные, с которыми мы работаем, немного более четко:

Делаем это интерактивным

В качестве последнего шага я хочу, чтобы мы добавили некоторые элементы управления, чтобы позволить пользователю копаться в конкретном году. Я хочу добавить кнопку « Воспроизведение / Пауза» , а также ползунок года, позволяющий пользователю выбрать конкретную дату для просмотра.

Вот HTML-код, который я буду использовать для добавления этих элементов на экран:

 <div class="container" id="page-main"> <div id="controls" class="row"> <div class="col-md-12"> <button id="play-button" class="btn btn-primary">Play</button> <div id="slider-div"> <label>Year: <span id="year-label"></span></label> <div id="date-slider"></div> </div> </div> </div> ... </div> 

Нам нужно добавить несколько слушателей событий для обоих этих элементов, чтобы спроектировать поведение, которое мы ищем.

Прежде всего, я хочу определить поведение нашей кнопки Play / Pause . Нам нужно будет заменить код, который мы написали для нашего интервала ранее, чтобы позволить нам остановиться и запустить таймер с помощью кнопки. Я предполагаю, что визуализация начинается в состоянии «Приостановлено», и нам нужно нажать эту кнопку, чтобы начать работу.

 function update(data) { ... let time = 0; let interval; function step() { update(data[time]); time = (time == 49) ? 0 : time + 1; } $("#play-button").on("click", function() { const button = $(this); if (button.text() === "Play"){ button.text("Pause"); interval = setInterval(step, 200); } else { button.text("Play"); clearInterval(interval); } }); ... } 

Всякий раз, когда нажимается наша кнопка, наш блок if/else здесь будет определять другое поведение в зависимости от того, является ли наша кнопка кнопкой «Play» или кнопкой «Pause». Если кнопка, которую мы нажимаем, говорит «Play», мы заменим кнопку на кнопку «Pause» и запустим наш цикл интервала. В качестве альтернативы, если кнопка представляет собой кнопку «Пауза», мы изменим ее текст на «Воспроизведение» и будем использовать функцию clearInterval() чтобы остановить цикл.

Для нашего слайдера я хочу использовать слайдер, который поставляется с библиотекой пользовательского интерфейса jQuery . Я включил это в наш HTML, и я собираюсь написать несколько строк, чтобы добавить это на экран:

 function update(data) { ... $("#date-slider").slider({ max: 49, min: 0, step: 1, slide: (event, ui) => { time = ui.value; update(data[time]); } }); update(data[0]); ... } 

Здесь мы используем параметр slide чтобы прикрепить прослушиватель событий к слайдеру. Всякий раз, когда наш ползунок перемещается к другому значению, мы обновляем наш таймер на это новое значение, и мы запускаем нашу функцию update() в тот год в наших данных.

Мы можем добавить эту строку в конце нашей функции update() чтобы наш ползунок перемещался к нужному году, когда работает наш цикл:

 function update(data) { ... // Update slider position $("#date-slider").slider("value", time); } 

Я также добавлю строку в нашу updateHTML() (которая запускается всякий раз, когда изменяется наша визуализация), которая может корректировать значение метки на основе текущего года в данных:

 function updateHTML(data) { // Update title $("#year").text(data.name); // Update slider label $("#year-label").text(data.name); // Update table values $("#fig1").html(data.values[0].value.toLocaleString()); ... } 

Я добавлю еще несколько строк в наш CSS, чтобы все выглядело немного лучше:

 <style> ... @media screen and (min-width: 768px) { table { margin-top: 100px; } } #page-main { margin-top: 10px; } #controls { margin-bottom: 20px; } #play-button { margin-top: 10px; width: 100px; } #slider-div { width:300px; float:right; } </style> 

И вот он — наш готовый продукт — полностью функционирующая интерактивная визуализация данных, где все работает как положено.

Надеемся, что этот урок продемонстрировал реальную силу D3, позволяя вам создавать абсолютно все, что вы можете себе представить.

Начало работы с D3 с нуля — это всегда сложный процесс, но награды того стоят. Если вы хотите узнать, как создавать свои собственные визуализации, вот несколько онлайн-ресурсов, которые могут вам пригодиться:

• Обзор содержимого SitePoint D3.js.
• Введение в библиотеку на домашней странице D3. Это запускает некоторые из самых основных команд, показывая вам, как сделать первые несколько шагов в D3.
• « Давайте создадим гистограмму » Майка Бостока, создателя D3, — показывающую новичкам, как сделать один из самых простых графиков в библиотеке.
• D3.js в действии Элайджи Микс (35 долларов), это солидный вводный учебник, в котором много деталей.
• Slack канал D3 очень радушен для новичков в D3. В нем также есть раздел «учебные материалы» с большим количеством ресурсов.
• Это онлайн-курс Удеми (20 долларов), который охватывает все, что есть в библиотеке, в виде серии видео-лекций. Он предназначен для разработчиков JavaScript и включает в себя четыре интересных проекта.
• Множество примеров визуализаций, которые доступны на bl.ocks.org и blockbuilder.org.
• Справочник по D3 API , который дает подробное техническое объяснение всего, что может предложить D3.

И не забывайте, что если вы хотите увидеть готовую версию кода, которую я использовал в этой статье, вы можете найти ее в нашем репозитории GitHub .