A simple and easy-to-use graph visualization tool developed recently

background

Manual , It has a natural advantage in relationship presentation , Very intuitive . however , Ordinary people want to draw such a beautiful network diagram , Need to learn software , Or programming , There is a certain threshold .

In order to effectively reduce the use threshold , Let more people use tools with almost zero learning cost , Visualization of graph network , So I developed the following small website .

Website introduction

https://kevin-meng-graph-in-life-knowledge-graph-easy-plotapp-4mqx3g.streamlitapp.com/

It is recommended to use the browser to punch in , Currently deployed abroad streamlit On , The access speed is a little slow .

Support function

The website uploads data containing corresponding nodes and relationships Excel file , Automatically draw the corresponding interaction network diagram .

• The node supports displaying pictures
• Set the color of the node
• Show node labels
• Show relationship labels
• Set relationship color
• Dynamic interaction , Position can be adjusted by yourself

You can add the corresponding nodes and relational data Excel file , Upload to the website by dragging or browsing . Specifically excel The structure style can be obtained by downloading the sample file .

Tips

The website itself does not upload and store your data , Please feel free to use .

The reason , Use the familiar Excel file , In order to achieve almost zero learning cost .

Video tutorial

B Stop video

The development process

lately , Use streamlit There are more frames , Its low code development philosophy , And rich components and active community support , Let me realize my idea easily , Show the previous paragraph .

Some time ago, there was an epidemic in Shanghai , Also based on streamlit Developed A protest station in Shanghai , Huawei MindSpore Friends also deploy it in the community ：

https://mindspore.cn/shanghai-covid/

And this knowledge map visualization website , Also based on streamlit Components used ：

• streamlit-agraph

It is based on react-d3-graph Make a package . Relevant procedures are already in Github Open source , Welcome to visit :

https://github.com/kevin-meng/graph_in_life

Follow up development plan

1. Add image clipping and compression function .
2. Add drawing bed support
3. Work display section Gellary
4. ...

summary

The website can effectively reduce the relationship network 、 Knowledge map visualization threshold , Do it Excel Will use .

Welcome to use . Any suggestions , But leave a message to feed back to me .

in addition , Also welcome to email 、 Official account submission .

Reference material

• https://danielcaldas.github.io/react-d3-graph