Эта линейная диаграмма отображает те же данные, что и Stacked Bar Chart, но использует точки для обозначения точек данных и линии для их соединения. Тумблер (созданный в MUI) позволяет переключаться между простой линейной диаграммой и диаграммой областей. Обе визуализации данных используют практически один и тот же код D3.js.
Диаграммы областей лучше работают в качестве визуализации данных при наличии единичных наборов данных: они помогают пользователям более четко увидеть общее значение, представленное точками данных, поскольку оно пропорционально размеру заштрихованной области. Однако при наличии нескольких точек данных заштрихованные области могут сбивать с толку, поскольку одна область может заслонять области, расположенные за ней. D3.js позволяет полностью контролировать этот процесс: например, мы можем уменьшить непрозрачность некоторых или всех областей, или даже уменьшить непрозрачность тех областей, которые перекрывают нижележащие. Диаграммы областей также могут сбивать с толку, когда на них отображаются отрицательные значения, хотя в D3.js предусмотрены способы решения этой проблемы, например, использование разных цветов для положительных и отрицательных значений.
Как и в примере Bar Chart, можно использовать элементы управления пользовательского интерфейса для фокусировки на определенном наборе данных в визуализации данных и связать это с кодом D3.js. Однако в данном случае используются флажки, а не радиокнопки. При использовании радиокнопок необходимо выбрать только один вариант, в то время как при использовании флажков каждый флажок может быть выбран или отменен независимо от других. Таким образом, в данном пользовательском интерфейсе можно выбрать любую перестановку наборов данных: например, один орган, два органа или все три органа. Кодирование для этого несколько сложнее, особенно когда количество точек данных превышает небольшое число.
D3.js также позволяет выбрать кривую, используемую для связи данных. Обычно мы выбираем кривую, наиболее подходящую для визуализации данных, и жестко фиксируем ее. Однако, чтобы проиллюстрировать возможные варианты, мы добавили набор радиокнопок, чтобы пользователи могли выбрать свою собственную. Некоторые кривые, например Catmull-Rom, проходят через все точки данных, в то время как другие, например Curve Basis, этого не делают. Плюсом того, что кривая проходит не через все точки данных, является то, что с ее помощью можно очень хорошо показать тенденции в данных. И наоборот, кривая Catmull-Rom включает в себя все фактические точки данных, но при этом содержит провалы и недовалы, что затрудняет выявление тенденций.
Стоимость D3.js Line Chart или Area Chart в значительной степени зависит от того, в какой степени они нуждаются в индивидуальном кодировании. Дополнительные модули, такие как всплывающие подсказки, пользовательская анимация и т.д., немного увеличивают стоимость, но значительно повышают удобство использования. Страница Цены даст вам общее представление. Страница Цены дает общее представление. Однако, пожалуйста, свяжитесь с нами для бесплатного обсуждения с разработчиком, чтобы понять, что лучше для вас.