Как мне спроектировать этот график (выбрать цвета и количество линий), чтобы он был понятным?

Я разрабатываю график для веб-сайта с помощью Highcharts . Этот график содержит множество кривых вспышек (в основном, кумулятивную заболеваемость с течением времени). Смысл этого конкретного графика в том, чтобы иметь возможность быстро и легко сравнивать несколько кривых с текущей ситуацией чиновника общественного здравоохранения («точечная оценка»).

Каждая кривая имеет оценку (от 0 до 100), которая показывает, насколько она похожа на точечную оценку. Я хочу отобразить кривые с лучшими оценками X и раскрасить их в зависимости от того, насколько хороши их оценки.

Мне сложно определиться с двумя вещами:

  1. Какое максимальное количество кривых я могу отображать одновременно?
  2. Как раскрасить кривые, чтобы они были визуально различимы и отображали баллы?

Что я пробовал:

Использование ColorBrewer для выбора цветов (чем темнее цвет, тем выше оценка):

введите описание изображения здесь

Делаем более толстые линии, чтобы указать более высокие баллы:

введите описание изображения здесь

Однако ни один из этих вариантов не особенно хорош, потому что они не корректируют линии в соответствии со счетом. Вместо этого линии окрашены категорически. Если оценка верхней строки оценки равна 100, а следующая самая высокая строка оценки равна 10, цвета не отличаются на 1/10, если это имеет смысл.

Это привело меня к попытке настроить линии оттенков серого на линейной шкале (например, оценка 100 будет полностью черной (#000000), а оценка 50 будет #808080). Однако на практике линии по-прежнему не так легко различить:

введите описание изображения здесь

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

введите описание изображения здесь

Но потом, если я добавлю слишком много кривых, получится слишком грязно. Вот пример (постоянная толщина линии):

введите описание изображения здесь

Я, очевидно, нуждаюсь в некотором руководстве. За этой проблемой должна стоять наука. Как мне спроектировать этот график?

Мне кажется, что вариант 1 работает достаточно хорошо, если вы немного раскрыли цветовую палитру, а не просто использовали теплые тона. Красный вверху, оранжевый рядом, зеленый... синий внизу... и т.д.
Я бы с удовольствием, но я не знаю алгоритмического способа сделать это. Мне нужен алгоритм, чтобы сказать, что 100 % — это самый высокий красный цвет, 78,9 % — это то-то и то-то и т. д. Мне нужно точное сопоставление. Мне не нужно категориальное отображение. Сила окраски должна определяться баллом.
Чтобы сделать мой предыдущий комментарий более ясным, я хочу детерминированное отображение, которое дает мне цвет C для оценки S. f(S) = C. Хитрость заключается в том, чтобы определить функцию f так, чтобы цветовой спектр имел визуальный смысл.
Это действительно зависит от того, что вы пытаетесь сообщить с помощью графа в первую очередь. Я бы посоветовал прочитать книги Эдварда Тафта.
Но интуиция подсказывает, что вы слишком много пытаетесь передать через цвета и толщину линий. Разве ось x/y не передает все, что вам нужно для общения?
Ось x/y определенно передает важные вещи, но, поскольку я показываю несколько строк, я хочу, чтобы пользователь мог различать их по их баллам. Счет не представлен ни одной из осей.

Ответы (2)

Что касается технической реализации этого, любая приличная программа для построения графиков предлагает возможность настроить цветовые оси по своему усмотрению. Насколько я могу судить, Highcharts позволяет это : вы устанавливаете точки на своей цветовой оси с цветами, которые вы определяете, а все остальное линейно интерполируется между этими цветами. Таким образом, вы можете использовать полный цветовой спектр с «точным отображением», как вы это называете.

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

  • Чтобы получить максимальное количество различимых цветов, пройдите один раз по кругу оттенков и от темного к светлому, например, черный → темно-зеленый → слегка темно-синий → слегка светло-красный → (светло) желтый → белый.
  • Помните о дальтонизме, особенно о красно-зеленом (поскольку он наиболее распространен). Приведенная выше схема делает это, помещая красный и зеленый цвета далеко с точки зрения яркости.
  • Вы можете выбрать свои остановки таким образом, чтобы различия в определенном диапазоне вашего счета были лучше видны, чем в других. Например, если кривые с наивысшим баллом являются наиболее важными и наиболее важными для различения, вы можете организовать выбор цветовой схемы таким образом, чтобы она показывала больше различий в этом диапазоне, т. е. не размещайте забои на равном расстоянии, а так, чтобы большинство диапазон значений, различие которых является наиболее важным.

Как раскрасить кривые, чтобы они были визуально различимы и отображали баллы?

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

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

Отлично! Я понятия не имел, что у Highcharts есть такая возможность. Сначала я думал, что это решит мои проблемы, но я нашел другое решение, которое на самом деле похоже на Highcharts stops. Смотрите мой ответ для получения дополнительной информации.

@Wrzlprmft сделал отличный комментарий, который действительно помог. Хотя его решение не помогло мне достичь цели на 100%, оно поставило меня на правильный путь.

Это веб-приложение представляет собой приложение Django (Python). В результате я решил использовать библиотеку под названием Spectre . Функциональность Spectra идентична Highcharts stopsс расширением linearGradient. Spectra позволяет мне сделать это:

>>> color_scale = spectra.scale(['red', 'blue']).domain([0, 100])
>>> color = color_scale(39.33)
>>> color.hexcode
'#9b0064'

Это именно то, что мне нужно.

Как мне спроектировать этот график (выбрать цвета и количество линий), чтобы он был понятным?
СпросиСетьПолитика конфиденциальности1y, 0v