Анализ детских имен: гистограмма + облака слов
В течение последних 10 лет D3 был инструментом №1 для создания интерактивных визуализаций данных в Интернете. Сейчас Svelte становится все более популярным для всех типов веб-приложений, но особенно в мире онлайн-визуализации данных.
В этой статье представлен пример того, как Svelte и D3 можно объединить для создания пользовательской визуализации данных. Данные представляют собой данные об именах детей из Службы социального обеспечения США; визуализация представляет собой столбчатую диаграмму с облаками слов, показывающими самые популярные имена на столбцах. В предыдущей статье я объяснил, как можно создать такую диаграмму используя d3.js и всего 100 строк JavaScript.
Здесь я использовал Svelte для рендеринга SVG-диаграммы, а также добавил немного интерактивности: выпадающий список, который позволяет пользователям выбирать год, а затем немедленно обновляет диаграмму данными об именах детей за этот год.
Вот анимированный скриншот, показывающий интерактивную диаграмму:
Ключевые шаги
- Получить и подготовить данные
- Создайте гистограмму SVG
- Сгенерируйте облака слов
Получить и подготовить данные
Я поместил вызов fetch в обработчик событий элемента HTML select, используя двустороннюю привязку Svelte для немедленного обновления переменной selectedYear:
Даже если вы никогда раньше не использовали Svelte, но знакомы с HTML, вы, вероятно, уже имеете четкое представление о том, что происходит в приведенном выше коде.
Блок {#each} в строках с 12 по 14 представляет собой синтаксис Svelte для написания HTML с использованием цикла. В этом случае требуется массив лет, каждый из которых отображается как option в раскрывающемся списке select.
Функция showBars() определена в теге <script> в том же файле .svelte. Он использует D3 (аналогично моей предыдущей статье) для подготовки данных в виде массива объектов. Каждая запись содержит letter, countдетей, родившихся в этом году, и массив имен под названием words, содержащий все необходимые данные для облака слов.
Создайте гистограмму SVG
Ниже приведен код Svelte для отображения полос в виде прямоугольников SVG. Опять же, если вы знакомы с HTML и SVG, это должно выглядеть довольно знакомо.
Оператор {#if} в строке 4 — это синтаксис Svelte для условного рендеринга; он попытается отобразить столбцы только в том случае, если массив данных letterCounts не пуст.
Размеры прямоугольника задаются с помощью шкал D3.
Анимация выполнена с помощью Svelte transition:
in:fly=”{{ x: -1000, duration: 1000, delay: 1000*i}}
В этом случае я хочу, чтобы бары летели один за другим, с 1000 мс между каждым баром. Причина аномально длинной задержки в 1000 мс заключается в том, что функция генерации облака слов для каждого столбца занимает некоторое время для запуска. Для каждого облака требуется всего несколько сотен мс, поэтому я, вероятно, мог бы ускорить его, используя синтаксис Svelte {#await} для отображения каждого облака слов, как только оно будет готово. Но я думаю, что это выглядит красиво с постоянным временным интервалом между каждым тактом.
Сгенерируйте облака слов
Я запускаю функцию d3-cloud для каждого бара с временными интервалами в 1000 мс. Функция дает массив с именем words, в котором есть данные для каждого имени ребенка (размер шрифта, положение и т. д.), необходимые для создания облака слов.
Затем, вместо использования D3 для добавления облака слов в DOM, я использую Svelte для размещения слов в виде текстовых узлов SVG, как показано ниже. Я следую совету Амелии Ваттенбергер в этом выступлении на Svelte Summit и использую D3 для помощи в подготовке данных, расчете масштабов и позиционировании элементов, а затем позволяю Svelte выполнять обновление DOM.
Svelte реактивен по умолчанию. Поскольку в приведенной выше разметке используется переменная letterCounts, Svelte будет следить за этой переменной и проверять, нужно ли обновлять DOM при изменении переменной letterCounts. Подробнее о том, как Svelte распознает изменения в массивах и объектах, см. здесь.
Адаптивное изменение размера окна
Еще одна удобная функция Svelte — возможность мгновенно реагировать на изменение ширины окна браузера.
<svelte:window bind:innerWidth={width}/>
После включения приведенного выше оператора любая разметка HTML, содержащая переменную width, будет перерисовываться всякий раз, когда изменяется ширина окна (например, если мобильный пользователь поворачивает свое устройство).
Преимущества Svelte для визуализации данных
Полный код этого графика доступен здесь. Это один .svelte файл с примерно 160 строками кода, включая JavaScript, HTML и немного базового CSS. Это довольно простой пример, и его явно можно было бы построить без Svelte, но я думаю, что он все же демонстрирует некоторые полезные функции Svelte для визуализации данных.
Svelte был создан Ричем Харрисом, когда он работал над визуализацией данных в New York Times, чтобы «почесать собственный зуд». D3 был создан в той же среде Майком Бостоком 10 лет назад. Два фантастических примера невероятно влиятельного программного обеспечения с открытым исходным кодом, которое началось как проект увлечения одного человека.
Svelte позволяет веб-разработчикам делать больше с меньшим количеством кода. Меньше кода также означает меньшее количество ошибок и более легкую отладку.
Синтаксис Svelte очень удобен для пользователя, добавляя свою реактивную «магию» к знакомым основам HTML, CSS и JavaScript. Включение условной логики для HTML-элементов прямо в HTML-разметку упрощает следование, а также облегчает обучение новичкам.
Svelte также является очень легким и производительным фреймворком, потому что он компилирует .svelte файлов в чистый HTML, CSS и JavaScript/Typescript.
Наконец, по мере того, как темпы и экосистема вокруг Svelte растут, становится все проще и проще находить библиотеки компонентов, плагины, вдохновение и поддержку со стороны сообщества. Теперь, когда Vercel оказывает финансовую поддержку Svelte, этот импульс, несомненно, продолжит расти.
Я с нетерпением жду возможности глубже погрузиться в Svelte в следующем году!
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
