Библиотеки визуализации данных

Я работаю над веб-сайтом, который визуализирует взаимосвязь между некоторыми данными. В частности, он помогает отображать жесткие диски, разделы и логические тома (LVM). Я написал части, которые собирают и структурируют данные, в результате чего модель данных выглядит как на рисунке 1 . Что я хотел бы сделать, так это визуализировать это, как на рисунке 2 , где логические тома располагаются поверх логических дисков, которые их поддерживают. Логические диски располагаются поверх физических томов (дисков или разделов), которые их поддерживают, и, конечно же, физические разделы опираются на физические диски, на которых они расположены.

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

Какая библиотека сможет отобразить визуализацию, как на картинке 2?

(Рисунок 1)Логическое расположение данных

(Рисунок 2)
Желаемая визуализация данных

Ответы (2)

Я считаю, что вы можете достичь того, чего хотите, используя D3.js. Это библиотека Javascript для создания расширенных (помимо диаграмм) визуализаций для Интернета.

Тип визуализации, который вы ищете, - это карта дерева, и вот пример ее в D3.

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

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

Древовидная диаграмма — это 95% пути к тому, что я ищу. Это действительно включает в себя визуализацию пропорционального размера. Однако ему не хватало иерархического аспекта. К счастью, вики-страница D3 для древовидных карт связана с макетом раздела, и я думаю, что это именно то, что я ищу. * github.com/mbostock/d3/wiki/Раздел-Макет
Однако макет раздела представляет собой строгую иерархию. Поскольку мой макет представляет собой лес, а не дерево, мне, возможно, придется обойти это. Может быть, я смогу согнуть D3 по своему желанию, может быть, я смогу использовать два дерева (одно перевернутое), чтобы корни были общими для всех деревьев.

Вот несколько библиотек JavaScript, которые могут выполнить эту работу:

Springy.js (бесплатный, простой, с открытым исходным кодом) Демонстрационная документация
веб -сайта Мнение: Отлично подходит для начинающих, использует технологии Canvas, WebGl и SVG.


Демонстрационная документация веб-
сайта Raphael.js (бесплатная, более продвинутая, с открытым исходным кодом)

Если вас не устраивает этот ответ, взгляните на ссылку ниже, в которой более подробно рассказывается об обеих этих библиотеках.
http://www.sitepoint.com/twelve-javascript-libraries-data-visualization/

Библиотеки визуализации данных
СпросиСетьПолитика конфиденциальности1y, 0v