• En
  • АГЕНТСТВО
    • Agency
    • Агентство
    • Презентация
    • Портфолио
    • Behance
  • ← Блог

infographer

  • Теория
  • Примеры
    • Примеры
    • Критический взгляд
  • События
    • Текущие события
    • Прошлые события
  • Инструменты
  • Книги
    • Книги
    • Книжный магазин
  • Новости
Инструменты

Извлечение данных из картинки с помощью Illustrator и Excel 1

1
Comments
0
GooglePlus
0
Facebook
0
Twitter
Linkedin
1
ВКонтакте
0
Pocket

В данном примере используется Excel 2013 и Illustrator СС, но метод применим и для других версий и программ. Сложность низкая, требуются базовые навыки работы в Illustrator и Excel.

Работая над отчётом или графиком, мы, как правило, располагаем данными в текстовом виде: таблицей в Эксель или .DOC-файлом. Но что делать, если таблицы с данными нет, а в качестве исходника выступает картинка? В лучшем случае она векторная, в худшем — растровая и плохого качества. Такая задача нам попадалась не раз, так что мы решили написать небольшую инструкцию-подсказку. 

В качестве исходника будет выступать вот такой безымянный скан без подписанных значений для каждого столбца. Ниже мы пошагово расскажем, как такую картинку можно перевести в интерактивную диаграмму, причем более наглядную.

Рис. 1. Исходная гистограмма

 

Для восстановления данных не стоит замерять линейкой столбцы на мониторе и выписывать их на бумажку, существует метод изящнее. Можно воспользоваться тем, что из файла в формате .SVG можно извлечь данные, пригодные для вставки в Эксель.

Отступление о формате .SVG: Базовый векторный формат, доступен во всех векторных редакторах, объекты в нём хранятся в виде наборов координат X и Y. За ноль считается левый верхний угол.

1. Открываем исходное изображение в Иллюстраторе. Нужно убедиться, что оно расположено строго горизонтально.

2. Расставляем направляющие с постоянным интервалом таким образом, чтобы на один год приходилась одна направляющая.

3. С помощью инструмента «Перо» создаем две ломанные кривые, вручную отмечая высоту столбцов. Принадлежащие одному году точки кривых размещаем друг под другом, ориентируясь на созданные на прошлом шаге направляющие. Это нужно для того, чтобы ряд координат X был одинаков у обеих кривых.

Рис. 2. Поверх исходной растровой картинки положены направляющие и нарисованы две векторные кривые

 

4. В формате .SVG отсчёт координат ведётся с левого верхнего угла монтажной области. Поэтому нашу диаграмму нужно отзеркалить сверху вниз так, чтобы ноль координат на графике совпал с точкой отсчёта .SVG-файла. Все объекты кроме кривых удаляем для того чтобы они не усложняли код .SVG-файла. На этом шаге нужно быть очень внимательным с горизонтальной осью. Она должна оказаться точно на верхней границе монтажной области (в нашем случае красная кривая в 1983 году имеет значение «0», поэтому этой точкой она касается горизонтальной оси).

Рис. 3. Лишнее удалено, кривые отзеркалены по вертикали и выровнены по верхнему левому углу монтажной области

 

5. Сохраняем документ в формате .SVG, сняв галку «использовать монтажные области». В появившемся диалоговом окне нажимаем на кнопку «Код SVG». Откроется текстовый редактор. Процесс сохранения можно не доводить до конца, так как сам .SVG-файл далее не потребуется.

Рис. 4. Сохранение в .SVG

 

6. В коде нас интересуют только координаты точек, из которых состоят красная и синяя кривые. На рисунке ниже искомые данные выделены красным. Проведём автозамену в два этапа так, чтобы целая и дробная части отделялись запятой, а не точкой. Это нужно для того, чтобы позднее Эксель правильно понимал формат числа.

Рис. 5. Искомые части кода

 

7. В неизменённых данных запятая разделяет пару координат X и Y. Так как запятая будет выполнять роль разделителя целой и дробной частей, то разделять координаты X и Y должен другой символ. В нашем случае это — точка с запятой. Проведём замену запятой на точку с запятой.

Рис. 6. Замена разделителя координат X и Y

 

8. Теперь можно заменить точки на запятые. Описанный порядок замены не позволит испортить данные. Если провести замену точки на запятую сразу в исходных данных, это приведёт к тому, что запятая будет выполнять несколько ролей и при обработке данных в Экселе возникнут трудности.

Рис. 7. Замена десятичного разделителя, итоговый формат данных

 

9. Вставляем первый из наборов координат в ячейку Экселя.

Рис. 8. Вставка в ячейку

 

10. Не снимая выделения с этой ячейки во вкладке меню «Данные» нажимаем «Текст по столбцам». Нужно разбить текстовую строку в ячейке на отдельные ячейки, каждая из которых будет содержать в себе пару координат: X и Y. В качестве разделителя ячеек выбираем «пробел».

Рис. 9. Разбивка текста на ячейки, первый шаг

Рис. 10. Разбивка текста на ячейки, пробел в качестве разделителя

 

11. Далее нам нужно превратить горизонтальный ряд ячеек в вертикальный. Для этого выделим все ячейки, копировать → нажать правой кнопкой мыши на пустую ячейку ниже → специальная вставка → транспонировать. Горизонтальный ряд удаляем, оставляя только вертикальный.

Рис. 11. Превращение строки в столбец

 

12. Теперь нужно разбить столбец надвое, в левом будут координаты X, в правом Y. Разделителем в примере выступит точка с запятой. После разбивки нужно проверить, чтобы строки следовали сверху вниз от минимума к максимуму, ориентируясь по первому столбцу (A). Этот столбец в настоящем примере соответствует координатам X.

Рис. 12. Разбивка столбца надвое

Рис. 13. Разделённые и отсортированные столбцы координат

 

13. Проводим описанную выше обработку и для второго набора координат, отвечающего за вторую кривую.

14. Данные уже можно отобразить в виде точечной диаграммы. Причём, новые версии Экселя распознают пары столбцов X и Y, если в контекстном меню диаграммы зайти в «Тип диаграммы» и рассмотреть предложенные варианты.

Рис. 14. Извлечённые данные и автоматически построенная точечная диаграмма

 

15. У обоих наборов координат столбец X одинаков. Заменим их столбцом годов как в исходной картинке. По данным такого вида можно строить графики и гистограммы.

Рис. 15. Координаты X заменены на года

 

16. Не забудьте, что в результате всех этих действий мы получили кривые, построенные по условным значениям, взятым из координат .SVG-файла. Вы сможете перевести все значения в реальные, если у вас есть хотя бы одно реальное значение для любой из точек. На рисунке ниже цифра 224 — реальное значение из сопровождающего текста. Ей соответствует значение 77,342 условных единиц (координата Y из .SVG). Получается, что в нашем примере все значения Y для каждой кривой надо умножить на коэффициент 3,14, чтобы получить реальные значения.

Рис. 16. Расчет коэффициента соответствия условных единиц реальным

 

17. Выделим коэффициент, копировать → выделить оба столбца Y → правая клавиша → специальная вставка → умножить.

Рис. 17. Домножение столбцов Y на коэффициент соответствия

 

18. В итоге у нас есть набор данных в Экселе, который соответствует исходной картинке, см. рисунок ниже.

Рис. 18. Исходная гистограмма со значениями

 

19. Такой тип диаграммы используется в исходнике, но это вовсе не значит, что он подобран хорошо. Если задача это позволяет, попробуйте подобрать более подходящий способ представления. В данном случае динамику по годам будет легче оценить по линейной диаграмме с маркерами.

Рис. 19. График с маркерами, построенный по обработанным данным

 

20. С помощью этой инструкции данные извлечённые из картинки можно обрабатывать, анализировать, строить по ним диаграммы другого типа. Нашей целью было сделать интерактивную визуализацию, ниже показан результат и генерирующий его код.

И вот что из этого получилось:

Если у вас есть похожие «помощники»– делитесь! Будем рады узнать что-то новое.

В подготовке материала вместе с Андреем Постуховым участвовали Олег Степанов и Максим Горчаков

Июн 29, 2017Андрей Постухов
Статья была интересной?
  • Поделюсь (3)
  • Полезно (21)
  • Бесполезно (0)
  • Банально (0)
4 стратегии грамотного использования цветов в графиках (от Донны М. Вонг)Визуальная мишура
Главная Книги Извлечение данных из картинки с помощью Illustrator и Excel
2 г. назад 2 Инструментыadobe illustrator, SVG, интерактив, советы, уроки, хитрости
Андрей Постухов

Аналитик агентства infographer

Сайт
  • Pingback: Извлечение данных из диаграммы без данных — Больше чем слайды()

  • Елена Диденко

    так хорошо все начиналось, но при сохранении кнопка «код SVG» неактивна(((((((

  См. также  
Инструменты, Новости

Вышла D3.js 4.0

Вышла новая версия библиотеки d3js для создания интерактивных визуализаций. D3.js – практически самая популярная на сегодняшний день... 0

Инструменты

ТОП-5 библиотек для интерактивной визуализации

Первые шаги в мир интерактивной визуализации могут быть по-настоящему сложными. 4

Примеры визуализации, Теория

Выбирай серый – не ошибешься!

Подбор цветов в инфографике — непростая задача. 3

Примеры визуализации

Что делает инфографику крутой?

Цифровые постеры – повсюду, и практически всегда они преподносятся под видом инфографики. 3

Книги

СКАЧАТЬ: От правильного графика к успешной визуализации: практическое руководство

Вы в одном шаге от получения руководства! 1

Теория

Три уровня визуализации: данных, информации, знания

Нам кажется, что мы пришли к глубокому пониманию вопроса - визуализация бывает 3х уровней. 6

Теория

Как рисовать иллюстрированные карты (Часть 2)

Помните советы о том, как рисовать иллюстрированные карты от Ливи Гослинга и журнала Digital Arts? Мы подготовили для вас еще одну порцию. 0

Примеры визуализации

5 способов показать, что происходит «на районе»

Для кого этот город, район, публичное пространство? Как добраться из точки А в точку Б и не застрять в пробке навечно? 0

Мы в Facebook, ежедневно

Unable to display Facebook posts.
Show error

Error: Error validating application. Application has been deleted.
Type: OAuthException
Code: 190
Please refer to our Error Message Reference.
Для авторов
Приглашаем авторов по теме инфографики к сотрудничеству. Политика обработки персональных данных и пользовательское соглашение.
Контакты

Infographer – это агентство инфографики и образовательный ресурс об инфографике. Офисы в Москве и Гааге, работаем для клиентов со всего мира (контакты).

Адрес: Москва, Ленинский просп. 30А

Телефон: +7 916 628 47 64

Имейл: mg@infographer.ru

Пишем для вас с 2009 года © Infographer, при перепечатке ссылка обязательна. 16+