Всем привет. Короче, я люблю заниматься статистикой, потому решил поделиться вами туториалом по такому замечательному сайту как Flourish. С помощью него можно создавать диаграммы, инфографики, визуализации, карты, визуализированные инструкции, мини-программы и многое другое с помощью шаблонов или собственноручно. Вот некоторые примеры его использования:
Вот такое что-то непонятное
Карта негров Африки
А также вот такой онлайн-счётчик времени режима поддержки или самая безобидная видеодиаграмма пользователей пикуко
Для начала давайте зайдем на сайт https://flourish.studio/ и зарегистрируемся. Регистрация очень легкая и удобная, можно войти через Google. Дальше вас опрокинет на среду вашего аккаунта. Давайте ее осмотрим:
Под цифрой 1 находится кнопочка New Visualization, нажав на которую мы можем выбрать шаблон нашей визуализации или сделать новый.
Под цифрой 2 находятся наши папочки, в которые мы будем сортировать наши проекты.
Под цифрой 3 все наши файлы: папочки, а также визуализации, находящиеся вне папок.
Под цифрой 4 самый обычный фильтр, а под цифрой 5 это стандартная служба поддержки, где на английском языке можно найти помощь по том, что вам вдруг не ясно.
Давайте создадим собственную папку. Для этого в Add new folder напишем название нашей папочки и кликним Enter. В списке папок появится новая папочка, в моем случае Aboba. После этого кликнем по готовой папке. Внизу названия папочки находится время, когда мы последний раз редактировали содержимое её или саму папку.
Заходим в папку, и кликаем по New Visualization
Нам вылазит вот такое окошко. Под цифрой 1 это поисковик, по котором мы можем найти готовый шаблон. Под цифрой 2, это собственно эти самые шаблоны.
Предлагаю выйти с процесса создания визуализации кликнув по иконке сайта. Давайте попробуем изучить основы проги на примере уже созданной мною визуализации, которую я показывал первой:
Вот собственно так выглядит окошко создания/редактирования проекта. Под цифрой 1 название проекта (в моём случае, у него оно отсутствует).
Под цифрой 2 это режим просмотра визуализации. Мы можем кликнуть по иконке с телефоном и можем посмотреть как будет выглядить наша визуализация на мобильном устройстве.
Под цифрой 3 это предпросмотр нашего проекта. За него отвечает вкладка Preview под цифрой 4
Под цифрой 5 Data, здесь же и хранятся все данные которые мы поместили в визуализацию. Об этом позже
Ну а под цифрой 6, это самое любимое: настройка визуализация. Здесь кликайте, перетягивайте, устанавливайте, опрокидывайте, балуйтесь: делайте что захотите. Можно изменить цвета, добавить анимацию, размеры, доступность и много чего другого.
Зайдем во вкладку Data. Здесь уже мною предварительно всё настроено. Лучше всего загружать уже готовые вами данные с гугл таблиц или Excel, для этого кликайте по синей кнопочке Upload data.
В моем листе Matches хранятся данные визуализации в целом, в Participants хранятся ID и ссылочки картинок, которые я использовал в этом проекте.
Вот так сейчас выглядит наш готовый проект. Теперь давайте попробуем изменить его. Например, я хочу чтобы надпись сверху была не "Политбатл сайта" а "Абоба" с большим шрифтом.
Для этого, переходим в боковую вкладку Header и в окошке Title вместо "Политбатл сайта" пишем "Абоба". В Subtitle в качестве описания напишу "Самая обычная абоба". Теперь ползунок Styling переводим вправо на True и выбираем большой шрифт. По желанию изменяем другие параметры, такие как цвет, обводка и др., которых в этой вкладке довольно таки много, и имеем такой результат:
Заголовок визуализации изменился. Ура!
Теперь я хочу изменить цвет победителей в каждом раунде. Я установил чтобы он был чёрный, но я хочу чтобы он стал другим. Давайте попробуем изменить цвет всех победителей на голубой, но чёрный негр должен остаться чёрным.
Для этого во вкладке Chart styling в Winning team меняем цвет из чёрного, на голубой. Чтобы негр не отдался пропаганде и не стал голубым, зажмём клавишу Ctrl+Alt и всунем всё это дело в негров.
Как можно увидеть, цвет победителей в раундах изменился на голубой. Но тем не менее, негры стали голубыми также. Почему же? Виной всему оказались либералы, ведь я указал неправильное id в таблице (будьте внимательными). Поэтому негры теперь стали голубыми. Вообщем, с цветами можно много баловаться.
Допустим я хочу сделать, чтобы картинки были не круглые, а квадратные. Для этого зайду во вкладку Images и выберу квадратик.
Отлично! Все аватарки теперь квадратной формы.
На самом деле настройки для каждой визуализации уникальны, и то что мы разобрали, это лишь малая часть и всего того, что можно сделать. Например можно сделать чтобы контуры 5 негров в главном финале окружали полностью прямоугольник одного белого либерала. Правда, здорово?
Давайте теперь попробуем опубликовать наш проект:
Для этого заходим в Export и кликаем на Publish. Отлично! Теперь мы можем дать ссылку любому желающему, и он может посмотреть нашу визуализацию. Также вы можете скачать визуализацию в формате картинки или HTML
Мы опубликовали наш проект, и теперь вы можете также насладиться им в хорошем качестве по этой ссылке: https://public.flourish.studio/visualisation/18408605/
На этом первая часть нашего туториала закончилась. В следующем гайде мы разберем эту замечательную видеодиаграмму
Спасибо всем за внимание, надеюсь был полезен:)
Негры9
