Python-эквивалент D3.js

110

Может ли кто-нибудь порекомендовать библиотеку Python, которая может выполнять интерактивную визуализацию графиков?

Я специально хочу что-то вроде d3.js, но в pythonидеале это тоже будет 3D.

Я посмотрел:

  • NetworkX - это только Matplotlibграфики, и они кажутся 2D. Я не видел никакой интерактивности, вроде той, что d3.jsдает, например, перетягивания узлов.
  • graph-tool - он делает только 2D-графики и имеет очень медленные интерактивные графики.
Эйриу фон Кауйф
источник
1
Если вы ищете версию для браузера, вам нужно сгенерировать график в networkx, а затем манипулировать в d3.js.
kreativitea
@kreativitea ok .... как бы я сделал это в идеале: данные графика (через вызовы API в Python) -> Python (материалы для машинного обучения) -> Django / Something + D3.js (визуализация) -> Красивые картинки и веб-сайт :)
Eiyrioü von Kauyf
Я думаю, что вы можете реализовать vega lite на python. Проверьте это и, конечно, тщательно.
Ноэль Харрис,

Ответы:

74

Вы можете использовать d3py модуль python, который генерирует xml-страницы, встраивая скрипт d3.js. Например :

import d3py
import networkx as nx

import logging
logging.basicConfig(level=logging.DEBUG)

G = nx.Graph()
G.add_edge(1,2)
G.add_edge(1,3)
G.add_edge(3,2)
G.add_edge(3,4)
G.add_edge(4,2)

# use 'with' if you are writing a script and want to serve this up forever
with d3py.NetworkXFigure(G, width=500, height=500) as p:
    p += d3py.ForceLayout()
    p.show()
Винсент Агнус
источник
У меня сработало, но пришлось отредактировать одну из строк на with d3py.NetworkXFigure(G, width=500, height=500, host="localhost") as p:. Я проверил последнюю фиксацию d3py на github (SHA: 4e92a90f4003370bc086e0f57b19fca1bd4e8fba)
xb.
7
К сожалению, d3py больше не разрабатывается активно - Винсент - это современный эквивалент (интерфейс Python для Vega / d3.js), но ответ Psychemedia ниже (экспорт networkx в json, а затем рендеринг в d3.js) может быть самым чистым.
A.Wan
2
Попробуйте altair-viz.github.io - преемника d3py и vincent. См. Также stackoverflow.com/a/49695472/179014 .
asmaier
43

Plotly поддерживает интерактивные 2D и 3D графики. Графики визуализируются с D3.js и могут быть созданы с помощью Python API , Matplotlib , ggplot для Python , Сиборн , prettyplotlib и панд . Вы можете масштабировать, панорамировать, включать и выключать трассировки и просматривать данные при наведении курсора. Графики могут быть встроены в HTML, приложения, информационные панели и блокноты IPython. Ниже приведен температурный график, демонстрирующий интерактивность. Дополнительные примеры см. В галерее руководств по IPython Notebooks .

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



В документации приведены примеры поддерживаемых типов графиков и фрагментов кода.



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

Что касается вашего вопроса, вы также можете создавать интерактивные графики из NetworkX.

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

Для трехмерного построения с помощью Python вы можете создавать трехмерные точечные, линейные и поверхностные графики, которые также являются интерактивными. Графики визуализируются с помощью WebGL. Например, посмотрите трехмерный график ставок британского свопа.



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

Раскрытие информации: я в команде Plotly.

Матео Санчес
источник
9
Ясно, что вопрос нацелен на графы в смысле узлов, соединенных ребрами. Этот ответ излишне включает в себя другие возможности визуализации plotly.
Lutz Büch
@ mateo-sanchez, очень жаль, что Plotly решил прекратить все академические и индивидуальные подписки, чтобы сосредоточиться на корпоративных клиентах
Андреуччио
20

Вы смотрели на Винсента? Винсент берет объекты данных Python и преобразует их в грамматику визуализации Vega. Vega - это инструмент визуализации более высокого уровня, созданный на основе D3. По сравнению с D3py репо vincent обновилось совсем недавно. Хотя все примеры статичны D3.

больше информации:


Графики можно просмотреть в Ipython, просто добавьте этот код

vincent.core.initialize_notebook()

Или выведите в JSON, где вы можете просмотреть выходной график JSON в онлайн-редакторе Vega ( http://trifacta.github.io/vega/editor/ ) или просмотреть их на своем сервере Python локально. Более подробную информацию о просмотре можно найти по ссылке pypi выше.

Не уверен, когда, но в какой-то момент пакет Pandas должен иметь интеграцию с D3. http://pandas.pydata.org/developers.html

Bokeh - это библиотека визуализации Python, которая поддерживает интерактивную визуализацию. Его основной выходной бэкэнд - это HTML5 Canvas и использует модель клиент / сервер.

примеры: http://continuumio.github.io/bokehjs/

sk8asd123
источник
2
Винсент уходит - похоже, есть некоторые замены, но я не уверен, насколько тесно они будут связаны с ipython ..
naught101
19

Один рецепт, который я использовал (описанный здесь: Co-Director Network Data Files в GEXF и JSON из OpenCorporates Data через Scraperwiki и networkx ), работает следующим образом:

  • сгенерировать сетевое представление с помощью networkx
  • экспортировать сеть как файл JSON
  • импортировать JSON в к d3.js . ( networkx может экспортировать как древовидные, так и графические / сетевые представления, которые может импортировать d3.js ).

NetworkX JSON экспортер принимает вид:

from networkx.readwrite import json_graph
import json
print json.dumps(json_graph.node_link_data(G))

В качестве альтернативы вы можете экспортировать сеть как файл GEXF XML, а затем импортировать это представление в библиотеку визуализации sigma.js Javascript.

from xml.etree.cElementTree import tostring
writer=gf.GEXFWriter(encoding='utf-8',prettyprint=True,version='1.1draft')
writer.add_graph(G)
print tostring(writer.xml)
психимедиа
источник
16

Другой вариант - боке, которое только что перешло в версию 0.3.

MrDrFenner
источник
7

Для тех, кто рекомендовал pyd3 , он больше не находится в стадии активной разработки и указывает на vincent . vincent также больше не находится в активной разработке и рекомендует использовать altair .

Так что, если вам нужен питонический d3, используйте altair.

Уэс
источник
5

Проверьте python-nvd3 . Это оболочка python для nvd3. Выглядит круче, чем d3.py, а также имеет больше вариантов диаграмм.

Ричи
источник
4

Я бы предложил использовать mpld3, который объединяет визуализацию javascript D3js с matplotlib python.

Установка и использование очень просты, в нем есть несколько интересных плагинов и интерактивных материалов.

http://mpld3.github.io/

ОЗУ
источник
3

Plotly может сделать для вас несколько классных вещейвведите описание изображения здесь

https://plot.ly/

Создает высокоинтерактивные графики, которые можно легко встроить в HTML-страницы для вашего частного сервера или веб-сайта с помощью автономного API.

Обновление: я уверен в его возможностях 3D-построения, для 2D-графиков это потрясающе Спасибо

Джекс
источник
2
Обратите внимание, что это визуализация диаграммы ... Вопрос требует визуализации диаграммы . (Я понимаю, что эти фразы обычно объединяют!)
j6m8 03
2

Вы также можете сериализовать свои данные, а затем визуализировать их в D3.js, как это сделано здесь: Используйте Python и Pandas для создания сетевой диаграммы D3 Force Directed (она также поставляется с записной книжкой jupyter !)

Вот в чем суть. Вы сериализуете данные своего графика в следующем формате:

import json
json_data = {
  "nodes":[
    {"name":"Myriel","group":1},
    {"name":"Napoleon","group":1},
    {"name":"Mlle.Baptistine","group":1},
    {"name":"Mme.Magloire","group":1},
    {"name":"CountessdeLo","group":1},
  ],
  "links":[
    {"source":1,"target":0,"value":1},
    {"source":2,"target":0,"value":8},
    {"source":3,"target":0,"value":10},
    {"source":3,"target":2,"value":6},
    {"source":4,"target":0,"value":1},
    {"source":5,"target":0,"value":1},
  ]
}
filename_out = 'graph_data.json'
json_out = open(filename_out,'w')
json_out.write(json_data)
json_out.close()

Затем вы загружаете данные с помощью d3.js:

d3.json("pcap_export.json", drawGraph);

Однако для ознакомления с рутиной drawGraphя отсылаю вас по ссылке.

Лутц Бюх
источник
Я отредактировал его сейчас, но не включил подпрограмму drawGraph, которая сама вызывает drawLinks и drawNodes. Это было бы слишком громоздко, и элементы имеют смысл только в контексте всего HTML-файла.
Lutz Büch
1

Есть интересный перенос NetworkX на Javascript, который может делать то, что вы хотите. См. Http://felix-kling.de/JSNetworkX/

Арик
источник
это может сработать .... не могли бы вы отослать меня к документации? Как мне вывести график из python в эту библиотеку javascript ...? Я хочу сначала сгенерировать его на Python ... или как мне его загрузить?
Eiyrioü von Kauyf
На самом деле я никогда не использовал JSNetworkX, поэтому я не уверен, как это работает.
Арик
@ EiyrioüvonKauyf: ввод такой же, как в Python, например, список списков или dict of dicts. Вы можете построить график на Python, преобразовать его в список списков и преобразовать в JSON.
Феликс Клинг,
Да, определенно легко. Примеры здесь просто и красиво: felix-kling.de/JSNetworkX/examples
Арик
1

Видеть:

Есть ли там хорошая интерактивная библиотека 3D-графиков?

В принятом ответе предлагается следующая программа, которая, по-видимому, имеет привязки к Python: http://ubietylab.net/ubigraph/

редактировать

Я не уверен в интерактивности NetworkX, но вы определенно можете создавать трехмерные графики. В галерее есть как минимум один пример:

http://networkx.lanl.gov/examples/drawing/edge_colormap.html

И еще один пример из «примеров». Однако для этого требуется, чтобы у вас был Mayavi.

http://networkx.lanl.gov/examples/3d_drawing/mayavi2_spring.html

можжевельник
источник
0

У меня есть хороший пример автоматической генерации сетевых диаграмм D3.js с использованием Python здесь: http://brandonrose.org/ner2sna

Замечательно то, что вы получаете автоматически сгенерированный HTML и JS и можете встроить интерактивную диаграмму D3 в блокнот с IFrame.

Brandomr
источник
0

Библиотека d3graphпостроит принудительно управляемый d3-граф из Python. Вы можете «разбить» сеть на основе веса ребра и навести указатель мыши на узлы для получения дополнительной информации. Двойной щелчок по узлу приведет к фокусированию на узле и связанных с ним краях.

pip install d3graph

Пример:

source = ['node A','node F','node B','node B','node B','node A','node C','node Z']
target = ['node F','node B','node J','node F','node F','node M','node M','node A']
weight = [5.56, 0.5, 0.64, 0.23, 0.9,3.28,0.5,0.45]

# Import library
from d3graph import d3graph, vec2adjmat

# Convert to adjacency matrix
adjmat = vec2adjmat(source, target, weight=weight)
print(adjmat)
# target  node A  node B  node F  node J  node M  node C  node Z
# source                                                        
# node A    0.00     0.0    5.56    0.00    3.28     0.0     0.0
# node B    0.00     0.0    1.13    0.64    0.00     0.0     0.0
# node F    0.00     0.5    0.00    0.00    0.00     0.0     0.0
# node J    0.00     0.0    0.00    0.00    0.00     0.0     0.0
# node M    0.00     0.0    0.00    0.00    0.00     0.0     0.0
# node C    0.00     0.0    0.00    0.00    0.50     0.0     0.0
# node Z    0.45     0.0    0.00    0.00    0.00     0.0     0.0

# Example A: simple interactive network
out = d3graph(adjmat)

# Example B: Color nodes
out = d3graph(adjmat, node_color=adjmat.columns.values)

# Example C: include node size
node_size = [10,20,10,10,15,10,5]
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size)

# Example D: include node-edge-size
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], cmap='Set2')

# Example E: include node-edge color
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], node_color_edge='#00FFFF')

# Example F: Change colormap
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], node_color_edge='#00FFFF', cmap='Set2')

# Example H: Include directed links. Arrows are set from source -> target
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], node_color_edge='#00FFFF', cmap='Set2', directed=True)

Примеры d3graph

Интерактивный пример из титанического кейса можно найти здесь: https://erdogant.github.io/docs/d3graph/titanic_example/index.html https://erdogant.github.io/hnet/pages/html/Use%20Cases .html

эрдогант
источник