Как мы построили график горизонта на исторических данных для спецпроекта ТАСС
В спецпроекте "Бескрайний крайний. Как строили новый дом на Дальнем Востоке России" мы построили график, который показывает различия в годовом количестве осадков в европейской части России, на Дальнем Востоке, в Китае и на севере Монголии. Подробно рассказываем, как создавался график "Распределение осадков в % от годового количества".
![](/file/c705fac93676a144ca2f0.png)
Что мы хотели показать
Есть ли сильные различия между городами разных регионов и почему крестьянам-переселенцам из европейской России было крайне сложно вести сельское хозяйство на новых территориях.
Какие данные у нас были на старте
Дано: данные по годовому распределению количества осадков в девяти городах. Четыре из них располагаются в европейской части России, три — на Дальнем Востоке и еще два — в Китае и на севере Монголии.
Все данные на конец XIX — начало XX века. Из книги (стр.442) мы перенесли данные в таблицу.
![](/file/3c51fbdc9ad1f2b8e9dce.png)
Как мы подбирали подходящий способ визуализации
Идея №1 — барчарты
Самый простой способ — барчарт, или столбчатую диаграмму — мы оставили как запасной вариант. Этот вид визуализации мы уже использовали в каждой главе спецпроекта, поэтому решили поискать другие варианты.
Идея №2 — линейные графики
![](/file/cb3dd860d11472b002f26.png)
Почему линейный график не подошел:
- Сложно воспринимать все города, много цветов.
- Видна только общая закономерность: больше всего осадков летом.
- Сложно сделать выводы о климате, так как различия между городами не считываются.
Мы сгруппировали линии по регионам.
![](/file/b1635725afb9e80eb2853.png)
![](/file/89ba3a1963ff788506882.png)
![](/file/4ab8b9d9134c9d2161e23.png)
Графики заняли неоправданно много места в макете, и их все еще неудобно сравнивать друг с другом.
Идея №3 — лепестковая диаграмма
У нас остались те же проблемы, что и с линейным графиком, и добавились новые:
- Все города на одной визуализации не считываются, много цветов.
- Такая диаграмма обычно используется для сравнения повторяющихся периодов, например лет. В нашем случае линия иллюстрировала город, что запутывает еще больше.
![](/file/b9211a1f835a7609cfe6b.png)
Финальная идея — график горизонта (horizon chart)
И тут в отчаянии мы решили перечитать заголовок — речь идет об осадках или воде. Вдохновение пришло из рисования, а точнее, из техники размывки, когда для создания тени используется многократное наложение одной разбавленной краски.
По такому же принципу работает график горизонта (horizon chart) — диаграмма с областями, разделенная на сегменты. Они накладываются друг на друга, и образовавшиеся пересечения (более темные цвета) показывают увеличение показателя. Такой вид визуализации более компактный и позволяет разместить рядом много рядов данных.
В СМИ диаграмма горизонта практически не встречается, так как не всегда может быть понятной без дополнительных разъяснений. А еще готовых инструментов для ее построения нет — нужно писать код!
Где строили график
Мы использовали готовый код для визуализации в Observable. Загрузив данные, мы сразу увидели, как сильно климат на Дальнем Востоке похож на погодные условия в Китае и как не похож на европейскую часть России. Наложение сегментов решали задачу — подсвечивали периоды сильных осадков.
![](/file/eb8ac17201a3acf8600e2.png)
Как дорабатывали
Теперь нужно подобрать оптимальное число таких сегментов и при этом не потерять данные: на сколько условных "полос" мы можем разделить график по оси Y.
![](/file/dc8c2a8b995d3642e5761.png)
Разбиение на два и три сегмента съедало значения менее 0,5%.
![](/file/3995286e62e2d68237397.png)
Пять или шесть сегментов показывали все небольшие значения, но в то же время давали неоправданно большое наложение в периоды сильных осадков — изображение "замусоривалось".
![](/file/855136a6b8f82421b6fd0.png)
В итоге мы решили остановиться на четырех срезах: в такой визуализации видна интенсивность осадков, и как бонус границы сегментов получились целыми числами.
![](/file/b0c2386143e1e3c9cb078.png)
Финал
Осталось выгрузить результат в формате SVG и передать дизайнеру инфографики на доработку. Отдельно мы сделали легенду к графику, чтобы объяснить читателю, как читать визуализацию.
![](/file/c65e5cf30b4efb88be34e.png)
Осталось добавить подписи и закодировать цветом летние и зимние месяцы. Вот такой результат мы добавили в спецпроект:
![](/file/e4b44ac5050a6249d02fd.png)
А подробнее о том, как проходило освоение Дальнего Востока, несмотря на сложные климатические условия, — читайте в спецпроекте "Бескрайний крайний".