Еквівалент Python D3.js


110

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

Я спеціально хочу щось на зразок d3.js, але в pythonідеалі це буде також 3D.

Я подивився:

  • NetworkX - це лише Matplotlibсюжети, і вони здаються двовимірними. Я не бачив ніякої інтерактивності, як та, яка d3.jsдає, наприклад, тягнучи вузли навколо.
  • graph-tool - він робить лише двовимірні графіки та має дуже повільні інтерактивні графіки.

1
Ви хочете генерувати графік у networkx, а потім маніпулювати в d3.js, якщо ви шукаєте версію на базі браузера.
— kreativitea

@kreativitea нормально .... як би я це зробив в ідеалі: Дані графіків (через дзвінки 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), але відповідь психімедії нижче (експорт 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 для отримання додаткових прикладів.

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



У документах наведені приклади підтримуваних типів ділянок і фрагменти коди.



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

Зокрема, до свого питання ви також можете робити інтерактивні сюжети з NetworkX.

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

Для 3D-побудови графіків за допомогою Python ви можете зробити тривимірні діаграми розсіювання, лінії та поверхні, які є аналогічно інтерактивними. Сюжети надаються за допомогою WebGL. Наприклад, див. Тривимірний графік швидкості заміни у Великобританії.



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

Розкриття інформації: Я в команді Plotly.


9
Зрозуміло, що питання спрямоване на графіки у значенні вузлів, з'єднаних ребрами. Ця відповідь непотрібно включає інші можливості візуалізації сюжетно.
— Lutz Büch

@ mateo-sanchez дуже прикро, що Plotly вирішив припинити всі академічні та індивідуальні підписки, щоб зосередитися на корпоративних клієнтах
— Andreuccio

20

Ви дивилися на Вінсента? Вінсент приймає об’єкти даних Python та перетворює їх у граматику візуалізації Vega. Vega - це інструмент візуалізації вищого рівня, побудований поверх D3. Порівняно з D3py, vincent repo було оновлено нещодавно. Хоча всі приклади є статичними 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/


2
Вінсент виходить на виїзд - схоже, що є деякі заміни, але я не впевнений, наскільки тісно прив’язаний до ipython вони будуть ..
— naught101

19

Один із застосованих мною рецептів (описаний тут: Файли мережевих даних співавторів у 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))

Крім того, ви можете експортувати мережу у вигляді XML-файлу GEXF, а потім імпортувати це представлення до бібліотеки візуалізації JavaScript sigma.js .

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)


7

Для тих, хто рекомендував pyd3 , він більше не перебуває під активним розвитком і вказує на винсент . Вінсент також більше не перебуває в активному розвитку, і рекомендує використовувати Altair .

Тож якщо ви хочете пітонічний d3, використовуйте altair.



5

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


4

Я б запропонував використовувати mpld3, який поєднує візуалізації JavaScript D3js з matplotlib python.

Установка та використання дуже прості, у ньому є кілька цікавих плагінів та інтерактивних матеріалів.

http://mpld3.github.io/


3

Багато можливо зробити для вас кілька цікавих продуктіввведіть тут опис зображення

https://plot.ly/

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

Оновлення: Я зауважу, впевнений у своїх можливостях побудови тривимірних графіків, для двовимірних графіків - приголомшливий спасибі


2
Зауважте, що це візуалізація діаграми ... Питання вимагає візуалізації графіка . (Я ціную ці фрази зазвичай плутаються!)
— j6m8

2

Ви також можете серіалізувати свої дані, а потім візуалізувати їх у D3.js, як це зроблено тут: Використовуйте Python & Pandas для створення мережевої діаграми, спрямованої на силу D3 (Поставляється з ноутбуком з юпітером !)

Ось суть. Ви серіалізуєте дані своїх графіків у такому форматі:

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, наприклад, список списків чи диктат. Ви можете побудувати графік в Python, перетворити його у список списків та перетворити його в JSON.
— Фелікс Клінг

Так, однозначно просто. Приклади тут просто і красиво: felix-kling.de/JSNetworkX/examples
— Арік

1

Побачити:

Чи є там хороша інтерактивна бібліотека 3D-графіків?

Прийнята відповідь пропонує наступну програму, яка, мабуть, має зв'язки пітона: http://ubietylab.net/ubigraph/

Редагувати

Я не впевнений у інтерактивності NetworkX, але ви точно можете зробити 3D графіки. У галереї є принаймні один приклад:

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


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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.