Проблема
Визуализация данных является важной частью работы многих дизайнеров интерфейсов. Панели мониторинга, таблицы, отчеты и виджеты – все эти компоненты интерфейса содержат диаграммы. Независимо от того, какой инструмент вы используете, Sketch, Figma или Adobe XD, у вас нет встроенных функций для визуализации данных. Представьте, что вы хотите создать прототип для инструмента анализа или системы с десятками виджетов, таблиц или отчетов с использованием реальных данных из Excel. Я провел несколько недель, выполняя подобную задачу. И однажды наш специалист по обработке и анализу данных пришел ко мне и сказал, что все данные изменились! Я был вынужден внести изменения в 56 экранов моего прототипа ... Какие у меня были альтернативы? Я мог бы использовать Tableau, D3.js или HTML Canvas, но эти инструменты сложны и не очень гибки. Я решил, что мне нужно найти плагин Sketch, который мог бы решить мою проблему. После часа поисков я нашел три интересных плагина: Sketch Data Studio, Sketch Pies и Sparkliner. У каждого из этих плагинов были плюсы и минусы, и они не удовлетворяли всем моим потребностям. Поэтому я решил создать свой собственный плагин Sketch для ежедневных задач визуализации.
О плагине Chart
Chart содержит четыре типа диаграмм: линейная диаграмма, гистограмма, зональная диаграмма и спарклайн (искрографик). Каждый тип диаграммы поддерживает визуализацию реальных текстовых, табличных или случайных данных. Вы должны скопировать номера, разделенные запятыми, из любого текстового редактора, листа Google или Excel и создать диаграмму. Если вы выберете две или более строки, Chart нарисует несколько линий на артборде.
Настройки
Внутри Contents/Sketch вы найдете файл с общими параметрами, такими как тип кривой, цветовая палитра или вес линии. Chart/Contents/Sketch/parameters.js Кривые основаны на кривых Безье. Генерация случайных данных выполняется с использованием нескольких простых функций и их комбинаций: Сочетание логарифмических и линейных функций
Chart в действии
Chart – это бесплатный проект с открытым исходным кодом. Если вы найдете какие-либо ошибки или у вас есть предложения, не стесняйтесь пишите создателю или переделывайте репозиторий, чтобы добавить дополнительные функции.
Перевод статьи Pavel Kuligin
Топ коментарі (0)