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

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

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

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

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

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

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. С помощью этой инструкции данные извлечённые из картинки можно обрабатывать, анализировать, строить по ним диаграммы другого типа. Нашей целью было сделать интерактивную визуализацию, ниже показан результат и генерирующий его код.

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

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

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