Простой способ использования визуализаций D3.js в бизнес-отчетах
После создания красивой визуализации в D3.js мои коллеги по маркетингу часто задают мне один и тот же вопрос: «Не могли бы вы прислать мне это в PowerPoint?». Обычно я объясняю, что это запрограммированная диаграмма, похожая на веб-сайт, и что, к сожалению, ее невозможно поместить на слайд PowerPoint. Пока что моей лучшей рекомендацией было использовать инструмент Microsoft snipping tool. Но недавно я нашел решение, которое на удивление хорошо работает.
Итак, прежде чем мы начнем, нам, конечно же, понадобится визуализация D3.js. Для этого я создал диаграмму солнечных лучей, показывающую годовой чистый доход Mondēlez в 2018 году. Это довольно интересный график. Как мы видим, 43,1% их чистой выручки приходилось только на печенье, такое как, например, Oreos. И только на Северную Америку приходится 50% этих продаж. Это действительно много печенья.
Итак, давайте превратим эту визуализацию во что-то, что мы сможем использовать в слайде PowerPoint. Первое, что нам нужно сделать, это преобразовать html-файл с нашей визуализацией D3.js в PDF-файл. Для этого нам просто понадобится PhantomJS, немного JavaScript и командный файл с одной строкой. Это займет всего три минуты. Сначала мы загружаем PhantomJS и распаковываем ZIP-файл в папку по нашему выбору, например C: / PhantomJS /. Установка не требуется. Во-вторых, мы загружаем скрипт rasterize.js и помещаем его в папку, где находится наш файл sunburst.html. Теперь мы открываем редактор и набираем
C:/PhantomJS/bin/phantomjs rasterize.js sunburst.html sunburst.pdf
Мы сохраняем этот файл как командный файл, например convert.bat. При запуске командного файла мы видим, что в нашей папке появится новый файл с именем sunburst.pdf. Возможно, мы захотим настроить ширину и высоту страницы, а также поля в самом начале скрипта rasterize.js. Для нашей диаграммы солнечных лучей мы выбрали:
Это уже довольно удобно. Наши коллеги уже могут сделать гораздо больше с PDF-файлом, чем с HTML-файлом, который основан на нескольких пакетах JavaScript и файлах JSON.
Следующим шагом является преобразование нашего недавно созданного PDF-файла в файл, который мы можем использовать в PowerPoint. Имейте в виду, что ключевое слово здесь, конечно же, без потерь. Мы хотим иметь четкие формы и текст, иначе мы могли бы использовать инструмент для обрезки. Для этого следующего шага мы хотим использовать Inkscape. После установки нам нужно только отредактировать наш командный файл и добавить следующую строку:
"C:/.../Inkscape/inkscape" -f=sunburst.pdf --export-emf=sunburst.emf
Как только мы запустим командный файл, наш PDF-файл будет преобразован в файл EMF. EMF - это собственный векторный формат для PowerPoint, который действует аналогично файлам SVG. Это означает, что теперь мы можем открыть нашу презентацию PowerPoint и вставить эту недавно сгенерированную EMF как картинку. Формы и текст четкие, и мы даже можем разгруппировать визуализацию и изменить отдельные компоненты.
Уверен, вашим коллегам это понравится!
