UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Chart - самый функциональный Sketch-плагин визуализации данных
Редакція
Редакція

Опубліковано • Оновлено

Chart - самый функциональный Sketch-плагин визуализации данных

Проблема

Визуализация данных является важной частью работы многих дизайнеров интерфейсов. Панели мониторинга, таблицы, отчеты и виджеты – все эти компоненты интерфейса содержат диаграммы. Независимо от того, какой инструмент вы используете, Sketch, Figma или Adobe XD, у вас нет встроенных функций для визуализации данных. Представьте, что вы хотите создать прототип для инструмента анализа или системы с десятками виджетов, таблиц или отчетов с использованием реальных данных из Excel. Я провел несколько недель, выполняя подобную задачу. И однажды наш специалист по обработке и анализу данных пришел ко мне и сказал, что все данные изменились! Я был вынужден внести изменения в 56 экранов моего прототипа ... Какие у меня были альтернативы? Я мог бы использовать TableauD3.js или HTML Canvas, но эти инструменты сложны и не очень гибки. Я решил, что мне нужно найти плагин Sketch, который мог бы решить мою проблему. После часа поисков я нашел три интересных плагина: Sketch Data StudioSketch Pies и Sparkliner. У каждого из этих плагинов были плюсы и минусы, и они не удовлетворяли всем моим потребностям. Поэтому я решил создать свой собственный плагин Sketch для ежедневных задач визуализации.

О плагине Chart

Chart содержит четыре типа диаграмм: линейная диаграмма, гистограмма, зональная диаграмма и спарклайн (искрографик). Плагин для Sketch Chart - 1 Каждый тип диаграммы поддерживает визуализацию реальных текстовых, табличных или случайных данных. Вы должны скопировать номера, разделенные запятыми, из любого текстового редактора, листа Google или Excel и создать диаграмму. Если вы выберете две или более строки, Chart нарисует несколько линий на артборде.

Настройки

Внутри Contents/Sketch вы найдете файл с общими параметрами, такими как тип кривой, цветовая палитра или вес линии. Плагин для Sketch Chart - настройки Chart/Contents/Sketch/parameters.js Кривые основаны на кривых Безье. Генерация случайных данных выполняется с использованием нескольких простых функций и их комбинаций: Плагин для Sketch Chart - функции Сочетание логарифмических и линейных функций

Chart в действии

Chart – это бесплатный проект с открытым исходным кодом. Если вы найдете какие-либо ошибки или у вас есть предложения, не стесняйтесь пишите создателю или переделывайте репозиторий, чтобы добавить дополнительные функции.


Перевод статьи Pavel Kuligin

Топ коментарі (0)