Как сделать интерактивную таблицу
Дидактор
педагогическая практика
Как создать интерактивную таблицу в PowerPoint?
Создание интерактивной (анимированной) таблицы всегда привлекает внимание учителя. Наступает этап познавательного процесса, когда необходимо обобщить учебный материал, провести анализ, сравнение и отразить это в таблице. Однако создаваемая для большого экрана (интерактивной доски) для фронтальной работы с классом таблица имеет свои особенности.
Безусловно, разработчик анимированной таблицы должен стремиться к минимизации печатного текста. Большой по объему печатный текст, как правило, не читается. Поэтому в каждом удобном случае необходимо заменить его символом, опорным сигналом, анимированной моделью, иллюстрацией и даже видео.
Каждую ячейку таблицы можно сделать интерактивной. Это может быть не только её увеличенный вариант, но и более подробное содержание, не видимое в общем контексте таблицы. Именно в этом режиме наиболее привлекателен визуальный ряд, который можно будет представить в наиболее приемлемом масштабе.
Целесообразно ячейки в первой колонке или в заголовке сделать управляющими кнопками, что позволит размещать информацию на разных уровнях и при необходимости порционно. Это позволит учителю акцентировать внимание на определённых участках таблицы.
Во избежание путаницы рекомендуется единообразная навигация анимированной таблицы. К примеру, первая колонка — управляющие кнопки. Кнопки увеличения объектов можно разместить непосредственно на данных объектах. Возможны и другие варианты. Главное, установить единообразие.
Как научиться делать интерактивную таблицу? Посмотрите это видео.
Я показал, как вставлять в таблицу увеличенный фрагмент текста, изображение и даже видео.
Для того, чтобы не начинать с нуля, я предлагаю вам небольшой шаблон, с помощью которого вы сможете заполнить все ячейки своей таблицы. Разумеется, создавая свой проект, весь текст в шаблоне вы можете редактировать.
Нет сомнения, если вы уловили главную идею, как создать свою интерактивную таблицу, то у вас появится свой подход к её внешнему виду, к алгоритму подачи информации. Дидактор с удовольствием опубликует ваши проекты.
Конечно же, мы можем для конструирования интерактивной таблицы использовать одно из онлайн приложений. Однако существующие ограничения бесплатных версий, особенности того или иного сервиса, отсутствие уверенного интернет-соединения зачастую ограничивают нас в предполагаемых действиях.
Об особенностях и требованиях к такой укрупнённой дидактической единице читайте статью в Дидакторе Анимированные таблицы: методический аспект.
Однажды на работе коллега-бекендщик подошел с вопросом. Есть get-запрос, который отдает json с массивом данных. Нужно по ним построить таблицу в браузере. Проект личный, таблица для внутреннего использования, красоты особой не нужно. Главное сделать минимальными усилиями.
Коллега поступил гораздо мудрее и загуглил готовые решения. ЗАГУГЛИЛ. Да, так можно было. И показал результат.
Отрисована симпатичная таблица с данными, с сортировкой и фильтрацией. В 20 строк кода. Всю эту красоту делает библиотека tabulator.js. Я был впечатлен. Сам виджеты опросов и рейтингов делаю, а тут такая вещь очевидная. Не приходило в голову, что для построения таблиц наверняка есть готовые решения. Но это урок на будущее, а пока я об этом узнал и расскажу подробнее вам.
Базовая таблица
Можно скачать исходники с сайта либы, я же подключал с cdn, чтобы лишний раз файлы не таскать.
Затем в html поставим пустой див, где и отрисуем таблицу
И еще один js-файлик, где зададим настройки табулятора.
В файлике tabulator.js сначала пишем заготовку
Добавляем ссылки
Разбираемся дальше. Я хочу не просто показать заголовки статей, а дать ссылки на них. Настройка formatter может быть не только текстом или прогрессбаром. Но также и функцией, которая возвращает любые строки. Добавим в нашу таблицу новое скрытое поле id, а в существующем title напишем функцию formatter
Идем дальше. А не добавить ли в таблицу пагинацию?
Пагинация
Это очень просто. В настройках сразу после layout: ‘fitColumns’ добавим еще 2 пункта.
И в апишном запросе изменим limit=8 на 30. Чтобы получить больше данных и сделать пагинацию интереснее. Вот что получилось 
Чувствуете, как круто? Реализовывать пагинацию собственными лапками то еще удовольствие. Вот здесь мы уже делали Постраничная навигация по товарам в интернет-магазине. А в табуляторе это 2 строки.
Дальше вообще идет магия.
Дизайн
Таблицу можно как угодно стилизовать. А можно не как угодно, а по-бутстраповски. Для этого подключим еще один файлик со стилями
Смотрим 
Уже гораздо круче. Bootstrap4, все дела. И пагинация приличнее стала. Такой вариант уже не то что в админке держать, а и людям не стыдно показать.
И последнее, что сегодня замутим. Добавим кастомную колонку «Рейтинг статьи». По скриншотам Вы видели, что статьи сортируются по количеству голосов и средней оценке. Но статья, которой 3 человека поставили пятерку, ценнее статьи, которой четверо поставили трояк, согласны? 3 * 5 > 4 * 3. Арифметика. Поэтому введем самую полезную колонку таблицы Рейтинг = Количество голосов * Средняя оценка
Как работает formatter, мы уже знаем. Появилась еще новая функция sorter. Выглядит диковато, но на первый взгляд. Берем два сравниваемых значения (value = count * rating) и возвращаем их разницу. Кастомные сортировки работают по такому принципу, углубляться не будем.
Живой пример
А теперь на фиг картинки, посмотрим, что получилось уже в действии. Там не скриншоты, все кликается, сортируется, ссылки активны.
В таблице не левые числа. Это реальный показатель популярности статей, основанный на оценках читателей. Перейдите в любую статью из таблицы, оцените ее (в конце поста блок со звездочками) и обновите демо-страницу. Количество голосов и рейтинг изменятся. Средняя оценка может остаться такой же, если Ваша оценка совпадает со средней.
Мне эта табличка нравится. Конечно, и раньше смотрел, как читатели ставят оценки, но такой наглядной картины не было. Думаю, буду использовать такие таблички чаще.
И это еще я только чуточку библиотечку тронул. А там ведь есть и фильтры, и разные варианты форматирования. Колбеки и обмен данными с сервером. Можно даже добавлять новые строки в таблице и отправлять их бекенду, чтобы записать в базу. Красота.
Заключение
Куда такую таблицу можно прикрутить? Да навскидку:
1. Посещаемость статей
2. Список заказов в админке интернет-магазина
3. Список товаров в админке.
4. Логи или список событий. Здесь нужно будет запариться с серверной пагинацией, не все ж данные на клиент сразу тащить. Но это проще, чем целиком делать руками.
5. Здесь будет ваша фантазия
Как скрестить Excel c интерактивным веб-приложением
Не секрет, что Excel довольно мощный инструмент для работы с числовыми табличными данными. Однако средства, которые предоставляет Microsoft для интеграции с ним, далеки от идеала. В частности, сложно интегрировать в Excel современные пользовательские интерфейсы. Нам нужно было дать пользователям Excel возможность работать с довольно насыщенным и функциональным интерфейсом. Мы пошли несколько другим путем, который в итоге показал хороший результат. В этой статье я расскажу, как можно организовать интерактивное взаимодействие Excel c веб-приложением на Angular и расшить Excel практически любым функционалом, который реализуем в современном веб-приложении.
Итак, меня зовут Михаил и я CTO в Exerica. Одна из проблем которые мы решаем — облегчение работы финансовых аналитиков с числовыми данными. Обычно они работают как с исходными документами финансовой и статистической отчетности, так и каким-либо инструментом для создания и поддержания аналитических моделей. Так сложилось, что 99% аналитиков работают в Microsoft Excel и делают там довольно сложные вещи. Поэтому перевести их с Excel на другие решения не эффективно и практически невозможно. Объективно, «облачные» сервисы электронных таблиц до функционала Excel пока не дотягивают. Но в современном мире инструменты должны быть удобны и соответствовать ожиданиям пользователей: открываться по клику мышки, иметь удобный поиск. А реализация в виде разных несвязанных приложений будет довольно далека от ожиданий пользователя.
То с чем работает аналитик выглядит примерно так:
Основные данные тут — это числовые «финансовые показатели», например, доход за 1 квартал 2020 года. Для простоты буду называть их дальше просто «числами». Как видно, почти никакой связи между числами в документе и в аналитической модели нет, все только в голове у аналитика. И работа с заполнением и поддержанием модели занимает часы поиска и перебивания чисел из документа в таблицы, а потом поиск ошибок ввода. Вместе этого мы хотели бы предложить пользователю привычные инструменты: «перетаскивание», вставка через клипборд и так далее, а также быстрый просмотр исходных данных.
Что у нас уже было
Связываем данные
Кроме UDF наш addin реализует ribbon (панель инструментов) с настройками и некоторыми полезными функциями по работе с данными.
Добавляем интерактивность
Для передачи данных в Excel и налаживания интерактива мы разработали отдельный сервис, который предоставляет подключение по Websocket при помощи библиотеки SignalR и фактически является брокером для сообщений о событиях, которыми должны обмениваться «фронтовые» части системы в реальном времени. Он у нас называется Notification Service.
Вставляем данные в Excel
В нашем SPA мы подсвечиваем все числа, которые обнаружила система. Пользователь может выделять их, навигировать по ним и т.п. Для вставки данных мы реализовали 3 механизма, чтобы закрыть различные варианты использования:
При клике на числе в SPA через Notification Service отправляется сообщение в addin, содержащее все необходимые данные для вставки формулы. Далее формула просто вставляется в текущую выделенную ячейку.
Эти способы хороши, когда пользователю нужно вставлять в свою модель по одному числу, но если надо перенести целую таблицу или ее часть, необходим другой механизм. Наиболее привычным для пользователей представляется копирование через клипборд. Однако этот способ оказался сложнее первых двух. Дело в том, что для удобства вставляемые данные должны быть представлены в нативном для Excel формате — OpenXML Spreadsheet. Наиболее просто это реализуется используя объектную модель Excel, то есть из addin’а. Поэтому процесс формирования клипборда у нас выглядит так:
Несмотря на то, что данные проделывают довольно долгий путь, благодаря SignalR и RTD происходит это довольно быстро и абстрагированно от пользователя.
Распространяем данные
После того, как пользователь выбрал начальные данные для своей модели, их надо «распространить» все периоды (года, полугодия и кварталы), которые представляют интерес. Для этих целей одним из параметров нашей UDF является дата (период) данного числа (вспоминаем: «доход за 1 квартал 2020 года»). В Excel существует нативный механизм «распространения» формул, который позволяет заполнить ячейки той же формулой с учетом ссылок, заданных в параметрах. То есть вместо конкретной даты в формулу вставлена ссылка на нее, а далее пользователь «распространяет» ее на другие периоды, при этом в таблицу автоматически загружаются «те же» числа из других периодов.
А что это там за число?
Теперь у пользователя есть модель на несколько сотен строк и несколько десятков столбцов. И у него может возникнуть вопрос, что же там за число в ячейке L123? Чтобы получить ответ, у нас ему достаточно кликнуть на эту ячейку и в нашем SPA откроется тот самый отчет, на той самой странице, где записано кликнутое число, а число в отчете будет выделено. Вот так:
А если это не просто одно число из отчета, а результат некоторых вычислений на числах, взятых из отчета, то мы подсветим все числа, входящие в вычисляемое в Excel выражение. При этом не происходит загрузки всего приложения и подгрузки всех необходимых данных, как в случае перехода по ссылке.
В качестве заключения
Вот такая, на мой взгляд, нестандартная реализация взаимодействия между Excel и веб-приложением получилась довольно удобной для пользователя. Благодаря использованию Excel порог входа для пользователей из целевой аудитории довольно низкий. При этом мы получаем также всю мощь Excel по работе с числовыми данными. Сами данные всегда остаются связанными с источником, а также связанными во времени. Для целевых клиентов нет необходимости встраивать в бизнес-процесс работы с данными абсолютно новые внешние системы. Наше решение встраивается как дополнительный «инструмент» внутри Excel, что является стандартом де-факто для провайдеров финансовых данных.
Подобный архитектурный подход к интеграции веб-приложений с Microsoft Excel может быть применим и для решения других задач, требующих интерактива и сложных пользовательских интерфейсов при работе с числовыми и табличными данными.
8 бесплатных инструментов для создания интерактивных визуализаций данных без необходимости написания кода
Когда тот, кто работает в сфере Data Science, собирается показать результаты своей деятельности другим людям, оказывается, что таблиц и отчётов, полных текстов, недостаточно для того чтобы представить всё наглядно и понятно. Именно в таких ситуациях возникает нужда в визуализации данных, в такой их обработке, которая позволит всем желающим в них разобраться и ухватить суть тех сложных процессов, которые они описывают.
В этом материале я расскажу о лучших бесплатных инструментах, позволяющих без особых сложностей создавать впечатляющие визуальные представления данных. При этом тут я не буду говорить о сложных системах вроде Power BI и Google Studio. Я выбрал те 8 инструментов, о которых пойдёт речь, из-за того, что ими легко пользоваться, из-за их приятного внешнего вида, из-за того, что работать с ними можно, не написав ни единой строчки программного кода и из-за того, что они бесплатны. Кроме того, они позволяют создавать интерактивные визуализации. А это значит, что графики, представляющие некие данные, могут содержать в себе больше сведений об этих данных, чем обычные изображения. Да и работать с такими графиками интереснее.
Так как инструменты для визуализации данных то появляются, то исчезают, я включил в этот материал только те из них, которые, вероятнее всего, ещё долго будут пребывать в добром здравии. А это значит, что вполне разумным шагом будет вложение некоторого времени в их изучение. Как уже было сказано, пользоваться этими инструментам можно без написания кода. Но если вас интересует визуализация данных именно через код — взгляните на этот материал.
1. Flourish
Flourish позволяет создавать привлекательные диаграммы, карты и интерактивные истории. Это — простой и понятный инструмент, который включает в себя библиотеку шаблонов и поддерживает различные возможности визуализации данных.
Кому стоит присмотреться к Flourish? Любому, кого интересует составление историй на основе данных (data storytelling). В этом ему поможет множество возможностей системы, касающихся визуализации данных и анимации.
Сильные стороны бесплатной версии
Слабые стороны бесплатной версии
Пример
На этой странице можно найти интерактивную Bar Race-диаграмму, демонстрирующую изменение численности населения в различных странах между 1960 и 2016 годами.
Сведения о численности населения разных стран
2. Datawrapper
Datawrapper — это инструмент, который позволяет создавать интерактивные диаграммы, карты и таблицы. При этом для его эффективного использования не нужно обладать знаниями в области дизайна. Разработчики этого инструмента учли множество правил дизайна, которыми имеет смысл следовать при визуализации данных. Кроме этого надо отметить, что всё то, что создаётся с помощью Datawrapper, подходит для просмотра на любых устройствах.
Кому стоит обратить внимание на этот инструмент? Он рассчитан, преимущественно, на творческих людей — на писателей, блогеров, журналистов. В целом можно сказать, что он направлен на создание интерактивных изображений, дополняющих какие-либо текстовые материалы.
Сильные стороны бесплатной версии
Слабые стороны бесплатной версии
Пример
Вот диаграмма разброса данных, созданная для оценки языковых особенностей сериалов Netflix.
Анализ языковых особенностей сериалов Netflix
3. ChartBlocks
ChartBlocks является частью Ceros — облачной дизайн-платформы, которая позволяет всем желающим, будь то специалисты по маркетингу или дизайнеры, создавать интересные материалы, привлекающие внимание пользователей. Писать код при работе с этой платформой не требуется.
ChartBlocks позволяет очень быстро создавать отлично выглядящие диаграммы. Среди типов диаграмм, доступных в этой системе можно отметить столбчатые, линейные, круговые, точечные диаграммы. Для того чтобы приступить к работе с системой достаточно создать учётную запись.
Кому подойдёт ChartBlocks? Любому, кого интересует создание простых визуализаций данных за короткое время.
Сильные стороны бесплатной версии
Слабые стороны бесплатной версии
Пример
Вот пример столбчатой диаграммы, на которой показано число строк, приходящихся на главных героев «Игры престолов» в 7 сезонах. На создание этой диаграммы ушло всего несколько минут.
Столбчатая диаграмма, созданная с помощью ChartBlocks
4. Infogram
Infogram — это инструмент для визуализации данных, который помогает создавать привлекательные материалы. Помимо поддержки системой обычных диаграмм — столбчатых, линейных, круговых, она позволяет создавать инфографику и отчёты.
Кому стоит присмотреться к Infogram? Тем, кого интересует создание различных информационных материалов, а не только обычных диаграмм.
Сильные стороны бесплатной версии
Слабые стороны бесплатной версии
Пример
Вот пример использования одного из типов карт, доступных бесплатно. На такую карту можно добавить любые элементы и анимации.
Карта, созданная средствами Infogram
5. Chart Studio
Chart Studio — это проект Plotly, представляющий собой онлайн-инструмент для создания диаграмм. Фактически это — редактор для создания диаграмм, основанных на D3.js и WebGL.
Кому подойдёт Chart Studio? На сайте проекта сказано, что Chart Studio — это инструмент, предназначенный для всех, кто работает с диаграммами. Это, например, дата-сайентисты, Dash-разработчики, люди, создающие отчёты и презентации, журналисты.
Сильные стороны бесплатной версии
Слабые стороны бесплатной версии
Пример
Вот диаграмма разброса данных, построенная для анализа воздействия количества сказанных слов в каждом эпизоде сериала «Аватар» на рейтинги IMDB.
Диаграмма, созданная с помощью Chart Studio
6. Knight Lab
Knight Lab — это опенсорсные, нетребовательные к ресурсам инструменты, поддающиеся глубокой настройке и предназначенные для тех, кто занимается составлением историй на основе данных. Эти инструменты визуализации данных отличаются от других аналогичных проектов. Истории, основанные на данных, можно «рассказывать» с использованием Storyline, с использованием карт (Storymap) и временных рядов (Timeline).
Кому стоит взглянуть на Knight Lab? Проект нацелен, преимущественно, на журналистов, но он будет интересен всем, кто занимается созданием интерактивных историй на основе данных.
Сильные стороны бесплатной версии
Слабые стороны бесплатной версии
Пример
Вот результат применения одного из бесплатных шаблонов, имеющихся в системе.
Результат использования Knight Lab
7. Tableau Public
Tableau Public — это один из самых популярных инструментов, но если вы о нём не слышали — знайте, что это — бесплатная платформа, которая позволяет создавать визуализации, делиться ими с другими людьми, исследовать данные. С помощью этой платформы можно легко и быстро создавать интерактивные диаграммы, карты, информационные панели.
Кому будет интересен этот инструмент? Всем, кто работает с данными и хочет создавать их качественные интерактивные визуальные представления.
Сильные стороны бесплатной версии
Слабые стороны бесплатной версии
Пример
Вот схема, демонстрирующая сведения о тех, кто создаёт визуализации с помощью Tableau Public.
Результаты использования Tableau Public
8. RAWGraphs
Платформа RAWGraphs находится последней в нашем списке, но это не значит, что она хуже других. С её помощью, правда, нельзя создавать интерактивные визуализации, но это не значит, что она недостойна внимания. Цель RAWGraphs заключается в том, чтобы организовать связь между приложениями для работы с электронными таблицами, вроде Microsoft Excel, и векторными графическими редакторами наподобие Adobe Illustrator, Inkscape и Sketch.
Сильные стороны бесплатной версии
Слабые стороны бесплатной версии
Пример
Вот пример визуализации данных, где в виде иерархической структуры представлено количество жителей некоторых городов.
Результат визуализации данных с использованием RAWGraph
Итоги
Не существует идеального инструмента для визуализации данных. Именно поэтому полезно освоить 2-3 таких инструмента, дополняющих друг друга, и пользоваться их наиболее удачными возможностями.
Вы ознакомились с 8 новыми инструментами для создания интерактивных визуализаций, не требующих навыков программирования. После того, как вы научитесь работать с некоторыми из них, я рекомендую найти библиотеки для визуализации данных, созданные для используемого вами языка. Это даст вам больше возможностей по настройке визуализаций под ваши нужды.
Если вы, например, пишете на Python — взгляните на этот материал. В нём речь идёт о работе с Plotly, Seaborn и Matplotlib.
Какими инструментами для визуализации данных вы пользуетесь?